inFablic | Fablic, inc. Developer's Blog.

フリマアプリ フリル (FRIL) を運営する Fablic の公式開発者ブログです。Fablic のデザイナー・エンジニア・ディレクターが情報発信していきます。

社内HTML勉強会をひらきました

|,,╹﹏╹,,) はろー。サーバサイドエンジニアの @pompopo です。

昨日、社内でHTML+CSSの入門レベルの勉強会を行いました。

Fablic Advent Calendar 2017 - Qiita

これはFablic Advent Calendar 13日目の記事ですな。

なぜやったか

ぼくはFRILのWEB版を主に担当しておりデザイナと協業して働くことが多いのですが、HTML+CSSの書き方についてイマイチ自信がないという声を以前から聞いていました。また、HTML経験の少ないデザイナが増えたり、デザイナ以外のディレクターや社長などの職種の人もHTMLを書いてみたいという声があったので開催してみました。

事前調査

勉強会に先立って、どういう知識が社内で求められているのかや現状を把握するためにアンケートを行いました。 質問内容としては、HTMLやCSSについてどれだけ自信があるかというフワッとした質問や、使っているエディタなどです。

エディタについては、やはりAtomユーザが多く半数を占めていましたが、ショートカットやプラグイン等はあまり使いこなせてないようでした。ガラケー時代から使っているというのは福井県鯖江市産の秀丸ユーザですね。 f:id:infablic:20171212121859p:plain （Googleフォーム力（ちから）が低くて円グラフしか表示できませんでした。）

また、自由入力欄でどういうことを知りたいかについて聞いた結果、大体以下のような不安があるようでした。

  • そもそもHTML、CSSが何なのか分からない。
  • Railsアプリケーションでの書き方
  • SEO対策のための書き方
  • class名の付け方
  • ワードプレスが辛い
  • TOEICの点数が低い

そこで、いくつかのテーマに沿って何回か講習会を行うようにしました。

  • 超初心者向けHTML+CSS入門
  • CSS中級編
  • Railsでの書き方

社内での勉強会についての要望は強く、以下のような結果が得られました。

f:id:infablic:20171212150149p:plain

今回実施したのは１回目の初心者向け入門です。

なにをやったのか

HTMLとCSSについての基本についての座学(30分)、GitHub Pageを利用してのホームページ作成(30分)という構成で行いました。いちおうスライドは作ったのですが口頭での説明が主なのでスライドは省略します。

f:id:infablic:20171212135303p:plain (Googleスライドで一番かっこいいと思われるテーマ)

座学

  • HTMLの基礎
    • ただのtxtファイルやWordのdocファイルと何が違うのかといった基本的な内容
    • HTML文書の構造についての説明
    • 代表的なHTMLタグの紹介（navタグやfooterタグなどを知らない人が多い印象でした）
  • CSSの基礎
  • 情報源
    • 分からないことを場当たり的にググって調べると、古かったり間違っている情報ばかり覚えてしまうので気をつけましょうという話をしました
    • 具体的には MDN ウェブドキュメント を見る。MDN読んでもよく分からなくて他のサイトの情報を参考にするにしても、まず最初はMDNを確認するように、という話をしました。MDNには詳しい説明やブラウザの対応状況も載っているので大変便利です。

developers-jp.googleblog.com

実習

GitHub Pageを使って、各参加者にそれぞれのホームページを作ってもらいました。といっても時間がないので、リポジトリを作成して数行のHTMLを書いてpushするだけです。更新のフローだけ教えて後はポエムサイトなり、黒背景に赤文字のサイトなり、思い思いのものを作ってくれよな、ということです。

どうしてわざわざホームページを作ってもらうのかというと、現在のFRIL Webには、Bootstrapが導入されていたり、Rails特有の書き方など純粋にHTMLを覚えるには不要でかつ難しい要素が多いので、何もない空白の状態から書いていったほうが学習に向いていると思ったからです。

デザイナ陣は普段からGitHubを使ってコーディングを行っているのでスムーズにいったのですが、普段GitHubを使っていない参加者へのフォローが足りなくてバタバタしてしまったのが反省点です。

Gitの操作にはGitHub Desktopを使ってもらいました。社内のデザイナによく使われています。

desktop.github.com

まとめ

今回行ったHTML勉強会は、内容はごく初歩的なもので、すごく知見が得られるというものではないのですが、以下の点で開催して良かったと思います。

  • 勉強会に先立つアンケート
    • 社内にある漠然とした不安や関心などを明らかにできた
    • 最初はデザイナが対象のつもりだったが、他の職種の人にも興味が有ることが分かった
  • 勉強会
    • 絶対知っておいてほしい基礎と、どうやって情報を調べたらいいのかの共有ができた。（古い情報が社内で共有されている場面が散見されていたので改善に繋がると思われる）
    • エディタの使い方など、普段のコードレビューでは気づけない問題を見つけられた。（Atomの Command + P を知らずに毎回ファイル一覧からファイルを探している等）
    • 質問コーナーでは普段から疑問に思っていることを聞けた

今回はスライドも簡素でフランクな勉強会でしたが、複数の職種の人が参加する勉強会を社内で行うことで、社内の業務効率改善や課題の発見、社内交流など様々なメリットが得られると思いました。

特にHTMLまわりはエンジニアとデザイナ、時にはディレクターもさわるエリアなので、ここをキッカケに社内のコミュニケーションを促進して、よりよいチームワークを発揮できるようになれば良いなぁと思います。

|,,˘﹏˘,,) おわり