~ストーリー 1~

★開発日記★AMP(アンプ)、PWA(プログレッシブ ウェブアプリ)、Sass(サース)が目の前の課題かな!?

2017/08/29 03:26:00
(2017/08/26 75:26:00)
HTML版 | AMP版 | AMPストーリー版
アルファベット順に説明します。

そう、現在の今泉兄の課題であり、この数日でマスターしないといけない項目。

マスターというより、とりあえずざっくりでも全貌を把握しないといけない項目ですね。
その一つがAMPとかいて、アンプ。

簡単に言うと、HTMLをスリムにして、軽くしたパターンなのですが、実際の記述はルールがありまして。

むしろ、見た目じゃない部分の記述もあったりと、少しハードルがたくなります。
でも、スマホサイトには必須ですね、通常のHTML版と共に、AMP版も用意する事が必須の時代になりました。

さらには、AMP版って、スマホユーザだけではなく、タブレットユーザやパソコンユーザ向けにも対応しておいた方が良いとの事。

となると、必然的に、レスポンシブデザインにする必要がありまして。
テンプレートを別にしてもいいのですが、今のところ、スマホ版のグーグル検索結果しかAMP版のページは表示されませんので。

手間を考えると、AMP版はレスポンシブデザインが良いだろうな~って事で、そうする事にしました。

ま~、スマホ版だけでも良いのですが、せっかくレスポンシブデザインを覚えましたので。
我が社のサイトは、広告の事や、チャットやタイムラインがメインの機能なので、スマホ版とパソコン版のテンプレートを別にした方がよさそうです。

同じ機能ですが、まったく別のレイアウトであり、構成というか配置にした方が、作りやすそうなので。

そこで、AMP版ではレスポンシブデザインを採用して、忘れないようにしましょう・・・って事で。
なので、AMPをマスターしつつ、改め、レスポンシブデザインの技術も再習得するって感じですね。

これは、1週間くらいかけて、じっくり調べ、覚えたいと思います。

ま~、大変なのは、AMP版のHTMLに直接記載する、CSS部分だけだと思いますが・・・。
それ以外のルールは、一気に覚えて、通常HTMLとの違いを明確にしておきたいと思います。

通常HTMLと違い、構文エラーがあると、どうもグーグルの検索結果に表示されないようですので。

この辺はが明確なのは、それはそれで、良い事だと思うので、ガッツリこのタイミングで覚えます!
続いては、PWA(プログレッシブ ウェブアプリ)。

超簡単に説明すると、ブラウザで動作するアプリって事で。

単にブラウザで見るページと同じと言えば同じなのですが、アプリのように機能するって概念?仕組みです。
PWAは、いろいろな技術がありまして。

一つは、これが一番のメリットかも知れない、ウェブプッシュ通知。

ダウンロードしてインストールする、ネイティブアプリのように、プッシュ通知が可能になります。
という事は、ウェブプッシュ通知の技術もマスターする必要がありまして。

これは、まさに、今、調べまくっていますが、まだ漠然としか、理解していません。

FacebookやTwitterの通知機能が、まさに、このPWAだと思うのですが。
あ、AMPと同様に、レスポンシブですので、パソコンやタブレットなど、スマホ以外にも対応ですので。

ただ、AMPとは真逆なところに位置するページであり、アプリですね。

この二つのパターンを、内容によって使い分ける、それが次世代サイト構築だと思います。
他にも、オフラインでも動作したりと、通常のページにくらべ、便利な機能がありまして。

それをまとめて、PWAって事で、アプリって呼んじゃいましょう!って事かと思います。

なので、高機能なホームページって理解で良いと思いますよ。
ホームページという事は、個別のURLが存在しているって事なので、同じアプリでもURLによって機能を変化させたり。

例えば、ベタな例としては、天気のアプリの場合。

普通のアプリだと、ダウンロードして、地域を選択するじゃないですか!?
しかし、PWAの場合は、URLに地域情報を入れておけば、アクセスしたら、そのまま、該当する地域の天気を出す事が可能。

URLが存在しているって事は、何かと便利ですので、意外と、ここ、重要な気がします。

同じアプリにリンクしても、動作が変わる、見た目が変わる、などなど。
考え方によっては、何かすごい事ができそうな気がします。

URLがネットの世界を繋いでいますので。

これだけでも、妄想が膨らみますね。
そうそう、ダウンロード不要で、アプリのような使い方が出来るって事も、相当なメリットかと。

ホーム画面にも保存できますし。

ほんと、ブラウザで動作するアプリって事で、可能性は無限です!
他にもいくつかメリットがあるのですが、今泉兄はまだ、そこまで理解していないので、これからの課題という事で。

今泉兄がやりたい事は、全てPWAで実装可能だと思うので、ここ追求します。

まだ、全貌はわかりませんが、PWAを実現するために、JavaScript、jQuery、Ajaxなどを活用って事かと。
なので、今まで購入した書籍も、まだまだフル活用。

HTML5も、まさにPWAを実現する為の書式だと思いますので、この本もフル活用。

今まで今泉兄が買った本を一つのまとめたのが、PWAだと理解しています!
ただ、そんなPWAもデメリットが・・・。

一つは、たぶん一部の機能ですが、iOSには対応していないって事です。

特にウェブプッシュ通知は、まだiOS非対応。
これが痛い!!!って事なのですが、我が社の場合は、メルマガで代用。

ま~、そのうち対応する事を祈って、それまでは、メルマガとウェブプッシュ通知を併用という事で。

先日語ったように、メルマガとウェブプッシュ通知の運用一元化の構想もあるので、大丈夫でしょう。
さらには、URLが存在しているという事、ブラウザで動作するって事で、前のページに戻ってしまう事。

又は、次のページに進んでしまう事。

ちょうどブラウザのページを移動するボタン付近に、アプリのボタンがあると、この現象が・・・。
なので、別ウインドウで表示するなど、いろいろとテクニックが必要かも知れません。

又は、アプリ側で、ページを遷移しないように制御するとか。

ヤフーゲームですが、ブラウザアプリを調査した際、これが結構な頻度でありまして・・・。
まさに、ウェブアプリ、ブラウザで動作する、HTML5ベースのウェブアプリなので、PWAに通じるところがあると思いますが。

ここが唯一のネックと言えば、ネックなので、UIが今まで以上に重要だと思いました。

技術でカバーするのか、UIでフォローするのか、どちらかですね。
そして最後は、Sass。

スタイルシートを、プログラムっぽく書く方法!?ですかね・・・。

どんなメリットがあるのか、実はわかっていませんが、Sassで書く事になりました。
パートナーのデザイナーさんが、Sassを採用しているので、その関係もあり、Sassって事でして。

我が社の新サービスのデザインも、このデザイナーさんにお願いしているので、このブログもいつか、Sassで書かれたCSSにチェンジです!

といっても、皆さんにはわからない事ですが、実は裏ではSassです!って事で。
見えないところでも、日々、進化していますので、今後とも、応援よろしくです!

って、まだ、新サービスの構築が進んでいない・・・。

そうそう、最後に、今後の予定を少しだけ。
まずは、プロフィールチャットボットを、PWAで構築します。

そして、動画紹介コーナーは、AMPで構築ですね。

このブログもAMP版が登場しますので。
AMP版と通常HTML版の違いは、機能が高機能化どうか。

といっても、チャットやタイムラインはPWAなので、別ウインドウで表示。

となると、通常HTML版はもう、必要ないんじゃないかって思っています。
場合によっては、AMP版とPWAになる可能性大。

その辺も、覚えながら、見極めたいと思います。

という事で、やりましょう、日々の作業に追われていますが、やるしかありませんので!