はじめてのPWAとAMP入門（SonicGarden Tech #1 岡山まとめ）
先日、岡山県でソニックガーデン主催のPWA(Progressive Web Apps)に関する勉強を行いました！本記事では発表資料を公開します。
PWAとは既存のweb技術にJavascriptを用いて、ファイルをキャッシュして高速化することでネイティブアプリのように動作させる技術です。
資料を社内だけで公開ではもったないよね、という話になり僕が記事を書いて公開することにしました！
1. PWAって何？
by 野本司
PWA初心者でもわかるPWAの概要とそのメリット、デメリットを解説。そして、PWAアプリを作るためにすべきことをおすすめチュートリアルサイトの紹介を交えて解説。
0から始めた人のおすすめチュートリアルやノウハウやとても役に立ちますよね〜。スマホアプリを開発するためにはSwiftやJava, kotolinなど複数の開発言語を用いてiOS対応, Android対応しなくてはならなかったのですが、PWAのようなwebの技術を使ってアプリのように動作するアプリを作れるのはリソースが足りていないチームにはぴったりだと思いました。この発表で概要を一気につかめた人は多いのではないでしょうか？
2. AMP ~プログラマがAMPと付き合う上で 知っておくべきこと~
by 遠藤大介
AMPって何？という導入の部分からプログラマがAMPの何を知るべきで何に気をつけなくてはならないのかを解説。AMP特有の制限やその制限の乗り越え方など実運用するための基礎知識をわかりやすく紹介。
PWAと一緒に扱われることの多いAMP。こちらもGoogleさんが推進している技術で、モバイルページを高速で動作させる技術のことです。
しかし、速さを追求するためには多くの犠牲が伴うんですね。最近のリッチなサイトはフロントエンドでの遅延を生じさせる要素がたくさんあるのでAMPのような縛りや制約とうまく付き合うことができればサイトがかなり高速化しそうです。AMPファイルにつける⚡️マークはmacのタッチバーから打ち込んでいるというエピソードには会場も爆笑していました。
3. AMPでデザインを頑張ってみた
by 能野仁志
実案件を想定しながらリッチなサイトのAMP化に挑戦。今や多くのサイトに用いられているハンバーガーメニューをAMPでどう実現するのか、デザイナーとしてAMPとどう付き合うかについて紹介
「AMPの概要はわかった。でも、それ実案件で使えるのか？」と気になっている方はぜひ、一度スライドをご覧ください！実際にお客さんに納品するケースを想定して、まず何を知れば開発に着手できるのか？「〇〇をサイトに設置したい」という要望を実現するために見るべき場所の紹介など、実践的なアプローチでとても参考になりました。AMPStartというサイトはAMPをやるひとは必見ですね！
4. 既存サイトをPWA化した
by 野上誠司
すでに運用されているサイトをPWA化するために必要な手順を紹介。静的なHtmlサイトをPWA化する話からRails, Wordpressまでとにかく既存のサイトをPWA化して得た知見を紹介。
新しい技術はゼロから作る案件なら導入も簡単ですが、すでに動いているサービスだとなかなか難しいですよね。ただ、この発表では既存サイトのPWA化は意外と簡単だということをソースコードを公開しながら解説していました。Railsにはserviceworker-railsというgemが公開されていて意外と導入までのベストプラクティス的なものがあると知ったのは驚きでした。WordPressもほぼ、プラグインを入れるだけでPWA化できるようです！
LT発表してきました！
僕も初めてのLT発表をしてきました！
初回の「PWAって何？」の発表で用いられていたFirebaseというPassサービスを紹介しました。今回のPWAをすぐに試せるように基本的なところをざっと紹介させていただきました！
最後に
既存の技術を使いながらアプリ（正確にいうとアプリじゃないですが）を作れるってとても便利ですよね！Swiftやkotolinは僕自身あんまり得意ではないので普段使っているJavascriptを使ってどんどん開発していきたいなと思いました。
全国各地で開催するSonicGarden Tech、着々と次回の計画が進んでいます！次はどこかな！？
ぜひ、一度参加してみてくださいね！
（以下に登録してもらえれば、次回の案内が届きます）
