ラーメンは味噌味に一票。
こんにちは、キイチです。
大凡ですが、昨年の2月辺りまでラーメンと言えば塩味が好きでした。
小ざっぱりとした中に溶ける脂のチャーシュー、お店によっては柚子の香りがただよい、付け合せの茹でたほうれん草もシャキッとしてツルツル細麺と良く合います。
昔、父が初めて入るラーメン屋は塩ラーメンを食べておけば大方間違いないと、根拠のない説を自信有りげに言っていました。
父の教えの一つです。父、元気ですよ。
そんな塩ラーメンですが、昨年の3月、4月辺りに「あれ、最近塩ラーメンを食べていない。欲していない。」と気がついたのです。
ラーメンは好きですが、毎日は食べていません。
1週間に1食程度の割合ですが味噌ばかり、いやさ、ラーメンだけではなくインスタントは緑のたぬきばかりを選んで食べていないか。
大げさに述べましたが、それほど大きな変化ではなく、近所にあるラーメン屋さんの味噌ラーメンが好きになり、その影響かと。
その味噌ラーメンは10年位前からあると思いますが、なぜか美味しく感じるようになったのはここ1年程。
何故でしょう。不思議です。
緑のたぬきは昔から好きなだけです。
さて、今回は備忘録。
以前に教訓めいた書き方で、JavascriptとCSSのコードについて書いた記事がありました。
そこにcodeタグでコードを括った箇所がありますが、格好悪い。
はじまりは格好つけ
おしゃれにならないものかと検索すると、大きく3つの方法がありそうです。
- codeタグをcssで装飾する
- WordPressのプラグインを利用する
- WEBサービスを利用する
ほとんどがこの3つの方法で紹介されていました。
cssで装飾するのは、テーマを自作していないことからレスポンシブも考えないとなるとモチベーションが上がりません。
プラグインは調べて行く中でWordpressの動作が重くなるといった所見もありますが、ブログの開設時からあまりプラグインを増やしたくない意向もあるので無しの方向で。
したがってWEBサービスを利用するとなります。
おしゃれはWEBサービス
調べた中でこれはと思ったものは次の4点。
- Google code-prettify
- CODEPEN
- JSFiddle
- GitHubGist（以下Gist）
Google code-prettify
Google code-prettifyはGoogleが提供するサービスということで、期待を持って調査したところCDNでライブラリを読み込むのですね。
先日Google Search ConsoleからのエラーがJavascript絡みだったこともあり、今回は見送り。
しかし、このcode-prettifyはCDNでライブラリを読み込み、表示したいコードをpreタグで括り、所定のclass属性を指定してあげることで、簡単にシンタックスハイライトを実現できる作業時間の短縮においては、とても優れていると思います。
CODEPEN & JSFiddle
CODEPENとJSFiddleはiframeタグで出力も可能で、Javascript、CSS、HTMLを同じエリアで表示でき、結果（Result）もその場で見ることが出来るという優れもの。
JSFiddleは登録無しで利用可能。
CODEPENはコードの公開だけなら無料のプランで問題無く使えます。有料にするとプライベートモードや共同編集等が利用可能になり、しかもIDE（統合開発環境）の様に使えるというプロジェクト機能というものがあるそうです。
ここまで持ち上げてしまいましたが、今回の目的としてはオーバースペックなのでまた今度。
結果、Gistが残りました。
Gist
GitHubは既に作成したアカウントがあるので、これで利用しようと思いました。
でも、code-prettifyのCDN問題、JSFiddleとCODEPENがオーバースペックであることもGistを選んだ理由です。
Gistちょっとそのまえに
Gistでコードを作成する前に準備をします。
そのままだとソースを見ると本文にscriptタグが入ります。
前述したようにscritpタグに神経質になっているため、それをなくすために【gist-embed】なるものを利用します。
リンク：gist-embed
これは【gist-embed.min.js】を読み込んでおき、Wordpressの投稿画面では<code data-gist-id=”a9897909u0g090a970g”></code>のように入れておくと、作成したGistを良い感じに表示してくれます。
【gist-embed.min.js】というJavascriptを読み込む必要がありますが、これはダウンロードしたものでも、自サーバー上に設置したものなので良しとします。これに悪意があったら、これをきっかけに色々なものが信用できなくなってしまいそうです。
Gistの使い方
https://gist.github.com/からログインします。
新規アカウント作成については割愛します。
右上のドロップダウンメニューから「New gist」を選択。
- コードの説明
- ファイル名を入力。拡張子まで入力。
- インデントの種類。タブかスペースを選択。
- インデントで入力されるスペースの数。2,4,8が選べる。
- コードを右端で折り返す「Soft wrap」か折り返さない「No wrap」かを選択。
- コード入力欄
- Gistを非公開で作成する。
- Gistを公開で作成する。
1.から6.まで選択、入力が完了したら8.の「Create public gist」をクリックしてGistを保存。
投稿に埋め込み
右上「Embed▼」の横に書かれていのが埋め込み用のタグで、その右にあるアイコンでコピー出来る。
今回は前述のgist-embedを利用して埋め込むため次の方法を用います。
基本形はこちら
<code data-gist-id=”5457595″></code>
上記の「5457595」の箇所にgist IDを入力します。
（IDは該当するGistを表示したときのURL内のアカウント後の英数字）
そのgist IDを入れたタグを投稿編集画面のテキストエディタで入力。
以上でおしゃれになったコードが表示されます。
他にも任意の行に背景色をつけたり、行番号を途中から始めたり色々なオプションもあります。
締め
見栄えが格好良く、小洒落てそれっぽくなりました。
所有する車とかオートバイをカスタマイズしたときに一人悦に浸るような感覚です。
こんな感じで当ブログもちょっとずつアップグレードしていきます。
しかし、やはり新たに読み込んだ「gist-embed」のJavascriptが気になります。またAMPに関するエラーというお知らせメールが届きそうな気もします。