bloggerからはてなブログへ引っ越し その2

bloggerで作ったjavascriptとcssをはてなブログで動くようにする過程で分かったことのまとめとい言うか、今後、修正したりするときの為の備忘録です。

あくまでbloggerと比べての違いで、やらなければならなくなったことを中心に記載します。

※使っているはてなブログは無料版です。

はてなブログでは(多分)aタグにonclickを設定できない

見たままモードのHTML編集でonclickを書いて保存すると消えてなくなる。

これに気付くまでに時間がかかって、なんでスクリプトが動かないのか悩んでしまった。記事中にonclickで処理するコードをどうしても組み込みたかったので、外部javascriptで後からonclickを付与することで対処した。

javascriptを記事ごとに対処するのは面倒なのでスクリプトは固定にして、記事でonclickに付与するパラメータをaタグの(保存しても消えない)alt属性に書いておき、javascriptでaltの内容をonclickに付与してaltを削除するようにした。コードはこんな感じ。

onclick_attr = [aタグオブジェクト].getAttribute('alt');
[aタグオブジェクト].setAttribute('onclick', onclick_attr);
[aタグオブジェクト].removeAttribute('alt');

はてなブログでは(多分)labelタグにname属性を設定できない

これもonclickと同じで保存すると消えてしまう。

name属性の使用はあきらめてidを使うようにした。同じ値は設定しない(想定)なのでidが重複する弊害はないはず。「data-ほげ」の独自属性を使う方が良さそうなんだけど消えるか否か試すのが面倒でやらなかった。

はてなブログでは"["や"]"が表示されないことがある

label等のテキストに"[ ]"と記述すると"[ ]"が消える箇所があった。全て消えるわけではないので規則性が不明。深追いする気にならなかったので"[ ]"は使えないと受け入れた。この記事でも"["と"]"を続けて書くと消えてしまうので間にスペースを入れてる。スペースを入れれば安心かというと根拠は無い。

VLCの記事でダウンロード数の表示等に使っていて、bloggerではlabelの"ダウンロード数[ ]"をサーバから取得した数を入れて"ダウンロード数[3]"とかにしていた。javascriptで

[ラベルオブジェクト] = [ラベルオブジェクト].textContent.replace(/\[.*\]/, "["+('  '+String(data[1])).slice(-2)+"]";

とかやってたんだけど"[ ]"が無くなってるので機能せず。

"[ ]"を"()"に変える等の方法もあるけどまた消えるのか？とか思って面倒になり、安易に

[ラベルオブジェクト] = "ダウンロード数["+String(data[1])+"]"

として回避。

はてなブログでは(基本的に)テーマはCSSのみ変更可能で、作ったテーマはストアに置く

bloggerはテーマのHTMLを書くことができて、書いたHTMLをbloggerの自分のアカウントのテーマにアップロードできた。ところがはてなブログは(多分)HTMLの編集はできず、編集可能なのはCSSのみ。そして基本的には作ったCSSはテーマストアに置くことになってる。

はてなブログのしきたりが分かってないだけかもしれないけど、自分しか使わないテーマをストアに置くと汎用のテーマをストアで探しに来た人にとっては迷惑でしかないと思う。なので、CSSは自前のサーバにjavascriptやCSSと一緒に置くことにした。

自前サーバに置いたテーマの呼び方は設定の「{}デザインCSS」に下記の1行を書くだけ。

@import url("https://[自前サーバのドメイン名]/[独自テーマのCSS].css");

はてなブログのテーマの作成

独自にテーマを作る場合はgithubで公開されているboilerplate.cssをベースにするらしい。ストアにベースにしたくなるいいテーマがいくつもあったんだけど、そのCSSを取得するだけでは不足があってうまくいかなかったので、さっさとあきらめてboilerplate.cssをそのまま使った。ストアにあるテーマをそのまま使うとCSSががちがちに設定されててカスタムCSSだけでやりたいことを実現するのはとても面倒に見えたということもあってboilerplate.cssに落ち着いた。シンプルなので変更は3か所程度で済んでる。

はてなブログでHTML編集をするなら見たままモードが良いかも

これもはてなブログのしきたりを分かってないだけかもしれないけど、少なくともはてな記法モードではHTMLの編集ができないので、デフォルトの編集モードを見たままモードにしておいた。

はてなブログの記事の構造

javascriptで記事毎に処理したくて、記事の情報を取得する必要があって調べた結果。

最初はレスポンシブルのPCとスマホの差に振り回されてしまったけど、結果的にどっちも同じルールで記事の情報を得ることができた。

• 1つの記事はクラス名js-entry-articleに入ってる。
• 各記事の投稿日時はjs-entry-articleで得たDOMからtimeタグを取得すると得られる。
• タイトルは先のDOMの2つ目のaタグのtext属性に入ってて、記事単体のURLはhref属性に入ってる。

最終的なavascriptとCSSの構成

自前サーバ側に置いたものはざっくり以下の4点。

• テーマのCSS
• テーマのカスタムCSS
• 記事内の感想ボタン、ダウンロードボタンの処理用javascript
• 各種PHP

これは自前サーバが止まるとテーマが読み込めなくなり、ダウンロードもできなくなることを意味してる。bloggerとの大きな違いは、自分だけのテーマをブログサービスのサーバに置けたところくらい。

IDCフロンティアに放置してある500円サーバを使うか？githubに置くか？そこまでする内容のブログでもないと思ったり。。。

残課題

• bloggerからのインポートで動画部が空欄になってる問題

概ね、はてなブログの準備ができたので、過去にさかのぼって溜めていた記事を書きあげようかなぁ。。

気が向いたら感想をお願いします。(ログイン不要、ボタンを押すだけです) 

[?]とても良かった
[?]良かった
[?]まあまあだった
[?]いまいちだった
[?]残念だった