2014年6月30日月曜日

Animetickで公式サイトへのリンクを作るUserScript

テスト前特有の何かコンテンツを作りたい欲が出て、いろいろ考えてたら疲れたのでアニメを見ていました。

そこでタイトルのようなものを考えました。

Animetickとは

"「今期のアニメは何を見てたっけ?」
「今日は何が放送されるっけ?」
「このアニメ、どこまで見てたっけ?」
アニメを見ること一つをとっても、実はたくさんのことを管理しています。
Animetick は日々放送される膨大なアニメの消化を腕利きの秘書、もしくはしっかりメイド、手練れの執事が如くサポートします。
まずは毎週見ているアニメを選びましょう。
アニメの放送時間になるとあなたのもとにチケットが配られます。
チケットを効率よく管理して、たくさんのコンテンツを消化しましょう。"

という説明にあるようにアニメの視聴管理をおこなうサービスです。
このサービスはとても使いやすいのですが、来期のアニメ何を見るかといった場合には、どんなアニメかは画像とタイトルしか判別ができず、あまり実用的ではありません。
そこで、アニメの詳細に公式サイトへのリンクがあれば使いやすくなるのではないかと思いつくりました。
(あと一度UserScriptを作ってみたかった)

どうやれば公式サイトへのリンクにつなげるかが一番の課題でしたが、今回はgoogleのI'm Feeling Luckyを使うことにしました。

googleのI'm Feeling Luckyとは、使っている人は少ないかもしれませんが、面白いgoogleのサービスです。
googleのホームにもあるgoogle検索ボタンの横にあるボタンからI'm Feeling Luckyを使うことができます。このI'm Feeling Luckyというボタンを押すと、検索ワードの一番上の検索結果に直接飛びます。

アニメのタイトルを検索するとほぼそのアニメの公式サイトが最初に出てくる(ぼく調べ)なのでこれならいける!と思い作りました。

コード

(function() {
    var element = document.createElement('a');
    var objBody = document.getElementsByClassName("anime-info-bottom")[0];
    element.style.backgroundColor = "#FF3307";
    element.style.textDecoration = "none";
    element.style.borderRadius = "5px";
    element.style.color = "#FFFFFF";
    element.target="_blank";
    element.innerHTML = "Official Site";
    element.href = "http://www.google.com/search?btnI=I%27m+Feeling+Lucky&lr=lang_ja&ie=UTF-8&oe=UTF-8&q=" + objBody.children[0].innerHTML;
    objBody.children[2].appendChild(element);
})();

github

dropbox

user.jsをchromeにインストールする場合には、一度***.user.jsをローカルに落とし、chromeの拡張機能のページを開きドラッグ&ドロップ。

<追記> Windows版のstableなchromeだとUserScriptは自動無効化されてしまう…。
使いたい場合にはDev版やCanary版を使うか、このサイト と同じようにすると使えます。



以下雑記(めも)
getElementsByClassNameとgetElementByIdについて
classは複数個ある場合があるのでsがつく、さらにリストで返ってくる。
->そのため一つしか無くても[0]で指定する必要あり。
idは必ず一つしかないのでsがつかなく、そのまま返ってくる。

子ノードの選択でのchildrenとchildNodesについて
children[i]はそのままi番目の要素を指定することができる。
childNodes[i]は改行はひとつとして数える。そのため、後ろのほうの選択を行う場合には不便。

element.targetについて
aタグでのリンクを新しいタブで開くとき場合には、targetを_blankで指定する。

(function()...)();としている意味
(function()...)();は無名関数でその場で実行することができる。

User.js
@includeでjavascriptを適応するサイトを決める。*でワイルドカード。

さんこうさいと
http://future-is-now-k02.blogspot.jp/2011/12/javascriptchildnodes-children.html
https://developer.mozilla.org/ja/docs/Web/API/document.getElementsByClassName
https://developer.mozilla.org/ja/docs/Web/API/document.getElementsByClassName
http://monopocket.jp/blog/html/1091/
http://dqn.sakusakutto.jp/2009/01/javascript_2.html

2014年6月2日月曜日

for文の繰り返し順序

c言語のfor文の繰り返し順序

for文

  for(初期化;継続条件;増分処理){
   文
  }
 
  1. 初期化
  2. 継続条件の検査(偽ならば終了する)
  3. 文の実行
  4. 増分処理
  5. 2へ