便利なサイトを見つけたのでご紹介。
Make the Web Faster — Google Developers
調査したいURLを入力するとそのページをPC、スマホ別に細かく診断してくれます。
といってもLint的なものではないようで、どちらかというと表示スピード重視。
参考までにYahooさんの診断結果を貼っておきます。
ちなみにGoogleさんのページはモバイル：92点、PC：98点でした。
さすがです。（まぁ要素が少ないのですが）
PageSpeed Insights：https://www.google.co.jp/
カテゴリー: Develop
CSSなどのPC/スマフォの切り分けはCSS内で対応したのですが、GoogleのAdsense、AmazonのアフェリエイトバナーなどはJSなどで切り分けるとNGのようなので、サーバ側での切り替えを行うことに。
WordPressには”wp_is_mobile()”などという便利な関数があるらしいのですが、MTにはそれらしいものが見当たらず。MTIncludeなどを調べてみましたが、どーも対応できないっぽい。ダイナミックパブリッシングに関しての記述は多々あったのだけど、結構トラブル多いみたいなのでスタティックのまま、PHPインクルードで対応する方法を模索。
Googleさんで検索しても、マッチする情報が無かったので一応メモしておく。
まずはhtml拡張子で、phpが動作するように.htaccessを設定。
hetemlの場合はヘテムルレンタルサーバー｜よくある質問：拡張子 .html で PHP を動作させたい。ということで、以下のみを設定してアップ。（他のBlogではgzip解除とか記述がありましたが、こちらは以下のみで稼働した）
AddHandler php5-script .html
次にブログ側の設定。
MT管理画面内対象ブログの「全般設定/モジュール設定」内
- 「サーバーサイドインクルード」を「PHPのインクルード」に設定。
- 「モジュールのキャッシュ：再構築の速度向上のために、テンプレートモジュール毎のキャッシュ設定を有効にする」はとりあえずOFF。（このへんはまた後日最適化）
これでブログの設定は完了。
HTML上に記述されたソースコードを整形、強調表示してくれるJSライブラリSyntaxHighlighterを、MT5にインストール。
MT3の時から利用していたが、しばらくみないうちにFlash連携によるコピペの機能などが割愛され、完全JS駆動になっておりました。（スマホ展開などが理由でしょうけど）
で、MT4のプラグイン化されたものがあり、これを使うと記事作成画面のフォーマットから制御できるらしい。
SyntaxHighlighter for Movable Type | kwLog
便利そうではあるが、コード部分の指定労力が最新版SyntaxHighlighterのと大差ない感じだったので、本家の最新版をインストール。
インストールは特に悩むことも無く、JSとCSSを一式アップロード。
利用する言語のブラシJSだけを読み込み処理して、Styleも適当に。
これで終わり。
ただなぜか縦スクロールが表示されて不格好な感じになっていたので、CSSを以下のように調整。
これで縦スクロールはでなくなった。（どっかの外人がoverflow-y: hidden !important;だ！とか書いていたけど・・）
/* syntaxhighlighter */
.syntaxhighlighter {
margin: -1rem 0 1rem 0 !important;
font-size: 1.4rem !important;
padding: 1rem 0;
}
CSSの設定など大枠はYoutubeやHTML5video等の埋め込み動画のサイズをwindow幅に合わせて動的にリサイズ/可変にする方法 ｜ HTML5 – CSS3 magを参考に。
ここではMovable Typeでのタグの置換方法について。
記事内に埋め込まれているタグは
<iframe width="519" height="264" src="http://www.youtube.com/embed/uFoe0kcKGFg" frameborder="0" allowfullscreen></iframe>
な感じ。これをサイズ制御用のdivで囲む必要がある。
Movable Type管理画面の検索|置換では検索しか正規表現が使えないため、WordPressの様に記事自体の変更はできないが、グローバルモディファイアとしてregex_replaceというのがあるのでそれを利用する。
（つまりビルド時に置換処理を行ってHTMLを生成するということ）
カテゴリー
スマホからの写真メモ with OCR
読書中「ここメモ！」なんて場面は多々あります。
参考書であれば蛍光ペンでマーク、一般書籍であれば付箋をペタリ。
借りてる本ならノートにメモなんてこともあるかもしれません。
本能的な感覚ですが「書く」行為が記憶への定着を促進するイメージは強くあり、若い頃はガリガリとノートに解釈した結果を複写することで自身の血肉としていたように思います。
しかし40歳を超え、自身の記憶力に疑念が産まれつつある状況に対し、ITの力でそこを乗り越える術はないのかしら？ということでちとリサーチ。
要件は以下
Functions
- スマホで撮影してクリップ
- OCRでテキスト化
- 保存、アップロードなどの操作で読書を妨げない
- あとでテキスト検索できる
- ネタ元書籍情報と関連付けできる
- メモに対してメモを付けれる
- 保存先はEvernote、Google Driveなどでもいいかぁ・・
利用イメージ（Save）
- 本を読み始める前に書籍データを登録（ISBNやらバーコード撮影で自動参照とか）
- 読書中にメモしたい部分に遭遇
- スマホを取り出しパチリ
- 写真の中でメモしたい部分を指でなぞってマーキング
- 保存（事前に保存先は設定済）
利用イメージ（load）
- 記憶の断片にある単語で検索
- 文章＋保存日時、書籍タイトル、表紙のリスト表示
- 参照回数を記録。自身の中での重み付け
- 共有してペア読書みたいなスタイルができたら学習過程における認識の同期なんて出来て面白そう
- 思考プロセスの傾向なんてものも比較できるかも（ペアマッチングに利用可？）
ということでリサーチ。
これまでSPAMフィルターで表出していなかったSPAMが、バージョンアップ（Movable type 3.35から5.161へバージョンアップ – apeirophobia）に伴い全て表出する事態が発生。
これまでの学習が継承されていないのかは不明。
とりあえず1000件/日ペースで投下されるため、学習させるのもしんどいな～ということで、幸いサーバにImage:Magickがインストール済だったのでMT純正のCAPTCHAを利用することに。
ただしカスタムテンプレートがCAPTCHA非対応だったので、MTデフォルトのテンプレートに変更。
これでガツッと投稿レベルで全部ブロックできました。
[追記 20140117]
どうもCAPTCHAでは投稿自体をブロックできる状態ではないようなので、違う対策を検討することにしました。
Movable type バージョンアップに伴うSPAM対策(2) – APEIROPHOBIA
7年ぐらい前からver.3.35のままだった本ブログのシステムを、やっとこアップグレードしました。
途中ver.4を経由してアップグレードを試み失敗したりと右往左往しましたが、なんとか無事アップグレードできたのではないかと・・・（ただテンプレートがそのままってのはちょっと意外でしたけど・・・テンプレートってDBに入っているのかしら？）
いや、まだ詳しく確認してないので、なにか途方も無いバグを内包しているのかもしれません。
余力があったら詳細書きます
カテゴリー
Aqueous surface
Videoタグを書いて貼り付けていたけれど、Instagram謹製のEmbedタグが用意されておりました。
ま、iframeな訳ですけれど。
ということでテスト
カテゴリー
Lorem ipsum
英語のダミーテキストとして有名なLorem ipsum
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
な感じですが、まぁ日本語サイトで英語ってのもイメージ遠いので日本語のLorem ipsumの方がイメージしやすいわけですが、自分で作るのは大変なので、
すぐ使えるダミーテキスト – 日本語 Lorem ipsum
を使います。
宮沢賢治「セロ弾きのゴーシュ」を元に生成されたもの
よくこの手の問題が表出するのでメモ
この正式名称はなんていうのかわからないけれど（弊社社長からnetwork-pathという呼称だと教えてもらいました。）、意味的にはプロトコルレベルドキュメントルートみたいな感じかな？
JS、CSS、Imageなどに利用できます。
当然参照先がhttps、httpの両方に対応している必要がありますがーー。
ただgoogle analyticsとかそういうメジャーどころの埋め込みタグにはこの手法が使われてないので、何か問題があるのかもしれないですが・・・
参考：Google Analyticsの判定式
弊社社長から参考文献を教えてもらったので追記
RFC 3986 – Uniform Resource Identifier (URI): Generic Syntax
A relative reference that begins with two slash characters is termed
a network-path reference; such references are rarely used. A
relative reference that begins with a single slash character is
termed an absolute-path reference. A relative reference that does
not begin with a slash character is termed a relative-path reference.
バグもあるらしいよ
IEでCSSが2回ダウンロードされるパターン | 開発・SE | マイナビニュース
5a Missing schema double download | High Performance Web Sites