プログラマーのメモ書き

伊勢在住のプログラマーが気になることを気ままにメモったブログです

はてなブログで SyntaxHighlighter V4 を使ってみました

はてなブログに移行した際、それまでの経緯もありコードの表示には SyntaxHighlighter を使うようにしました。

blog.mori-soft.com

しかし、ふと気づいてみると、いつの頃からかヘッダ部や記事下部の表示が崩れて、正しく表示されていないことに気づきました。

f:id:junichim:20180131223929p:plain

f:id:junichim:20180131223942p:plain

上記の画面は Firefox (58.0.1) の例です。Chrome (64) も同様です。 Edge (41) のみ正しく表示されます。

はてなブログに一度問い合わせたのですが、サポート外ということで自分でなんとかする必要がありました。

先日、時間の余裕ができたときになんとかできんもんかな?と気になって SyntaxHighlighter について調べてみると、最新版が GitHub で公開されていることに気づきました。

github.com

ということで、既存の SyntaxHighlighter (3.0.83) を V4系 に変更して、はてなブログが正しく表示されない問題が解決するか試してみました。

なお、作業時の環境は

  • Windows 10 Pro 1709 上の BashOnUbuntuOnWindows (16.0.4.3)
  • npm 3.10.10
  • node 6.10.3

でした。

v4 のビルド

SyntaxHighlighter v4 は自分でビルドして、それを取り込む必要があります。

で、 GitHub のBuild のページの通り作業をしようとすると、なんとエラーになってしまいます。こんな感じのエラーメッセージでした。

mor@DESKTOP-RLA4CF1:~/tmp/syntaxhighlighter.org/syntaxhighlighter$ ./node_modules/gulp/bin/gulp.js setup-project
[22:20:47] Failed to load external module @babel/register
[22:20:47] Requiring external module babel-register
[22:20:47] Using gulpfile ~/tmp/syntaxhighlighter.org/syntaxhighlighter/gulpfile.babel.js
[22:20:47] Starting 'setup-project:clone-repos'...
[22:20:47] 'setup-project:clone-repos' errored after 1.69 ms
[22:20:47] TypeError: loadReposFromCache(...).error is not a function
    at loadRepos (/home/mor/tmp/syntaxhighlighter.org/syntaxhighlighter/build/setup-project.js:39:48)
    at Gulp.<anonymous> (/home/mor/tmp/syntaxhighlighter.org/syntaxhighlighter/build/setup-project.js:48:5)
    at module.exports (/home/mor/tmp/syntaxhighlighter.org/syntaxhighlighter/node_modules/orchestrator/lib/runTask.js:34:7)
    at Gulp.Orchestrator._runTask (/home/mor/tmp/syntaxhighlighter.org/syntaxhighlighter/node_modules/orchestrator/index.js:273:3)
    at Gulp.Orchestrator._runStep (/home/mor/tmp/syntaxhighlighter.org/syntaxhighlighter/node_modules/orchestrator/index.js:214:10)
    at Gulp.Orchestrator.start (/home/mor/tmp/syntaxhighlighter.org/syntaxhighlighter/node_modules/orchestrator/index.js:134:8)
    at /home/mor/tmp/syntaxhighlighter.org/syntaxhighlighter/node_modules/gulp/bin/gulp.js:129:20
    at _combinedTickCallback (internal/process/next_tick.js:73:7)
    at process._tickCallback (internal/process/next_tick.js:104:9)
    at Module.runMain (module.js:606:11)
(node:6122) UnhandledPromiseRejectionWarning: Unhandled promise rejection (rejection id: 1): Error: ENOENT: no such file or directory, open '/home/mor/tmp/syntaxhighlighter.org/syntaxhighlighter/.projects-cache.json'
mor@DESKTOP-RLA4CF1:~/tmp/syntaxhighlighter.org/syntaxhighlighter$

どうしたものかと困っていたら、 issue #428 にちょうどこの問題に関する投稿があり、解決策も載ってました。

コメントによると Promise の問題らしくて、その問題を回避する修正を公開してくれていますので、そちらのリポジトリから落として試します。

mor@DESKTOP-RLA4CF1:~/tmp$ git clone https://github.com/karljacuncha/syntaxhighlighter.git
mor@DESKTOP-RLA4CF1:~/tmp$ cd syntaxhighlighter
mor@DESKTOP-RLA4CF1:~/tmp/syntaxhighlighter$ npm install
mor@DESKTOP-RLA4CF1:~/tmp/syntaxhighlighter$ ./node_modules/gulp/bin/gulp.js build --brushes=all --theme=default

おお、問題なく処理が終了しました。dist ディレクトリを見るといくつかファイルが作られています。

mor@DESKTOP-RLA4CF1:~/tmp/syntaxhighlighter$ ls dist
index.html  syntaxhighlighter.js  syntaxhighlighter.js.map  theme.css

よさそうですね。次は、これらをサーバーにおいて、はてなブログから読み込るようにします。

(参考)node 8.9.4 (npm 5.6.0) の場合

ちなみに、 SyntaxHighlighter のページに 『npm 4.0.1』とあったので、 node.js を 8.9.4 にしても試してみました。 でも、この場合は、 build を実行するとエラーがいろいろと表示されてしまいました。 うまくいかないもんですね。

はてなブログに設置

はてなブログの設定画面より、『デザイン』を開き、『カスタマイズ』(スパナの画像)タブを選択し、『サイドバー』を選択します。 既に、以前モジュールが追加されているので、それを編集します。編集後の内容は下記のような感じです。

<!-- Syntax HighLighter V4-->
<link href="http://servername/syntaxhighlighter/theme.css" rel="stylesheet" type="text/css" />
<script src="http://servername/syntaxhighlighter/syntaxhighlighter.js" type="text/javascript"></script>
<script src="http://servername/syntaxhighlighter/syntaxhighlighter.js.map" type="text/javascript"></script>

設定を保存して、ブログを表示してみると、

f:id:junichim:20180131224221p:plain

f:id:junichim:20180131224233p:plain

やった、問題なく表示できています。 まだ詳細に見ていませんが、レイアウトが崩れる問題は回避できたようです。

とはいえ、気になる点もあります。

  • pre タグ中のURL表記に自動でリンクを設定しないように data-unlink 属性を付けているが、リンクがついてしまっている箇所がある (表示は正しい)

まあ、レイアウト崩れよりはましかなと思うので、当面はこれでいこうかと思います。

ミラキャストでスマホで撮った映像をテレビに映す

ビデオカメラを持っていないのもあり、子供のイベントの時の写真とか動画はスマホで撮る派です。 ズームが厳しいとか、動き回る子供を撮るのに、そろそろスマホの動画撮影も厳しくなってきたので、ビデオカメラ買おうかそろそろ悩み始めました。

とはいえ、スマホで撮影する方式のいいところは、スマホは常に持ち歩いているので、特に用事もらなくふらっと実家とかに遊びに行った時も、気軽に動画を見せられるところですね。 でも何度かやってると、複数人で小さいスマホの画面をのぞき込むのは、実に見にくいと思うようになってきました。

そこで、スマホの画面をテレビに映して、みんなで見てもらえばいいんじゃないかと考えて、試してみたのをまとめておきます。

規格の選定

前提として、スマホは Nexus 5 (Android 6.0.1) になるので、Android で使えるものになります。 その他の条件としては、

  • 主に実家とかで使う
  • なので、WiFi などはない
  • 配線・接続も極力簡単なのがよい

というところです。

この条件で規格を探してみると、ミラキャスト (Miracast) が良さそうに思えます。Android 4.2 から対応しているようです。 最大のメリットとしては、WiFiを使ったP2P接続(WiFi Direct)なので、面倒なセットアップなどが不要、というところですね。

Chromecast も考えたのですが、調べてみた感じだとスマホとChromecast を同じ WiFi につなぐなどの必要がありそうだったので、やめました(理解が間違ってたらすいません)。

また、有線接続(Nexus5 だと SlimPort 接続)も考えましたが、スマホをもって自分一人だけテレビの近くに座る形になるのも嫌だったので、無線にしました。

使ってみました

で、早速、 Amazon で良さそうなミラキャストレシーバを探して買ってきました。

これですね。 買ったときはお値段も二千円ちょっととお手軽でしたが、この記事を書こうと思ってみてみたら、値段あがってますね・・・。

早速商品が到着したので、実際に使ってみようとすると、意外とデカい。 自宅のテレビは壁掛けで、背面にHDMIコネクタがある形状のため、つなげません・・・

仕方ないので、先日実家に行った際にテレビにつないでみると、電源(USBケーブル)が短い・・・ これは延長コードを使ってなんとかしのぎました。

実際のテレビとの接続はごく簡単。 テレビの入力をミラキャストレシーバをつないだHDMI入力に切り替えると、

f:id:junichim:20180117154952j:plain

のような接続待機画面が出てきます(画像はPCのモニターで試したときのやつです)。

次に、スマホ側で、設定->ディスプレイ -> キャスト を選択(端末により変わると思います)して、表示されたミラキャスト端末(テレビの画面にSSIDとか表示されているのですぐわかると思います)を選択すると、接続が開始され、問題なく接続できれば、すぐにミラーリングが始まります。

スマホで撮影した動画を再生して見ましたが、たまに映像が乱れますが、概ね視聴に耐えられました。

まとめ

総じて、これは思ったよりいい買い物をしたなという印象です。 上記のような条件で使う分には、申し分ないと思います。

注意点を挙げると、

  • 本体が意外と大きいので、テレビとかの場所によっては接続時に干渉するかもしれません
  • 電源用のUSBケーブルが短い
  • スマホの画面自体をミラーリングしているので、アプリの通知などが来るとそのまま画面に出てしまう

ということで、個人的には、HDMI の延長ケーブルを一本買って、それ経由で本体をつなぐようにしました。なんかケーブルが増えてきて、最初に書いた『スマホなので気軽に見れる』というのからだんだん離れてきているのは、まあご容赦ください。

最後の点は、まあみられても差し支えない相手ばかりなので、当面は気にしないことにします。

勉強会で使うとかの用途だとちょっと使えないかもしれないですね。

あと、環境によっては、接続時に接続失敗となることがありました。一度スマホ側で、上記の設定画面を開いて、『ワイヤレスディスプレイの有効化』のチェックを外して、再度チェックを入れたらすんなり接続できました。この辺りは臨機応変に対応する必要がありそうですね。

しばらくはこれで子供の動画を見ることになりそうです。

PHS 解約

長年使ってきた PHS ですが、ワイモバイルが2018年3月をもって、新規契約を停止するというニュースがありましたね。

去年の秋ぐらいに、それを受けてと思われるPHSからワイモバイルケイータイへの移行キャンペーンのDMが届きました。

f:id:junichim:20180114235058j:plain

ここまでくれば、停波までPHSを使おうかな?と一瞬思いもしましたが、我ながら何を血迷ってるんだと思いなおして、この機に乗り換えることにしました。 キャンペーンを使うと、月額料金も、いままで3000円前後だったのが、通話し放題ありで月額1500円前後に収まりそうです。

キャンペーンの特典は2つ、

  • 『スーパー誰とでも定額』という国内通話が基本的に無料になるプランが、次の機種変更まで無料で使える
  • 機種変更に伴う経緯空く変更事務手数料が無料

というものでした。

地方でPHSだとつながりにくい感じのすることも多かったので、乗り換えた結果は上々です。

ちなみに、新しい端末は Simply というストレート端末です。

www.ymobile.jp

で、どんな需要があるのか、我ながら疑問ですが、せっかくなので歴代の端末をご紹介しておきます。

最初の端末

Panasonic KX-PH35S

f:id:junichim:20180114234834j:plain

初めて買った携帯電話(というかPHS)。当時はまだ、DDI ポケットだったと思います。 周りと比べても、持ったのは遅いほうでした。 いわゆる普通の携帯電話にするのかPHSにするのか考えて、利用料金の安さからこちらを選んだ覚えがあります。

2台目

SANYO WX310SA

f:id:junichim:20180114234946j:plain

WX310SA - Wikipedia

契約当時は ウィルコム になってました。 買い換えたきっかけは、さすがに覚えてないのですが、JAVAのゲームとしてパズルボブルが入っていて動いたことを覚えています。

3台目

KYOCERA LIBELIO

f:id:junichim:20180115000332j:plain

LIBERIO | 京セラ

つい先日まで現役で使っていました。 軽くて小さいところが気に入ってましたが、地方だとPHSは品質が良くないんですよね。ホームアンテナのレンタルまでして使っていました。

まとめ

トータル16年とちょっと使っていたのですが改めて見直すと3台だけでしたね。 自分としてはもっとあったように思っていたのですが、1台あたり平均5年というところでしょうか。

新しい端末の Simply は悪くないのですが、PHS端末(LIBERIO)と比べると、大きい・・・

f:id:junichim:20180114235646j:plain

左の白いのがPHS、右の黒っぽいのがSimply。

今までと同じように使えるといいんだけどなー。

個人的にはケータイは電話専用機なんで、カメラ・ブラウザ・壁紙表示なんてのはいらないんですが、どんな端末にもついてるんですよねー。 電話・メール・SMSのみ(メールも最悪なくてもOK)でいいんだけど、どっかそんなの出してくれないのかなー。