どうも、d@imac（@daisuke178）です。
ブログのリニューアルも一段落し、リンク切れや画像などが表示されていないかどうかのチェックをしている差中ですが、その中で、スマホなどで表示されるAMP（Accelerated Mobile Pages）というGoogleとTwitterで決めたフレームワークがあるのですが、そのAMPで表示をしたサイトでちょっと問題がありました。
Googleで調べた結果、根本的な解決策がないので、代替案で回避をしましたが、今回はこのgistのAMP表示についてご紹介したいと思います。
Cocoonというテーマは素晴らしい
何回も書いていますが、CocoonというWordPressのテーマは本当に素晴らしいです。
一番良いのが無料ということ。あとはソースコードがきれいなんで、見ていてもわかりやすいということです。見ていて勉強になります。本当は見ていてもだめで実際に書いてみないとわからないことがたくさんあるんでしょうが。
https://wp-cocoon.com/gistでソースコードを表示している
ブログにHTMLやCSS、Javascriptなどを乗せる時は、プラグインのSyntaxHighlighter Evolvedを使用せずに、GithubのいちサービスであるGistを使用しています。
プラグインのSyntaxHighlighter Evolvedを使用しない理由はできるだけプラグインを使用しないことで、ブログが重たくならないようにするためと、プラグイン同士の競合を防ぐためです。
もちろん、SyntaxHighlighter Evolvedというプラグインもとても便利です。StngerというWordPressのテーマを使用している時に、このSyntaxHighlighter Evolvedを使用してました。
http://www.daimaclog.com/2013/11/wp_plugin.html
ちゃんとシンタックスハイライトされまし、CSSで表示されるエリアを指定したりすることもできるので、ブログと親和性が高いと思います。その時の話は過去にもこのブログで行いました。
http://www.daimaclog.com/2018/05/gist_css_custom.html
あと、gistを使用すると具体的にどんな風な画面になるのかについては、下の画面を御覧ください。
AMPでは表示されませんので、こちらのリンクを御覧ください。
あれっ、gistがAMPでは表示されない
ただAMPとは相性があまりよくないみたいです。
先日、Google Search Consoleで自身のブログで検索されているキーワードを調べた上で、自身のスマホでそのキーワードを入力してスマホで見える画面を確認しようとしたのですが、AMPだと、Gistのソースコードが表示されませんでした。
どうもいろいろ調べてみるとAMPはJavascriptは表示されないみたいです。
http://www.milkmemo.com/entry/amp_taiou_tyuiten#gistも注意が必要
https://uranaka-shobou.com/github-gist/#M
暫定的な対応をしては、Gistが表示されている画面の下とかに、Gistを表示するためのURLをリンクしておく方法を取られているようです。僕もとりあえずこの方法で行こうと思っていますが、結構Gistを記事内で使用しているので修正はおそらく2時間近くかかると思うので、ゆっくり対応をしようと思います。
あとBootstrap4を使っているテーマは注意
あと、Bootstrap4を使ってテーマを作成している場合、Gistが表示されないことがあるみたいです。その対応としては、下のコードをstyle.cssに貼り付けておきましょう。
AMPでは正しく表示されませんので、こちらのリンクをクリックしてください。
ちょっと気になるサービスcodepen
あまり目移りしてもどうかと思うのですが、最近Codepenというサービスを知りました。
CodePenは、ユーザーが作成したHTML、CSS、JavaScriptのコードスニペットをテストして紹介するためのオンラインコミュニティです。
開発者が「ペン」という名前のコードスニペットを作成してテストできる、オンラインのコードエディタとオープンソースの学習環境として機能します。
フルスタックの開発者である Alex Vazquez氏、Tim Sabat氏、フロントエンドデザイナーのChris Coyier氏によって2012年に設立されました。
その従業員は分散した遠隔地の環境で働き、まれにすべての人で直接会うことはほとんどありません。 CodePenは、Webデザイナーと開発者がコーディングスキルを示す最大のコミュニティの1つです。登録ユーザー数は330,000人、月間訪問者数は1,690万人です。
Codepenというのは、HTMLやCSSやJavascriptのコード共有とその結果をリアルタイムで表示させる事ができるサービスですね。
このCodepenの良いところは、UIがかっこいいところです。あとは表示結果を合わえて見ることができる点だと思います。HTMLとCSSでコードを書いた結果がどうなっているのかどうかはGistでは表示されませんので、そういった意味ではGistよりもできることが多いサービスだといえます。
コメント