ブログこの広告は、90日以上更新していないブログに表示しています。公式ウィジェットの仕様変更により、ウィジェットに表示するアカウントをタグの属性によって指定できるようになりました。その結果として、この記事に書いた内容はほとんど無意味になりました。無駄な苦労をする必要が無くなったのは良いことですが、個人的には頑張って書いたつもりの記事なので、つらい。この記事は2013年5月に書かれたものです。それ以降にTwitterの公式ウィジェットの仕様が変更された場合、この記事で紹介しているJavaScriptは正常に動かなくなる可能性があります。Twitterの公式ウィジェットを一々手作業で作成するのが面倒くさかったので、設定を記述したJSONからウィジェットの設定を自動生成するJavaScriptを書いたという話。2013年6月11日をもって使えなくなるため、新ウィジェットに移行する必要があります。新ウィジェット新ウィジェットは少し面倒くさい個人的には、新ウィジェットに機能面での不満はありませんが、1つ面倒なことがあります。Twitterのサイト上であらかじめウィジェットの設定を作成してからでないと、ウィジェットをページに設置できないことです。旧ウィジェットでは、ウィジェットを設置するにあたり、Twitterのサイト上であらかじめ設定を作成しておく必要はありませんでした。ウィジェットの種類や表示するアカウントなど、ウィジェットのあらゆる設定を、クライアントサイドのJavaScriptから指定することができました。上に設置した旧ウィジェットは、次のようなコードにより生成されています。インスタンスを生成する際に、ウィジェットに関する様々な設定を指定しています。いう指定により、ウィジェットの種類がプロフィールウィジェットであることを表しています。部分でウィジェットに表示するアカウントを指定しています。"kwixilvr"を別のアカウント名に変えれば、そのアカウントのツイートが表示されるようになります。クライアントサイドから、ウィジェットの種類や表示するアカウントを指定できたわけです。新ウィジェットでは、ウィジェットを設置するにあたり、事前にTwitterのサイト上でウィジェットの設定を作成しなければなりません。ウィジェットの種類や表示するアカウントなどは、その際に指定する必要があります。作成されたウィジェット設定はTwitterのサーバー上に保存され、個々のウィジェット設定にはIDが割り当てられます。ウィジェットを設置する際には、<a>タグにウィジェットのIDなどを属性として指定します。上に設置した新ウィジェットは、次のようなコードにより生成されています。属性にウィジェットのIDを指定しています。<a>タグに特定の属性を指定することでウィジェットの見た目を変える方法は用意されていますが、クライアントサイドからできることはそれくらいで、ウィジェットの種類や表示するアカウントを変更することはできません。新ウィジェットを大量に作成するのはかなり面倒くさいこのような仕様のため、表示したいアカウントの数だけウィジェットの設定を作成しなければなりません。今のところ、ウィジェット作成用のAPIなども無いので、わざわざTwitterのサイトにログインし、ウィジェットの管理ページに行き、手作業でウィジェットを作成していく必要があります。10個ぐらいならいいのですが、数十個作る必要があったりすると、かなり面倒です。そもそも数十個もウィジェットを作らなければならない状況があるのかという話かもしれませんが、とりあえず僕は作らなければなりません。以下のページで利用するためです。これらのページでシリーズ出演俳優/声優のツイートを表示させたいのです。プリキュアガイドウィジェット自動生成機能を追加するそこで、ウィジェットの管理ページにウィジェット自動生成機能を追加するJavaScriptを書きました。Firefoxで動作確認済みです。いうものが出てきます。generatorには、JSONとして記述された設定を元にウィジェットを自動生成する機能(ウィジェットの設定をインポートする機能とも言えます)と、作成済みのウィジェットの設定をJSONとしてエクスポートする機能があります。テキストエリアにウィジェットの設定を入力します。入力すると言っても、基本的には他のプログラムから出力したJSONを貼り付けることを想定しています。ウィジェット設定の例として、次のようなJavaScriptオブジェクトを考えます。プロパティは配列になっており、この中に個々の作成したいウィジェットの設定をオブジェクトとして格納します。この例ではウィジェット設定オブジェクトが1つしかありませんが、設定オブジェクトは(作成できるウィジェット数の上限を超えなければ)いくつでも指定することができます。ウィジェット設定オブジェクトの各プロパティの意味は以下の通りです。(必須)ウィジェットの種類。"600")ウィジェットの高さ。"light")ウィジェットのテーマ。false)トラッキング機能を無効にするか否かwidgetプロパティは必ず指定する必要があります。それ以外のプロパティについては、指定しなかった場合、デフォルト値が適用されます。ウィジェットの種類によっては、上記のもの以外のプロパティを指定することもあります。上記のJavaScriptオブジェクトをJSONに変換すると、次のような文字列になります。押すと、ウィジェットの生成が開始されます。ウィジェットの生成が完了すると、生成されたウィジェットの設定がテキストエリアにJSONとして出力されます。この例では、次のようなJSONが出力されます。js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=\"//platform.twitter.com/widgets.js\";fjs.parentNode.insertBefore(js,fjs);}}(document,\"script\",\"twitter-wjs\");</script>\n"}]}このJSONをパースしたJavaScriptオブジェクトが次のものです。]}ウィジェット設定の入力に使ったJavaScriptオブジェクトと同じような構造ですが、個々のウィジェット設定を表すオブジェクトには、以下の2つのプロパティが追加されています。widget_idウィジェットのIDcodeページに埋め込むHTMLコードcodeプロパティのHTMLコードをページに埋め込むと、ウィジェットを設置できます。テキストエリアの上にあるセレクトボックスを使うと、いくつかの設定例を見ることができます。プロパティを使って、生成するすべてのウィジェットに適用されるデフォルト設定を指定することができます。具体的には、次のように指定します。プロパティに含まれるすべてのウィジェット設定オブジェクトに適用されます。上記の設定は、次の設定と同じ意味になります。]}なお、デフォルト設定と個々のウィジェット設定オブジェクトで同じプロパティが指定された場合、個々のウィジェット設定オブジェクトの方が優先されます。注意2013年5月現在、作成できるウィジェット数の上限は100個のようです。ウィジェットを101個以上作成しようとすると、エラーが発生します。押すと、作成済みのウィジェットの設定がテキストエリアにJSONとして出力されます。このJSONの構造は、先述したウィジェットの自動生成が完了した際に出力されるJSONの構造と同じです。今回書いたスクリプトは、Twitterのサイトにログインした上で実行する必要があります。そのような状態で悪意のあるスクリプトを実行した場合、メールアドレスなどが抜き取られる恐れがあります。今回書いたスクリプトは、そのような危険な挙動はしませんが、あるサイトにログインした状態で信頼できないスクリプトを実行することには、潜在的な危険性があるということを認識しておいてください。今回書いたスクリプトについても、できることならソースコードを見て、危険な挙動をしないことを確認してから実行してください。次期仮面ライダーが気になる季節になりました。月別アーカイブTwitterリンクkwixilvr.com商標速報botスーパー戦隊ガイド仮面ライダーガイドプリキュアガイドはてなブログをはじめよう!kwixilvrさんは、はてなブログを使っています。ブログを報告するスターをつけました引用をストックしましたストック一覧を見る閉じる引用するにはまずログインしてくださいログイン閉じる引用をストックできませんでした。再度お試しください閉じる限定公開記事のため引用できません。