~ストーリー 2~

★研究日記★AMPストーリーの作り方、デモ、サンプルを公開。そして、AMPストーリーを作ってみた感想などなど。

2019/01/13 10:38:00
HTML版 | AMP版 | AMPストーリー版
え~、思い出しましたので、AMPストーリーの2019年の抱負と、2018年のまとめというか、これまた反省を。

AMPストーリーのデモというか、サンプルもありますので。

というか、もう、目にしているので、おわかりですね。
そうですよ、そう。

このブログ、今泉兄のブログは、なんと、気づけば、AMPストーリーに対応。

多分、日本で一番、AMPストーリーを作ったのは、今泉兄です!
といっても、自動生成なので、過去のブログがAMPストーリーになっただけなんですけどね。

では、まずは見ていただければと。

これが、AMPストーリーのデモです。
せっかくなので、今日の、このブログをAMPストーリーで見てください。

他の日のブログ記事も、ページ上部に「AMP版」のリンクと共に、「AMPストーリー版」のリンクがるので、そこからでもアクセスできます。

そうです、これがAMPストーリーなのです!
いや~、どうでしょうか?

この文字自体を、AMPストーリーで見ている方もいるかもしれませんね。

というか、そうしてください!
まだ、HTML版やAMP版で見ている方、もう一度、リンクしておきますので、そこから見てくださいね。

今日のブログの第二部にリンクしておきますので、続きは、AMPストーリで。

いや~、すごいよ、AMPストーリー、って、絶対に流行りません・・・。
どうでしょうか?

画面の右側をタップすると、次のページに移動。

画面の左側、といっても、半分から左ではなく、画面の四分の1くらいのところまでが、前のページに移動します。
で、AMPストーリーなのですが。

あ、まず、なぜ、今泉兄がAMPストーリーに燃えているかと言いますと。

実は、SEOなんですよ、AMPストーリーのSEOを研究しているんですよ。
今後、AMPストーリーが検索結果の上位にでるならば、これはすごい事になるなと。

検索結果の上位にでないなら、このまま、AMPストーリーは、流行らず、埋もれていくような。

でも、AMPストーリーの目的は、どこかで達成されるというか、活かされるんだと思います。
その可能性を、誰よりも感じていて、燃えている最中です。

インターネットの世界では、いろいろなところで、違う燃え方をしているようなのですが。

その動向を見ているだけでも、楽しいのですが、そんなことをしている場合ではありません!
今泉兄は、この後、AMPストーリーを、さらに大量生産します!

このブログのAMPストーリーは、実は、写真や動画がなく、テキストだけなので、本来のAMPストーリーの良さを、まったく表現できていないんですよ。

それでも、タップして次の文章を読むのは、個人的にはアリだと思っていますけどね。
他にも、AMPストーリーのメリットを語ろうと思えば、もう、何時間でも、というのは嘘ですが、1時間くらいは語れますよ。

そのお話しは、また次回以降、どこかのタイミングという事で。

今回は、抱負と反省ですね。
まず、反省から言っちゃいますけど、こんなに簡単だったら、もっと早くにAMPストーリーに対応すればよかった・・・。

というのが、正直なところです。

このブログをAMPストーリーに対応したのは、実質1日ですので。
確か、お正月に、ふと、思ったんですよ。

大晦日だったかもしれませんが、何しろ、ふと、そうだ、AMPストーリー版を作ろう!と。

少し、独自のブログシステムのコードを、改造しまして。
今泉兄のブログですが、毎回、毎回のブログの文章が長いので、これを、第一部、第二部、、、と分けていましたので。

見出しのプロローグの部分と、一部、二部、、、の部分で、分割しまして。

後は、AMPストーリーの、元からあるフォーマットファイルに入れこんだだけです。
いや~、簡単でした。

以前、軽くサンプルは作っていたので、あっという間に完成。

背景画像とか写真を入れる事も考えましたが、シンプルに、テキストだけで公開しちゃいました!
で、いろいろと、実験であり、調査をしまして。

例えば、AMPストーリーの最後のページは、ブックエンドという機能というか、ページでして。

これ、JSONファイルを参照しているので、GoogleのAMPキャッシュだと、表示されないんですよ!
そこで、JSONを、AMP HTML自体に書いてみたのですが、これはAMPエラー。

しかし、何かあるはずだ!って、世界中を調査したんですよ、って、単に英語のAMPストーリーを探しただけなんですけどね。

「AMP Stories」で検索すると、いろいろ出てきます。
そして、ひとつの方法を見つけたんですよ!

あー、そうなのね、そういう事ね・・・と。

そこから、AMPストーリーではなく、AMPのテクニックも発見しまして。
あー、そうきたかー、やはりアメリカの方が、AMPは進んでいるのね・・・と。

さすがに、英語、勉強したくなりました。

というか、USAを踊りたい・・・じゃなくて、USAに行きたい・・・。
というか、AMPの本場、GoogleでAMPを研究している人と、話したい・・・。

英語が話せないので、コミュニケーションは取れませんが。

知りたい、AMPをもっと知りたい・・・。
で、AMPストーリーの2018年の反省は、もっと早くに着手すればよかったな~と。

そして、AMPストーリーの2019年の抱負は、こんなことを考えています。

そう、AMPストーリーで、本格的なサービスを公開する事。
ま~、これくらいなら、できますよ。

一つは、水面下で交渉が成立したので、後は作るだけです。

これくらいは、やり遂げたいな~と。
続いては、抱負ではなく、できたら程度の構想ですが。

そう、AMPストーリー作成サービスの公開、いや、構築です。

AMPストーリーを作るのは、すっごく簡単なのですが、サーバを用意したりとか、HTMLとかの多少の知識は必要ですので。
そこで、ブラウザから簡単にAMPストーリーを作成できるサービス。

これを作ります!いや、作りたい!

いや、作れたら作ってみて、個人で楽しむ・・・。
これくらいの願望だけにしておきますね、確実に時間が無いので。

いろいろやりたい事があるので、優先順位を考えると、願望、いや妄想にしておきます。

これまた、人とお金を集めてから、考えたいと。
ところで、AMPストーリーを作っていて思った事なのですが。

エコシステムじゃないですか!?AMPも、AMPストーリーも。

って、エコシステムの定義を、イマイチ理解していないので、感覚として言ってますけどね。
だからもう、HTML版もAMPと同じように、余計な機能というか、余計なモノ、あえて言いますけど、JavaScriptですよ。

これをもう、どこかGoogleでも、国連でも、ブラウザに搭載でも、どこでもいいので、ひとまとめにして。

使いたい時に、コードを1行追加して、宣言して。
そんな仕組みが良いと思うんですよ。

無駄なんですよ、今泉兄からすると、JSがもう、嫌で無駄で、もう、無くなれ!って。

ほんの少しかもしれませんが、重くなるじゃないですか!?
だから、個人的には、JSを排除する方向で、頑張っております。

ただ、そうもいかないので、すっごく必要な時もあるので、困るんですよね。

そこで、何かこう、軽くして、ルール化して、もう少し手軽にというか、エコですよ、エコシステム。
だから、クラウド版のCMSとか、AMP専用CMSとか、AMPストーリーのCMSを作りたいんですよ。

分散して、独立して、自由度も高くしつつ。

一部はルール化して、共有して、そんなネット社会を夢見ています。
PWAだって、そうですよ。

CMS作りたいな~と。

みんなが同じ事して、同じ悩みを抱えて、同じ調査をして、同じく解決して。
だったら、なにかこう、コード1行追加で、PWAができちゃうとか。

CSSだって、ボタン一つ作るのにも、ま~、いろいろ公開されている文献から、コピペで済むのですが。

何か、もっとスムーズに、できると思うんですよ。
このボタンの場合は、こうして、あーして、じゃなくて。

はい、これで完成!とか。

形を指定して、色を指定する、2個くらいの設定で、あら不思議、キレイなボタンが完成!とか。
きっと、HTML10とか、HTML100あたりだと、そんな事になっているような気がします。

それまでは、やはり、ゴリゴリと、CSSとJSとの闘いですね。

なので、AMPストーリーとか、AMPの方に、規制がある方に、惹かれていくんですよね、今泉兄は。
よし、もう少し、AMPストーリーを研究します!

アニメは理解できたので、今後は、画像、動画、そして、やはり、デザインなんですよね。

最後は、センスであり、クリエイティブな世界なので、今泉兄の一番苦手な分野なのですが。
逃げていても仕方ないので、ONE MEDIAとかを研究して、少しはカッコイイAMPストーリーを演出してみます!

経験すると、しないとでは、雲泥の差ですからね。

では、この章の最後に、誰も必要としていない、AMPストーリーを作ってみて、知った事や感想です。
先ほど、お伝えしましたが、AMPストーリーのブックエンドは、Google検索に表示されたAMPストーリーでは、表示されません!

続いて、AMPストーリーは、HTML版のAMPバージョン(amphtml)としては登録できず、スタンドアロンが前提ですので、AMPストーリー自体にcanonicalを設定です。

これは、Google検索に対してですので、Googleのローカルルールですが、AMPストーリーのSEOを目指しているので、今泉兄にしてみると必須だったりします。
そして、これはまだ、調査の途中なのですが。

AMPストーリーの構造化データで指定する画像は、ストーリー毎に変更しないと、画像が検索結果に表示されなくなると思います!

今泉兄のブログのAMPストーリー、公開した当時は、今泉兄の顔が検索結果に出まくっていたのですが、なんと、すべて同じ画像を指定していたので、まったくでなくなりました!
原因が別のところにあるかもしれませんが、画像を使っていないAMPストーリーの場合は、きっと、これが原因になるかと。

AMPストーリー毎に、画像は変更した方がいいですね。

ま~、もしかしたら、背景画像や、ストーリー内の各ページに画像を使えば、解消されるかもしれませんので、何かルールを発見したらご報告します!
というように、まだまだ研究しないといけない事が多々ありまして。

そうなんですよ、今日、ブログを公開した理由の一つは、これも大いなる実験でして。

先ほどの、ひとつ目のお題も、これまた実験でして。
これはすべて、お客さんのため。

そうです、そうなんです。

第三部に続きますが、このブログは、受託開発の実験の場でもあったのです!