CSS Nite LP64「Coder's High 2019」

こちらは、CSS Nite LP64のフォローアップページです。

公開ポリシー

このページは、本イベントの参加者（およびフォローアップ参加者）限定のコンテンツです。 ただし、90日を目安に一般公開する予定です。

ウェブデザイン・サイト制作におけるプロジェクト・タスク管理ワークフロー
／阿部 文人（necco）、今 聖菜（necco）

セッション1を担当しましたneccoの阿部と今（こん）です。
デモがきちんとできずに本当にすみませんでした。キャプチャや動画などを用意しておくべきでした。デモがお見せできず全体でどういうフローで業務を行ってるか見えづらい部分もあったかと思いますが、今回のセッションではneccoのワークフローを通して何か一つでもみなさんのプロジェクトやタスク管理の改善につながればと思ってのセッションでした。
GTDの考え方や投稿先のチャンネルの整理、フォルダの整理などもメンバーの業務の中で繰り返し利用するものかなと思います。
すべてを取り入れることも不可能だと思いますし、お金がかかるツールの導入がそもそも難しいなどもあるかもしれませんが、
みなさんの改善のキッカケになれば嬉しいです。

質問

Q. 阿部さんにお聞きしたいのですが、海外のトレンドは知るためにどのようなことをされているのでしょうか？情報収集をされているのであれば、情報源も教えていただきたいです。

TwitterやFacebookなどがメインです。詳しい人をフォローして気になるワードが出てきたら深堀りすることが多いです。あとはCSS Niteや各種カンファレンスイベントはよく参加しています。例えば最近ではheadless CMSの海外の状況は英語で検索したり、Youtubeで検索して動画みたりしました。

Q. #1のセッションでGitlabでデプロイした際にどこにアップロードされるのかもう一度教えてください！（なんとかプリファイと聞こえましたが…）

Netlifyという静的ファイルのホスティングサービスです。
デモではNuxt.jsをつかっていて、GitlabにPushしてプルリクをMasterBranchにマージするとCIが走って、Netlifyにデプロイされます。厳密にいうとローカルでNuxt generateして静的ファイルは作成せず、Netlifyでビルドコマンドを設定しておくとNetlifyが自動でNuxt generateしてくれてルートディレクトリに静的ファイルが展開されます。Kiteさんのセッションでもこの話はでてきていたので参考にしてもらえればと思います。

https://www.netlify.com/

Q. CaTの東京開催はないですか？

CaT東京開催、実は考えております。日程は未定ですが来年のどこかで行いたいと思います。そのときはぜひご参加ください。

Q.タスクの粒度はどんなルールなんだろう？

粒度は1日内では終わるようにしてます。例えばトップページデザインなどは1日で終わらないので、トップページメインビジュアル作成などにしたりします。大きすぎるタスクの場合は親にしてサブタスクを使う方法もあると思いますが、ボード表示ではタスクがすぐ見えなくなってしまうのでneccoではあまり利用していません。

Q.どんなに細かいことでもタスク化していますか？？slackの通知の量がえらいことになりませんか？

通知量はなるべく絞るように工夫してます。例えばAsanaではタスク追加時と完了時のみ通知するなど。
細かいタスクはtimes-abeなどのチャンネルをSlackにつくり、Asanaにもtimes-abeなどの個人用のようなプロジェクトをつくり連携して細かいタスクは処理してます。細かいタスクはいれるのが面倒ですが、タスクは入れると忘れることができるのがメリットだと思います。脳のスペースや心配を忘れるようなイメージです。GTDもその考え方が書かれていたりします。

Q.誰が責任を持ってタスクを追加するのか、最初に決めているのですか？Slackからの手動追加だと、タスク追加の重複やタスク追加漏れがありそう。

基本的にはメンバーが手動でおこなってますが、大きな案件が走るときなどはディレクターの私がいれて優先度を上下で入れ替えて、上からタスクを進行してもらうようにしてます。Slackからだけだとすぐ流れてしまうので基本的にはAsanaをボード表示してプロジェクトごとにタスクを管理しています。重複タスクは発生するときもあるので発見したらすぐに削除したりもします。

Q.開催趣旨から外れるかもしれないが、ツールの採用やワークフロー改善案を社内で通す秘訣を知りたい。弊社ではビジネスチャットの導入すらできない。

現在は代表をしていますので、メンバーと相談しつつプロジェクト単位での導入を行って、全プロジェクトに適用する流れをとっています。
前職、前前職では、費用、導入メリット、導入方法などを資料でまとめて上長などに提案したり、小さな案件に導入してもらい、使いたいと声を上げてくれる、仲間を増やしたりしています。

Q.Asanaを導入するまでにどのような意思決定があったのかお伺いしたいです

下記のツイートにも記載しましたが、私のタスク管理は多くの変遷と挫折の連続でした。
紙からはじまり、RedmineやBacklogも試したりしましたがどうしても合いませんでした。
またデザインとエンジニアリングをどちらもやりますし、チームメンバーもデザイナー、エンジニア、ライターのメンバーがいるため一つの職種のみが使いやすい、受託案件に合いそうにないものは継続して利用できていませんでした。

Asanaはタスクを4つの表示方法で切り替えができることと、プロジェクトをすぐまたいで表示できる、自分のタスクをプロジェクトをまたいで表示できる。などの機能があり、いままで利用していたものはそれができたものがありませんでした。
特にneccoではボード表示や、カレンダー表示が多用されています。
https://twitter.com/abefumito/status/1185442687769444352?s=20

Q.全体最適化の部分を具体的に知りたい

誰か一人のタスク管理がうまくいく、誰か一人が使いやすい、誰か一人が大きな声を上げたから導入しない。などは全てneccoでは採用せず、プロジェクトがうまく行くようになるか？チーム全体としてはスピードがあがる、効率化につながるか？最後にはお客さまのためになるか？などの本来の目的のためにワークフローだけでなく全体最適化を図ってます。

Q.「全員でデザイン」とおっしゃっていましたが、エンジニアさんもデザインするのでしょうか

エンジニアも参考サイトを用意してFigmaにはったり、画像を書き出したり、テキストを修正したり、デザイナーがどうしても時間がとれないときなど部分的にFigmaでデザインを提案してもらったりしてます。その際もFigmaの同時編集機能はともて便利で、neccoでも利用しています。

Q.CIツールは何を使っていますか？’

現在はGitlabのCIを利用しています。プロジェクトによってはCircle CIなども利用しています。

Q.新人教育はしてますでしょうか？もししていたら、使うツールやカリキュラム、フローを教えてください。

入社した際に利用するツールや、拡張機能などは一式esaにまとめていて、それを見てもらってます。
necco独自のワークフローに対しての教育などのカリキュラムは用意してません。
ただデザイナーやエンジニアには#info-design-studyや#info-dev-studyなどの情報共有Slackチャンネルを用意しているので、入社時に時間が空いてしまったりする場合をそのSlackチャンネルを読み進めてもらってりしています。

Q.XDやSketchは使わないのですか？ Figmaにしている理由を知りたいです。

Figma導入前はSketch + Zepline（プロトタイプ&Spec） + Abstract（バージョン管理）を利用していました。ずっと考えていたこともありますが、どうしてもデザイナーだけファイル管理に追われていることが納得ができず一度上記のエンジニア的な管理で落ち着きましたが動作が不安定で遅く大きな不満がありました。

Figmaに変えたことで全員同時にデザインができすぐにプロトタイプをエンジニアに共有ができます。また同時編集ができオンライン上でデザインしている状態のためデザインファイルのやりとり、バージョン管理などから開放されました。

XDに同時編集機能が来る日も近いそうなのでその時はIllustratorやPhotoshopなどとの連携も考えてXDをメインのウェブデザインツールにするかもしれません。

Q.ツールの使い方などはどうやっておぼえるんでしょうか。

Asanaであれば公式サイトの動画などがあるので見たりしてます。あとは利用方法などで検索してメンバーの情報共有しつつ、日々使い方を改善しています。

Q.なぜGTDの考え方を採用したのでしょうか？

10年前になるのですが。。。タスク管理が不得意でかつストレスすぎていろいろ探した結果GTDに行き着きました。

Q.他のワークフローの考え方も検討されたりしましたか？

現在のワークフローはずっと改善を続けてきたものではありますが、ずっと他の良いやり方は模索しています。
自動化関連は常に考えてます。ZapierやIFTTTなどのレシピみたりするとこんな自動化できるのか！など参考になります。

Q.デプロイがGitでできない案件等はどうされてますか？（そもそもそういう案件はやらない？？）

テストサイトは弊社で用意してGit管理、自動デプロイしていますが、本番環境へのアップロードがSFTPなどの案件がいくつかあります。先方のサーバ環境の問題や移行ができない場合です。
新規の案件では基本は受けないか、サーバの変更、導入してもらうなどを提案したりしてます。非効率で、人的ミスも多く、確認の工数もかかってしまうためその分費用をいただくことになってしまうためです。

Q.日報はあのあとどうやってどこにまとまるのでしょう？

デモができずすみませんでした。Slackに指定したチャンネルに自動投稿されます。neccoでは日報と週報でそれぞれ違う質問をつくって、#necco-daily-reportと#necco-weekly-reportのチャンネルにそれぞれ投稿されます。

下記に質問などはまとめましたので参考にしてください。
https://twitter.com/abefumito/status/1185425224285618178?s=20

Q.ツールが多いと新人が覚えるのが大変そうですね。教育とかに結構時間かけてる感じでしょうか？

使いやすいツールが多いのでいままで大変なことはなくあまり時間をかけずにスムーズに導入できてます。デザインやウェブ制作を行うメンバーのみということもあるかもしれません。上記でも触れていますが、ディレクションを行う私がデザインとエンジニアリングをどちらも行うため、どちらの職種にも適合しそうなものを採用していることもあると思います。

Q.CaTのネコをつくった方はどなたでしょうか？

一緒に登壇した今（こん）が制作しました。イベントのコンセプトを考えて、雪見大福のような鏡餅のような猫に仕上がってます。
よかったら下記ページ見てもらえればと思います。私も可愛くて大好きです。

CaT史上最大規模！初のエンジニア回となる「CaT vol.7 真夏のVue.js祭り」を開催しました！
https://necco.co/necco-note/2019/08/3041

【随時更新！】箱猫カレンダーを作りたい！necco主催イベントCaTのキャラクター『箱猫』グラフィックまとめ。
https://necco.co/necco-note/2019/03/1879

Q.現在決まった案件を、１〜２ヶ月後に走らせることが決まったとき、いつタスク管理ツールに入れるのが良いですか？（忘れないようにすぐ入れると、ずっと入れっぱなしになりそう…）

案件が決まって、お客さまとの会話が始まった時に下記を同時に作成してまず立ち上げます。
・Slackの新規案件チャンネル dev-[案件名]
・Asanaのプロジェクト
・スプレッドシートでテンプレート化しているもの（案件概要、会社概要、戦略、ブランドコンセプト）
などです。場合によってはお客さまのSlackチームを作成したり、Sharedチャンネルを立ち上げます。
そのあとに具体的なタスクはAsanaに入れたりしてます。ウェブサイト実装で必ず必要になるタスクなどは
Asanaテンプレートなどにまとめてますので必要な時にそれを入れたりしてスタックするのを避けるようにしてます。

Q.ワークフローの決定は誰が行いますか。反対意見はどう説得しますか。

最終決定は私が行っています。お客さまにも同じやり方などはメリットがありそうであればご提案したりしてます。
社内での反対意見はきちんとメリット、デメリット双方確認しつつ、全体最適できるものは話し合いつつ決定します。
前述の質問でも触れていますが、導入するメリット、費用、効果、デメリット、導入コストなどを資料でまとめて提案する、小さいプロジェクトでまず一回だけ導入してみる、使いたいと思ってもらえる仲間を増やす。などの対策で打開できることも多いと思います。

Q.タスクは子タスクで分割しますか？別タスクでたてますか？

別タスクでたてるようにしてます。サブタスクもいいのですが、粒度の問題やボードで見えなくなる問題が解消できないためです。

Q.あそこの仕様どうなったんだっけ？みたいなとき探しやすくする仕組みはありますか？

esaでプロジェクト別に開発環境やログイン情報、仕様などは整理してますのですぐ探せるようにしてます。
project/案件名/サーバー環境 などで階層を作ってます。

お客さまからご提供いただいたものはDrop Boxで先方提供資料に格納したりしています。
フォルダ構造はこちらも参考にしてください。
https://twitter.com/abefumito/status/1185425224285618178?s=20

Q.新ツール導入時に、メンバーとどのような相談をするのか？

継続して気持ちよく利用できそうか？今までかかっていた時間は削減できそうか？動作がはやいか？などは各ツールに共通して、相談します。あとはそれぞれのツールの具体的なメリット、デメリットを相談します。

セッション内で紹介したもの

GTDやタスク管理については下記の本がおすすめです。
- ストレスフリーの仕事術

紹介したツールのまとめ

下記にツール一式と利用費をまとめたシートを作成しました。複製などしてご利用ください。年額払いにすると経理コストも下がるのでおすすめです。掲載費用は月額払いを掲載しています。
https://docs.google.com/spreadsheets/d/1_dsQqtWsOVImjlAUm1OEQI9clHsSJLX35ACiFLkQ758/edit?usp=sharing

最後に

ツールなどはさまざまなプロジェクト、チームで使うものを変えていく必要があると思いますが、GTDのような考え方や自動で通知する、進行状況を確認するなどの効率化はツールが変わっても必要になってきます。
プロジェクトの関係者やチームの人数が多くなればそれだけ少しの改善が大きな効果を生み出します。

ぜひ、みなさんそれぞれのやり方で大きな効果を生み出していただければと思います。

SNSでも積極的に情報発信してます。フォローなどしていただければ嬉しいです！
ご参加ありがとうございました！

阿部
- Twitter：@abefumito

今
- Twitter：@KonSeina

ダウンロード

ウェブ開発のいまと、コーディングしない制作手法／阿部 正幸（モチヤ）

CSS Nite LP64 Coder's Highに参加の皆さま、長時間のセミナーお疲れ様でした。
第2セッションの「ウェブ開発のいまと、コーディングしない制作手法」に登壇させていただきました、モチヤの阿部と申します。

今回のセッションではコーディングしない制作手法の話をさせていただきました。
弊社の場合ですとDrupal（CMS）を使っておりますが、これはWordPressでも、
concrete5でもどのCMSでも同じ作り方が可能です。

コーディングしない制作手法は、世界では一般的な流れですので、ぜひ一度お試しいただければと思います。

Q&A

セッションを終えまして皆さまからご質問いただきました内容です。

質問1

Q.「工数が大幅に削減できる」とありますが、デメリットのときに「フロントエンドの開発工数があまり変わらない」と仰ってました。実際どの部分の工数が減らせるのでしょうか？

A. 説明が分かりにくくて申し訳ございません。
フロントエンド（HTML、CSS）の組み込みの工数は結果あまり代わりまんが、CMSの組み込み工数やテスト工数は、大幅に削減できます。
理由はあらかじめ作っておいたHTML構造に合わせてCMS側で、無駄なコードを書かなくて良いから。CMS本来のカスタマイズがし易くなるためです。

質問2

Q. パフォーマンスバジェットの担保が難しそうだけど、そうでもないのかな？CMSに丸っとやってもらう感じになりそう

A. CMS独自のキャッシュ構造を使うので、ある程度のレスポンスは担保できます。
サーバーサイドに関しては、CDNを入れたり、Varnish、OPcache、スケールアップ、アウトで対応しております。
サーバーサイドのキャッシュ機構、Webサーバー、CDN、等々ある程度決まったものを会社として使っています。

質問3

Q. この制作手法は案件規模はどの程度まで対応できますか？

A. 50ページくらいのサイトから、誰もが知っているような会社の大規模サイトまでをこの手法で行なっております。
あまりにもページ数が少ない場合は、静的で構築した方が効率は良いかと思います。

質問4

Q. バックエンドの脆弱性がCMSに依存すると思うのですが、致命的な脆弱性が発見された際の初期対処はどうされてますか？

A. クライアントが大きいと、パッチが出てから適用までにスケジュール調整や、パッチの検証などすぐに実施することができません。
セキュリティ担保のために、WWWからオリジン（CMS）にアクセス出来ないようにシステム設計をしています。
セキュリティパッチが出てからDevで検証し、Stgにアップし、Prod（本番）に適用を行なっております。

セッション内で紹介したもの

CMS

CMSローカル環境

CMS スターターテンプレート

その他

さいごに

参加いただきました皆さまありがとうございました。
また皆さまにお会いできることを楽しみにしております。下記は私のソーシャルアカウントです。
お気軽にフォローください。

ダウンロード

ジンドゥークリエイター カスタマイズ自由自在／神森 勉（KDDIウェブコミュニケーションズ）

参加いただいたみなさま

セッション3を担当しました神森です。お昼からの長丁場でしたが、大変お疲れさまでした。

ジンドゥーはこの春、ジンドゥーAIビルダーというプロダクトがリリースされ、これまでジンドゥーと言われていたプロダクトがジンドゥークリエイターという名前に変わりました。ジンドゥーAIビルダーは、コーディングを一切することなく、簡単な質問に答えるだけで最適なデザインと併せてウェブサイトが制作できるプロダクトです。
かたやジンドゥークリエイターは、これまでの使い方は変わらず、カスタマイズ可能なプロダクトとして引き続き提供しています。
ウェブサイトビルダーは、テンプレートによる制作がベースとなっているので、どうしても他のサイトと似たようなデザインになってしまうと言うことで、敬遠されるかたもいますが、実際にはHTML/CSSで生成されているので、サービスによって違いはありますが、テンプレートのカスタマイズは十分可能です。

マークアップエンジニアを経験した身としては、あまり予算が割けないような小規模な案件では、ゴリゴリとコーディングをするとどうしてもコストに見合わないという理由で敬遠されてしまいますが、ジンドゥークリエイターのようなウェブサイトビルダーでは、コンテンツのHTML部分はサービス側で自動で生成してくれるため、見た目部分のカスタマイズのみを行うことで、低予算でも制作が可能になると思っています。
また、それにより納品、入金までのサイクルを短くすることで、キャッシュフローも良くなり、事業運営もが回りやすくなると思っています。
ジンドゥークリエイターは、無料版でもレイアウトのカスタマイズが可能なので、ぜひ一度試してみてもらえるとうれしいです。また、サイトを制作する際にアカウント登録が必要になりますが、一つのアカウントでいくつでもサイトを作ることができますので、複数のサイトの管理も可能ですので、小規模案件に活用してみてください。

ありがとうございました。

カスタマイズ関連書籍

URLなど

ダウンロード

デザイナーとコーダーをつなぐ、Adobe XDを用いたモダンなウェブ制作／鹿野 壮（ICS）、松下 絵梨（ツキアカリ）

2019年10月19日開催のCSS Nite LP64で「デザイナーとコーダーをつなぐ、Adobe XDを用いたモダンなウェブ制作」セッションを担当した松下・鹿野です。今回はご参加ありがとうございました！

アンケートでは「XDの便利な使い方を知れてよかった」「ダークモード対応について初めて知った」「デザインとコーディングの連携部分を知れてよかった」などの声をいただき嬉しく思います。

デザイナー、コーダーを始め、チームのメンバーは、「エンドユーザーに良いコンテンツを届ける」という同じ目標に向かって歩む仲間です。ぞれぞれの長所を活かし、短所をカバーしあって、よりハッピーな制作をしましょう。

フォローアップでは、発表での補足とお寄せいただいた質問をいくつかピックアップして回答します。

アンケートでいただいたご意見、ご質問について

XDでのデザインで、Photoshopから移行する際にやりきれないなどありますか

色調補正、高度なマスク、レイヤースタイルなどはXDにはありませんので、それらが必要な時は、Photoshopで作業してからXDに素材を持ってくる、というようなワークフローになります。
参考）
Photoshop ファイルを XD で開くときにサポートされる機能
https://helpx.adobe.com/jp/xd/kb/open-photoshop-files-in-xd.html

PhotoshopやIllustratorとの連携
https://helpx.adobe.com/jp/xd/help/working-with-external-assets.html

XDで表現できないアニメーションは、どうフロントエンドエンジニアに伝えているか教えてほしい

XDでは表現できないイージングは、下記のようなサイトを使って伝えています。

Easing Functions Cheat Sheet
https://easings.net/

タイムラインが必要なような複雑なアニメーションの場合は、After EffectsやAnimateを使った方が良いかもしれません。

XDでのコメントはどのような記法ですか？マークダウン？

残念ながらマークダウンは使えず単なるプレーンテキストです。
画像の添付もできないので、「スクリーンショットを貼りたい！」という時などは別途Dropboxなどに画像をUPしてそのURLを貼る、というような運用になります。

XDの書き出しは、どのようにされていますか？

基本はXDから書き出しますが、XDはビットマップ画像の扱いにあまり特化していないので、配置する前にPhotoshopで色調補正やレタッチを行うことが多いです。その場合、Photoshopから書き出したPNG（XDに配置する前のPNG）をそのままコーディングに使うこともあります。

デザイン素材の書き出し
https://helpx.adobe.com/jp/xd/help/export-design-assets.html

また、XDからSVGを書き出すという事については、松田直樹さん（まぼろし）のセッションが参考になりますので、ぜひアーカイブ動画をご覧ください。
「#XDUFes2019」東京編（松田さんのお話は2:55:00あたりから）
https://blogs.adobe.com/japan/cc-ccdojo-adobe-xd-user-fes-2019/

XDでカンプを渡す際、カンプに取り入れる画像は別にわたす感じでしょうか？

background-size:cover;などで背景画像として扱う場合は、おっしゃる通り、XDに配置する前の、上下左右がマスクされていない状態の画像が必要になるので、別で渡します。

XDのおすすめプラグインはありますか？

おすすめのプラグインやTIPSは、下記にまとめています。
Adobe XD Tips
https://twitter.com/i/moments/1107995267297468418

CSS GridのIE11対応方法は？

CSS GridはIE11では使えないと思われがちですが、いくつかの手順を踏めばIE11でも動作させることが可能です。昨年のCSS Niteにて詳しく解説しましたので、参照くださいませ。

CSS Nite LP58フォローアップ（8）鹿野 壮 | CSS Nite公式サイト
https://cssnite.jp/archives/post_3023.html

昨年発表した内容からの更新情報としては、AutoprefixerによるIE11向けの自動変換対応（一部）です。たとえば、2行4列の行列を作り、左上から子要素を順番に並べるには次のようにCSSを記述します。

/* autoprefixer grid: autoplace */.container {grid-template-rows: repeat(2, 1fr);grid-template-columns: repeat(4, 1fr);}

これをAutoprefixerで変換すると、IE11でも自動配置されるコードが出力されます。詳しくは次のドキュメントを参照ください。

https://github.com/postcss/autoprefixer/blob/master/README.md#grid-autoplacement-support-in-ie

CSS変数の対応ブラウザは？

CSS変数（英語ではCSS Variables）は、IE11を除く全モダンブラウザで使用可能です。

https://caniuse.com/#feat=css-variables

CSS変数を用いたコードを、IE11向けに変換するためのツールもいくつかあります。

prefers-color-scheme の対応ブラウザは？

今回のセッションで、ユーザーがダークモードを設定していることを検知するメディアクエリ prefers-color-scheme を紹介しました。prefers-color-scheme は、IE11を除く全モダンブラウザで使用可能です。

https://caniuse.com/#feat=prefers-color-scheme

IE11についてはダークモード設定をブラウザ側で検知する手段はありませんので、IE11でのダークモード対応は諦めたほうが無難でしょう。

ちなみに、弊社のオウンドメディア ICS MEDIAではCSS変数とprefers-color-schemeを用いたダークモード対応を行っていますが、IE11でも最低限の見栄えが担保されるようにしています（プログレッシブ・エンハンスメントの考え方）。

さいごに

松下・鹿野は、次のような媒体でも情報を発信しています。ぜひご覧くださいませ。

松下
- Twitter
- Facebook

鹿野
- ICS MEDIA
- Qiita
- Twitter

Facebookに申請してくださる時は、「Coder's Highでお会いした」など、一言メッセージをそえていただけると助かります。

ダウンロード

これだけは押さえておきたい Vue.js の基礎知識／長谷川 広武（HAMWORKS）

セッション5を担当しましたハム（長谷川）です。

Vue.js の基礎の一部のみで、最低限覚えたほうがよい部分に絞ってお話をさせていただきました。基礎でもまだまだ学ぶことは多くありますので、ぜひ公式サイトのガイドページを読んで、実際にコードを試してみてください。

基礎をすすめていくと、コンポーネントごとに .vue ファイルを作成し、ビルドツールを利用して使う方法などもでてきます。しかし、基礎を学ぶ段階の人であれば最初はそこまでの使い方をする必要は有りません。基礎を学んでいる段階の人は、まずは Vue.js ファイルをHTMLで指定し、使いたい範囲も限定しての練習から始めてみてください。

セッションの最後で紹介したデモは、同じものではないですが、WordPressのRestAPIで取得したデータを一覧表示する例を容易してみました。こちらも参考に、まずはチャレンジしましょう！

▼ デモのサンプル（猫版ではなく、簡易に容易してみました）

データを取得してリスト表示する簡易サンプル
https://codepen.io/h2ham/pen/pooNGLV

▼ その他参考リンクピックアップ

Vue.js https://vuejs.org/
Vue.js（日本語） https://ja.vuejs.org/

単一ファイルコンポーネント
https://jp.vuejs.org/v2/guide/single-file-components.html

たにぐち まことのプログラミング学習応援チャンネル 「Vue.js 入門」
https://www.youtube.com/playlist?list=PLh6V6_7fbbo-SZYHHBVFstU2tp0dDZMAW

質問

Q. Vue.jsの入門書で一通り勉強してVue.jsの内容はできたけれど、実案件のどこで使えるのかが分かりません。どうすれば応用できるようになるのでしょうか？

実案件での利用は無理に使う必要はないのですが、中村さんやカイトさんがお話されているJAMstack利用で、HTML側のテンプレートとして利用をしたりなども活用できると思います。 他にも紹介をしているAjaxでのデータ取得での表示部分やコンポーネントとして登録しておくことで、タブ機能やカルーセル部分としても活用ができます。jQueryのプラグインでも十分ですが、Vue.jsで置き換えて利用することもできます。コンポーネントとしての導入時のコストは少し高めですが、あらかじめよく使うパーツの用意として試してみるのはいかがでしょうか。

Q. ReactではなくVueを選んでいる理由を教えてください。

Reactを使っていないわけではなく、これまでjQueryしか使ったことがないような人が、次のステップとして利用する前提でいうと、Reactよりも導入の敷居が低いと考えているため、そのような場合はVue.jsをおすすめしています。Reactを使うためには、Reactファイルだけでも使うことはできるのですが、JavaScriptのコードが複雑になってしまいます。シンプルで使うために導入するツールがVue.jsと比較すると多くなってしまうので、その分覚えることも多めになってしまうと考えています。 そういう意味でも、シンプルに次のステップで試してみるとしたらVue.jsがおすすめと考えています。 Reactの環境用意ができるような人であれば、Vue.jsでもReactでもどちらを採用しても良いとも考えています。

Q. 実際に現場で使用する場合、今回の内容だけで使用するのはアリですか？

ありです！確かにSSRなどで単一コンポーネントファイル（.vue）を用意してビルドしてつかうほうが、より多機能を作る場合は必要になります。ウェブアプリなどではそのような使い方が必要になりますが、アプリではないウェブサイトでは、Vue.jsファイルをscript要素で指定して使う程度の利用するほうがちょうどよいのではないかとおもいます。
ちょっとした利用箇所、例えば記事の追加読み込みの機能や、記事一覧のフィルタリングはjQueryを使うよりも楽にHTML側も機能側も作れますので、ちょっとしたところからの利用でもアリです。

Q. Vue.js はSEO的にはどうなのでしょう？

正確な知見をもっているわけではないのですが、シングルページアプリケーション（SPA）を作る場合は要検討ポイントかもしれません。部分的にちょっとだけ使うような場合であれば、SEOに重要なポイントではない部分で活用するようなところだと考えています。
あくまで現時点での個人的な感想ですが、Googleのクローラーの精度が高くなっているとはききますが正しくJSを実行全部できているかといえば、そうではないだろうと思います。そのため、SPAの場合で検索にもしっかり対応させたいような場合は、サーバーサイドレンダリング等も行えるようにしておくなどの工夫が必要になると思います。

Q. methods と watch と computed の使い分けをおしえてください

あくまで私の場合ですが、表示するプロパティで利用する場合は computed を利用し、表示に使わないようなロジック部分は methods に入れるようにしています。Watchは値が変わったときに、毎回なにかしら処理させたいようなときに使うようにしています。例えば、v-modelを指定したinputの中身が変わるたびに、ローカルストレージに値を保持する処理を書いたりなどで利用しています。

ダウンロード

高速なウェブのためのモダンアーキテクチャ JAMstack／中村 享介（ピクセルグリッド ）

セッション6で、JAMstackを紹介させていただいた、中村享介です。

JAMstackは新しいアーキテクチャのため、すぐに理解するのは難しいかと思いますが、
事前にHTMLを生成しておくというポイントだけでも押さえておくと、今後さまざま情報が出てきてもついていきやすいはずです。

また、今回は概念とそれによるメリットの説明だけで、じゃあ実際どうやって始めたらよいのかという話はしませんでした。今回のセッションで興味をもっていただいたなら、まずは、事前にHTMLを生成する「静的サイトジェネレーター」から始めてみると良いでしょう。

WordPressなど、CMSのテンプレートの知識がある人は「11ty」のような、テンプレートエンジンベースの静的サイトジェネレーターがオススメです。最近のVueやReactといったJavaScriptの知識がなくても使えます。

Vueの知識のある方は、「NuxtJS」の静的ファイル生成を試してみてください。事前にHTMLを生成するというのがどういうことなのかわかりやすいと思います。

そうやって作ってみたサイトを「Netlify」で公開すれば、それはもう、JAMstack構成のサイトです。コーダーとしての知識だけで高速なサイトを作成できる感覚をぜひ掴んでいただければと思います。

JAMstack
https://jamstack.org/

静的サイトジェネレーター: Eleventy
https://www.11ty.io/

プログレッシブVue.jsフレームワーク: Nuxt.js
https://ja.nuxtjs.org/

ホスティングサービス: Netlify
https://www.netlify.com/

ダウンロード

Nuxt.jsがもたらすWordPressの新たな可能性／カイト（キテレツ）

こちら（Notion）にまとめていただいていますが、下記に転載します。

ダウンロード

プロジェクトをうまく進めるために、コーダーが進化するためのテクニック／大串 肇（mgn）

ありません。

主催者から補足

講演内で「リンクを無効にする」のは、次のコードです。

a {pointer-events: none;}

ダウンロード

コーダーとしての価値を高めるウェブ解析活用術／井水 大輔（エスファクトリー）

『コーダーとしての価値を高めるウェブ解析活用術』のセッションを務めました井水です。

コーダーさん向けということで、どのような内容だと役立つかとても悩みました。
結局、なんのためにウェブ制作（コーディング）をしているんだっけ？を突き詰めると、事業の成果に貢献するためであってそれ以上でも以下でもないということを改めて感じました。

その中でも重要不可欠なコーダーさんの役割をもっともっと価値の高いものにしつつ、またそれを理解してもら得るように本内容が少しでもヒントになればと思いました。

アンケートでは「GTMを活用しみる」「自分の価値をもっとあげていきたいと思った」「自分のやったことに対してエビデンス（データ）をつけようと思った」など次のアクションに繋がる思いをもっていただけた方が多かったようでとてもうれしく思いました。

以下いただいた質問の回答です。

ITPの影響が気になります

ITP（トラッキング防止機能）により分析へマイナスの影響があるのかという質問でしょうか？
プライバシー保護の問題はますます厳しくなりデータの取得が困難なケースも増えてくるかと思います。
しかし一方でテクノロジーの進化とともに今まで取得できなかったようなユーザーの行動履歴が取得できるケースもあります。
最近では1人のユーザの詳細な動きからインサイトを理解してサイトを改善するという傾向も強くなってきています。
大事なことはビジネスの成果につながるデータは何なのかを見極め、そのデータを取得する方法を考えることです。
例えば、TELクリックの数を取得するにはウェブ上だけでなく実際にコールが鳴った数を記録するなどオフラインでのデータも合わせて活用していくと良いでしょう。

GTMでデータをとったあとデータポータルで視化したほうが良いと思うのですがいかがでしょうか？

データのビジュアル化はとても有効な方法と考えます。
データポータルに限ると日々確認しなければならないような数値や複数名で随時共有すべきデータは特に有効かと思います。
単純に工数（時間）短縮になります。

一方で、月次や年次でデータから課題抽出や施策を考える場合には、パワーポイントなどのツールも含めアウトプットしやすいものを選ぶと良です。

取得するデータの設計はどのようにしてますか？

目標やKPI設計ができてから、取得するデータの設計に移ります。
設計ではまず、
・要件に基づき、導入するツールを決定する
・導入するツールで取得するデータの設計をする
・計測できるように設定する
という流れになります。

「導入するツールで取得するデータの設計をする」の箇所ですが、そもそもどういうデータが取れるんだっけ、というのは理解しておかないといけません。
イベントではファイルのダウンロード数や動画の再生数、電話のクリック数などが取得でき、カスタム定義ではログインの有無、検索結果件数、口コミ数、会員ID、商品詳細の属性情報、スコアの取得などです。
上記も一部ですが、こういった中でKPIに基づく項目（指標）が決まれば、データ取得設計書に落とし込みます。
＊データ取得設計書とはどういうデータを取得するか、ページ内のどの箇所か、どうIDを振るかなどを一覧にしたものです。

この辺りの内容は、知識や経験も必要になりなかなか学べる媒体もすくないですが、本気で取り組む方には「提案型ウェブアナリスト養成講座（https://happyanalytics.co.jp/schoolpbwa/）」がオススメです。

最後に

データを活用したマーケティングは今後ますます加速していきます。
その中でコーダーさんに求められるものは、これまで以上に売上につながる部分が重要視されていくでしょう。
これに応えられるコーダーさんとそうでない方では、もしかすると今後大きな価値の差ができてしまうかもしれません。
今回のセッションが少しでも皆さまの価値向上につながるきっかけになっていただけると幸いです。

SNSでも情報を発信していきますのでぜひお気軽に交流ください。

Twitter：https://twitter.com/ImiDai

Facebook：https://www.facebook.com/daisuke.imizu

Linkedin：https://www.linkedin.com/in/daisukeimizu/

ダウンロード

お問い合わせ

ご不明点やお気づきの点がありましたら、フォームからご連絡ください。

お問い合わせ

このページの上部に戻る