片鱗懐古のブログ: bloggerの本文に埋め込んだスクリプトでPC用とスマホ用の定型文を切り替える

パズドラの投稿の最後に何となくAmazonの広告を載せています。個別商品リンクです。その広告、今はいいんですがすぐに古くなりますよね。数ヶ月に1度、1つのファイルを書き換えたら関連投稿の記述全てが入れ替わるようにできないか、考えてみました。ついでですが、Amazonの広告はPC用とスマホ用で別のリンクを作らなければなりません。スクリプトで判定して別のファイルを読むようにしてみました。

まずはスクリプトの格納先から説明しましょう。 bloggerに投稿しているなら同じアカウントでgoogle driveも使えるはずです。 google driveにはディレクトリやファイルを公開するとhtmlサーバとして動いてくれる機能があります。それを使います。

google driveに適当なディレクトリを作りましょう。ディレクトリを作ったら、スクリプトをアップロードする前にディレクトリのURLをメモしておきます。 google driveのヘルプを見ると、

googleのヘルプ ... ドライブでウェブページをホストする

アップロードしたファイルの [doc id] を使うように書いてますが、ディレクトリも同様にidを持っています。今回はスクリプトと同じディレクトリにテキストファイルを収めたいのでそちらを使いましょう。ヘルプの通りにファイルに対するgoogledrive.com/host/[doc id]のurlだと確かにアクセスは出来るのですがファイル名も拡張子も見当たりません。

svgファイルの例 ... googledrive.com/host/0B-k6WB_mTUEeMHBYSHRsWGMxcms

これだと例えば相対パスなども使えません。ディレクトリのidを使うとgoogledrive.com/host/[doc id]/ファイル名.jsのようにディレクトリ下のファイルにアクセスする事ができます。ここではディレクトリのidを使いましょう。

ディレクトリの用意ができたらスクリプトをアップロードします。こんなスクリプト「b_template.js」を書きました。

(function (){
    var ua = navigator.userAgent;
    if(ua.indexOf('iPhone') > 0 || ua.indexOf('iPod') > 0 || ua.indexOf('Android') > 0 && ua.indexOf('Mobile') > 0)
    {
        document.open();
        document.write((function(){/* `
<span style="background-color:#b4ebfa;">携帯端末用</span>のメッセージ
` */}).toString().split('`')[1]);
        document.close();
    }
    /*
    else if(ua.indexOf('iPad') > 0 || ua.indexOf('Android') > 0) // タブレット
    {}
    */
    else
    {
        document.open();
        document.write((function(){/* `
<span style="background-color:#cbf266;">PC用</span>のメッセージ
` */}).toString().split('`')[1]);
        document.close();
    }
}());

携帯端末かPCかを判定してdocument.writeするだけの簡単なスクリプトです。文字コードはutf-8です。これをコピーして``で囲った部分を書き換えて使います。

書き換える内容の記述にはヒアストリングを使っています。といってもjavascriptにはヒアストリングの構文はありません。そこで使っているのは関数オブジェクトのtoStringです。 javascriptでは関数オブジェクトにtoStringを使うと、その内容全て(コメントを含む)が収められた文字列が返ります。それを利用して次のようにします。

コメントがあるだけの空の関数オブジェクトを作る。コメントには取り出したい内容を、まず使わないであろう文字「`」で囲んで書く。
関数オブジェクトにtoStringを使い、関数全体を文字列にする。
`ではさまれた部分を取り出す。

使っているテクニックはこれだけですね。

スクリプトファイルをアップロードしたらブラウザで

https://googledrive.com/host/0B-k_～記号ダラダラ～xR2s/b_template.js

にアクセス出来るか確かめます。

ブログの投稿にはhtmlモードで定型文を挿入したい場所に次のように書きます。

<script src="https://googledrive.com/host/0B-k_～記号ダラダラ～xR2s/b_template.js" type="text/javascript" charset="UTF-8"></script>

この投稿で簡単な動作テストをします。

ここに内容が追加されます。 →

javascriptが有効なら「PC用のメッセージ」または「携帯端末用のメッセージ」のどちらかが表示されるはずです。

PC(windows7)とandroidスマホで確認。上手く動きました。確認したのは以下のブラウザです。

windows7 : FireFox 37
windows7 : Google Chrome 42
windows7 : IE 11
android 4.4.2 : デフォルトブラウザ
android 4.4.2 : FireFox 37

アップル? 最近リンゴ高いよね。

片鱗懐古のブログ

2015年4月16日木曜日

bloggerの本文に埋め込んだスクリプトでPC用とスマホ用の定型文を切り替える

閲覧数が多い投稿

ラベル

広告

投稿した動画

ブログアーカイブ