2017年5月のてげWebまとめ
-
- いいね！16
森 史憲🍛🍻🍫 / コーディングデザイン
@mr_moo555
本日19時からのてげWebはモバイルWebの高速化手法の紹介とchibi:bitでビーコンを作る講習会です。モバイルWebの高速化手法＆Physical Webのデモも見られる…！まだ若干数席はありますのでぜひご参加くださいませ。 tegeweb-201705.peatix.com/view
2017-05-26 13:25:22
森 史憲🍛🍻🍫 / コーディングデザイン
@mr_moo555
まずは動画から。若い発明家の発泡スチロールリサイクル計画 goo.gl/MAzPYv この技術は地球のゴミ問題を解決する1つになるかもしれないです。若い発明家すごい。 #tegeweb
2017-05-27 21:25:04
森 史憲🍛🍻🍫 / コーディングデザイン
@mr_moo555
次はモバイルWebページの表示高速化手法（AMP, PWA）について。AMP (Accelerated Mobile Pages) というのは表示高速化できるHTMLの書き方。スマホでGoogle検索したときに検索結果に「AMP」と表示される。 #tegeweb
2017-05-27 21:29:31
森 史憲🍛🍻🍫 / コーディングデザイン
@mr_moo555
モバイルのGoogle検索結果でAMPと表示されるページを表示すると驚くほど早く表示されるはず。AMPはAMP HTML, AMP JS, AMP Cacheの3つで構成されている。 #tegeweb
2017-05-27 21:33:44
森 史憲🍛🍻🍫 / コーディングデザイン
@mr_moo555
AMP HTMLは<img>は<amp-img>に置き換えるとか<base>, <frame>は使えない。外部CSSの読み込みは不可。<style>に記述。上限は50,000バイト≒48KBとか。 ampproject.org/docs/reference… #tegeweb
2017-05-27 21:35:54
森 史憲🍛🍻🍫 / コーディングデザイン
@mr_moo555
AMP JSはWebページ表示高速化をするJSライブラリ（AMP JSライブラリ）が提供されている。自作のスクリプトは基本的に実装不可。詳しくは→github.com/ampproject/amp… #tegeweb
2017-05-27 21:37:15
森 史憲🍛🍻🍫 / コーディングデザイン
@mr_moo555
AMP Cacheは必要に応じてキャッシュしたページを配信する仕組みがあること。つまりCDN(Contents Delivery Network)がある。 #tegeweb
2017-05-27 21:38:33
森 史憲🍛🍻🍫 / コーディングデザイン
@mr_moo555
構文チェックはURL に #development=1 をつけると Google Chrome の開発者ツールで確認できる。エラーは ampproject.org/docs/guides/va… にあるようにvalidator.jsからのエラーが表示される #tegeweb
2017-05-27 21:40:00
森 史憲🍛🍻🍫 / コーディングデザイン
@mr_moo555
WordPressでは「AMP」というプラグインで簡易的にAMPを実装できる。AMPページは通常のURLに amp/ をつけると表示される → ja.wordpress.org/plugins/amp/ #tegeweb
2017-05-27 21:40:50
森 史憲🍛🍻🍫 / コーディングデザイン
@mr_moo555
AMPページにデザインをきちんと反映する事例は → tech.recruit-mp.co.jp/server-side/po… #tegeweb
2017-05-27 21:41:39
森 史憲🍛🍻🍫 / コーディングデザイン
@mr_moo555
参考リンク。AMP（Accelerated Mobile Pages）とは？今から導入するための基礎知識と手順書マニュアル ferret-plus.com/4005 #tegeweb
2017-05-27 21:43:19
森 史憲🍛🍻🍫 / コーディングデザイン
@mr_moo555
PWA (Progressive Web Apps) はWebサイトでアプリのような体験を提供できる仕様。Webサイトを開く→ホーム画面にWebサイトのブックマークアイコンを作る→タップでアドレスバーがでない画面で閲覧できる、とか。 #tegeweb
2017-05-27 21:45:54
森 史憲🍛🍻🍫 / コーディングデザイン
@mr_moo555
PWAは表示が早い。キャッシュを使ってオフラインでも利用できる。httpsなので安全。App Cacheという仕様が廃止されて、Service Workerを使うようになった。ブラウザサポート → caniuse.com/#feat=servicew… #tegeweb
2017-05-27 21:47:41
森 史憲🍛🍻🍫 / コーディングデザイン
@mr_moo555
はじめてのプログレッシブ ウェブアプリをやってみると楽しいよ〜。 goo.gl/al7q2y #tegeweb
2017-05-27 21:52:24
森 史憲🍛🍻🍫 / コーディングデザイン
@mr_moo555
PWAの実例はsuumo suumo.jp techfeed techfeed.io/main/digest/la… #tegeweb
2017-05-27 21:53:09