BLOG

『OSC 2019 Hokkaido』一般参加レポ

結構書きたいネタが溜まっていてどこから手を付けて良いか分からなくなってしまっていたのですが、せっかくなら新鮮なうちに記事にしてみようと思い、表題のOSCをテーマに記事を書いてみます。

前提として私自身OSC自体の参加は2回目の新参です。なので、技術面での深い言及やセミナーへの評価はしていません。できません。
このレポは全体を通して「こんな感じだったよ~」「参加してみてこう思ったよ~」といったゆるーい内容を予定しているので、ゆるーい気持ちでご覧頂ければと思います。

「面白そうだけど、そもそもOSCってどんなものなのかよくわかんない」「OSC北海道、どんな雰囲気なんだろう」って方に読んでもらえたら少しはお役に立てるかな…?

そもそもOSCってなんなの

まずはそもそもOSCってなんなの?ってところですが、「オープンソースカンファレンス実行委員会」が主催で開催している大規模なセミナーイベントです。
公式の説明を引用すると『オープンソースに関する最新情報の提供』を行っている「オープンソースの文化祭」って感じのイベントで、オープンソースの最新の動向を知ることができます。協賛企業に有名な会社さんが多いので結構しっかりしてるイベントです。

…と頑張ってざっくりまとめてはみたものの、正直私はこのイベントの背景や歴史に詳しくないので間違ったことを言ってるかもしれません。変なこと言ってたらバシバシつっこんでやってください。

ちなみに非エンジニアの私が初回参加することになったきっかけはエンジニアの友人に誘われたからでした。
「なんかよくわかんないけどラズパイの話聞けるなら楽しそう」ってホイホイついて行ってからというもの気が付いたら「悪くないな。楽しいな」と足を運ぶようになった次第です。

オープンソースってくくりのため、セミナーの幅がとにかく広いのが特徴で、例えばラズパイのようにIoT方面の話も聞ければ、私の本業のWEB制作(HTMLやCSS)方面の話も聞けて退屈しません。

というのも、タイムスケジュールに沿ってたくさんのセミナーが並行で開かれているので、好きなテーマのセミナーを自分で選んで聞きにいく方式なんです。
大学の授業みたいに1コマ目はサボって2コマ目の面白そうな枠を聞きにいって、3コマ目は息抜きに外に出てお茶する…なんかも可能です。
(実際は興味深いセミナーが多すぎてむしろ「同じ時間に面白そうなの被っちゃってるじゃんどっち出よう」ってことになるので、空き時間なんかほぼないんですけれどね。)

OSCは全国で開催されていて、その北海道版が『OSC Hokkaido』というわけです。

私が参加したセミナー一覧

10:00-10:45
遅刻しました。本当に朝起きられないんですよね。本当はEC-CUBEかbacerCMSのに出たかったのに。

11:00-11:45
「いかにしてアウトプットするか」(講師:nasa9084 様)

12:00-12:45
「WordPress 新エディタ Gutenberg でブログを書こう」(講師:田中 広将 様)

13:00-13:45
友人が企業ブースで参加していたのでお話に行ったり、ノートPCで仕事したり。

14:00-14:45
「Webサーバ高速化テクニック」(講師:窪田 優 様)

15:15-16:00
「ソレダメ!~これまで出会った改善が必要なCSS~」(講師:長谷川 広武 様)

16:10-16:55
「SVGを活用したビジュアルなWebページ作成入門」(講師:前田 和昭 様)

17:10-18:00
LTは予定が控えていたため参加できず…

前日に参加申し込みするという飛び込みっぷりでしたが、気が付けばこのような感じで6時間以上も参加してました。
本当はLTまで聞きたかったですし、15:15-16:00や16:10-16:55なんかは行きたいのが3つくらい被っていてハーマイオニーが逆転時計を使う気持ちが少しだけ分かりました…。

以降は各セミナーについての感想に移ります。

「いかにしてアウトプットするか」(講師:nasa9084 様)

今回重い腰を上げて久しぶりに記事を書く気になったのもこのセミナーのおかげです。
なかなか日常的にアウトプットできない(私のような)人に向けて「アウトプットの手段」や「アウトプットの継続の仕方」などを説いて頂きました。

エンジニアのアウトプットの手段として挙げられた例

ブログの更新、書籍を書く、セミナーでの登壇、git等でのソースコードの公開(その他質問への回答の中でイラストや漫画等も出ていました)

いかにして継続するか

・とにかく書く。内容にこだわりすぎない。初めは書けなくて当然なので「書く習慣作り」のつもりで始めてみる
・継続にあたり一番ネックになるのがモチベーションの維持→Googleアナリティクス等の解析ツールを使用し、数字で記事のインプレッション数等を確認しつつ継続していこうという内容
・とにかく人に見てもらうのがモチベーションの維持の面でも大事!→はてブが意外と見てもらえるのでおすすめ!
・エンジニアなら他にもmediumQiitaもいいよね
・意外と趣味のことなど技術系に限らず多岐に渡る内容をコンテンツとして扱うことで、流入が増えてそこから見てもらえるようになったり、人柄などの表現もできて良い
・とにかく書く。料理を続ける秘訣が「料理を続けること」であるように、続けることで調味料や器具が揃う(=環境が整ってより没頭しやすくなる)からとにかく始めてみて、続けることが大切

その他のアウトプットについて

・書籍としてまとめるのであればMarkdownから電子書籍化してくれるツール等があるのでオススメ
・登壇はノリと勢い!あらかじめ綿密に考えてから申し込むのではなく、先に申し込んじゃってから何を話すか考えると嫌でも登壇せざるを得なくなる、という追い込み方式
・最近は「技術書展」等の技術同人誌のイベントも増えているので、そういったところでのアウトプットから入るのもアリ
・ソースコードについてはエンジニアのアウトプットとしてはよくあるものではあるものの「結果」として残ったものであり「経緯」が伝わりにくいためそれだけポンとアウトプットするよりは何かしら文章で残した方が分かりやすい

【感想】

・「ブログ開設するだけ開設して3記事位書いて放置するとかあるあるじゃないですか」「そういうブログが更新しないまま4,5個あったりするじゃないですか」とか、とにかく終始耳が痛かったです。エンジニアあるあるすぎる。
・でもテーマが「アウトプット」なだけに、エンジニアに限らずどんな業種であれ共通するところだったのでデザイナーの私にも活かせるところが多いと思いました。
・とても親しみやすい話し方だったので変に構えずに最後まで気楽に聞けました。
・月2記事くらいは頑張って書きたい!って気持ちになれました(気持ちもね、大事ですからね)(これきっと継続できないやつ)

「WordPress 新エディタ Gutenberg でブログを書こう」(講師:田中 広将 様)

こちらを選んだ理由は、業務的にWordpressでサイトを構築する機会が多いものの、何故か私の身の回りでは嫌われている『Gutenberg』がテーマだったのでとても気になったからです。
(会社、個人限らず私の身の回りでは『Gutenberg』に親殺されたの?ってくらい『Gutenberg』嫌いな人とか『Classic Editor』(『Gutenberg』を無効化して旧エディタにするプラグイン)で消しちゃう人ばかりなので純粋に長所があるのか気になっていました)(それにしてもなんであんなに嫌われてるんですかね)

【感想】

・『Gutenberg』のコンテンツエディタめttttttttっちゃ便利じゃん。使わないの損。時間と機会の損失。そのレベルです。
・とにかくコンテンツを作りこむのに特化した非常に便利なエディタだということが分かりました。
・ここでもMarkdownが使えるそうです。私、つぎ覚えるのMarkdownって決めました。
・『Gutenberg』のコンテンツエディタ画面のカスタマイズ(カスタムで項目を追加するなど)も当然できるだろうと思いますが、そういうプラグインはあるのかな…?
→調べてみたところ、ありました。そりゃそうだ。これは絶対使えますね。https://blanche-toile.com/web/wordpress-block-lab
『WordPress Meetup』 という勉強会が開かれているという情報を知ることができたので、ぜひ参加しようと思いました。

「Webサーバ高速化テクニック」(講師:窪田 優 様)

こちらはちょっと難易度高めかも…と思いつつ興味があったので参加。
ところどころ記憶が抜けているところがありますが、メモを頼りに思い出せる範囲で。

jsの記述は前の最後に書く

・記述位置による読み込みが手前であろうと後ろであろうとHTMLレンダリングの特性上jsの実行は最後になるからだそうです。記述位置に関わらず実行が最後であるなら、先にCSS読み込んでから実行した方が負担軽減になるとのこと。

画像の通信トラフィックの削減

・画像フォーマットの見直しをする。写真等の使用されている色が一定ではない画像はjpgに、イラストやグラフなど使用されている色が一定の画像はpngで書き出す。
・最適化ツールを使う。jpgとpngはそもそも圧縮形式(圧縮されていない画像形式はビットマップ形式)なので下記のような画像圧縮ツールを使用することで画質は全く変わらないまま容量を削減可能。
[jpg]jpggoptim [png]OptiPNG

テキストファイルの通信の削減

jsやcssは文法を守っていれば改行やスペース不要なので、サーバーにアップロードする際はできるだけ空白や改行を含まない形式でアップする。こちらも下記ツール等を使用することで手間を省ける。

http://minifycode.com/html-minifier/https://cssminifier.com/

テキスト圧縮転送

gzip圧縮機能を使うと圧縮して転送→クライアント側で解凍できる?そうな

HTTP/2通信プロトコル高速化

・HTTP/1.1は6リクエスト以上処理できなかった(CSSを読み込む1リクでCSS内の画像読み込み分5リクを1リクにまとめたりしてたのが、現在も名残として残っているそうな…)
・HTTP2化にはSSL化必須(無料のSSL証明書もある)

【感想】

・サーバーに詳しくないので後半私にはちんぷんかんぷんな話も多かったですが、前半解説されていた内容は概ね理解できたので、理解できた範囲から取り入れたいなと。
・当日お話されていた内容の詳細は「ボトルネックがすぐわかる 現場のための Webサーバ高速化教本」に書かれているそうなので、機会があれば読んでみたい。

「ソレダメ!~これまで出会った改善が必要なCSS~」(講師:長谷川 広武 様)

言わずと知れたSaCSS主催、長谷川宏武さんのCSSについてのありがたいお話でした。実業務に密接に関わっているところであるため、終始にやにやしながら頷いて聞いていました。

「!important」を多用している

・なぜ「!important」を使ってはいけないかというと、詳細度をすっとばして優先順位が最強になってしまうから。他の箇所で反映したCSSが効かない原因を生んでしまうため。
・改善方法としては、「!important」はなるべく使わない。
(当たり前ですね。当たり前だと分かっていても使わざるを得ないこともあるんですけどね。)
・指標として「後から他の人が見て理解できるか」を意識してCSSを書こうというお話をされていました。(これも当たり前ですね。当たり前だと分かっていてもやらない人がいるんですよね…。)(これついこの間までの自分へのブーメランじゃないかな…。)

適切な設計ができていない

・同じパーツの色違いなど、同じ体裁を保ちつつ部分的に異なったデザインを管理する場合、パーツがコンポーネントとして正しく設計されていないと混乱を生みやすくなってしまう
・コンポーネントを意識しよう
・解決策としては、CSSベタ打ちではなくSass(SCSS)で書くことでパーツ単位での 管理がしやすくなる
(会場では、Mixinや @import など具体的なSassの記述の仕方を用いて、どういった書き方ができるか、同じ使い方にしても複数の書き方があることなどを説明されていました。)

【感想】

・SCSSのバージョン管理の失敗例として実案件を用いて説明されていたのがとても分かりやすかったです。
(ざっくり説明すると、SCSSファイルを人名毎に管理しているクライアントさんから「CSSが反映されない」といった問い合わせを受けたという例でした。その話を聞きながら笑いつつも心底「笑えないな」と思いました。)
・コンポーネント設計が甘い時があり、たまに「! important」に頼ってしまうことがあるため、本気で卒業しようと思いました。
・コードを書いている人ならピンとくる「あるある」等ふんだんに用いられていて、面白くわかりやすいお話でした。

「SVGを活用したビジュアルなWebページ作成入門」(講師:前田 和昭 様)

中部大学で教鞭を執っている前田教授のSVGについてのセミナーでした。
幅広い知識をお持ちで、当日は予定していたスライド外の様々な内容に触れられていたため、参加したセミナーの中で一番まとめるのが難しいです…。(行った人なら分かるはず)
私の技量ではうまく流れをまとめられないため、個人的な感想のみ記載します。

【感想】

・お話の移り変わりが早く、私にはところどころついていけないところもありました。でも面白かったです!「好きこそものの」ではないですが、愛が伝わってくるセミナーでした。
・SVGを普段手打ちで対応されているとのこと。〇万行のコードを見て感嘆が漏れました。すっごい。
・学術誌に掲載したというSVGアニメーションで作成された時計の実例を見せて頂きました。 SVGアニメーションで時計も作れちゃうんですね。 線の数を間違えてしまい1分間が72秒の時計になってしまったお茶目なエピソードも素敵でした。

OSCに参加してみて

・コミュ障でも、楽しかったです。「オープンソースの祭典」に偽りはないと思います。何より質の高いセミナーに無料で参加できるので、「熱心に勉強しよう!」といったような高い意識がなくても、「暇だから話聞いてみるかー」みたいなノリで参加して楽しめると思います。大事なことなので何度でも書きますが、本当に無料です。まったく興味がないなら別ですが、少しでも興味がある分野のセミナーがあるのであれば、聞いてみて損することはありません。
・技術的知識を持ち帰れたこと以上に、普段話を聞く機会がないようなすごい方(つよつよエンジニアさん達)のお話を聞くことにも私は意味を感じました。というのも、社内というメンバーが固定された組織の中では交換できる情報に限度があります。いくらコミュニケーションを深めたところで、持ちうる知識しか交換できないことを考えると、こういった場に積極的に参加し「新しい情報を現場に持ち帰る」ことが必要だと思いました。
・OSCに限らず、勉強会などに参加したのち、学んだことを社内に持ち帰り実際に検討する機会が欲しいなーと思いました。少なくとも私はそういったメンバーと肩を並べて仕事をしたいと思いますし、同じ勉強会に参加して意見交換を盛んに行えるチーム体制が制作の質の向上の上でも理想だと考えています。
・本記事をまとめるにあたり写真やメモが足りず、ところどころ記憶頼りになってしまったのが少し心残りです。次に活かしたいです。