横から失礼するChromeExtension

リア充の皆さん!こんにちは！今年も早いものでクリスマスがやってきますね。
ところでクリスマスのクリってクソに似てますよね。というわけでJavaScriptの練習がてらクソアプリを作りました。
先日、ICTSCに参加した際に「横から失礼する人」の画像を知り、一目見てとても気に入ったので題材に選びました。他には、オルガを縦横無尽に走らせるクソアプリを作成したのですが流石に自重しました。団長は止まりませんでしたが私は止まりました。来年は止まらないように頑張りたいです。

まずは横から失礼

とりあえず、成果物と言う名の、そびえ立つクソを晒します。恥の多い人生でした

上のgif画像の様に、横から失礼する人が横から失礼して来ます。失礼してくる方向と高さは、ランダムで選択されます。なかなかウザさがあって気に入ってます。

横から失礼されることによって気が散り、仕事やブラウジングが手につかなくなり、パソコンの前から離れたくなることを期待しました。今日、明日くらいはパソコンの前から離れて家族や友人と楽しくケーキでも囲みましょう！書いていて胃が痛い

まぁ、クソアプリの話を長々と書いていてもしょうがないので次の章からは、技術的なことをまとめていきます。（正直、ノリと深夜テンションの勢いで作ったので書くことが無い）

クソアプリを作ろう

「成果物は関係ないのだ！それを作る過程で何を得たかが重要なんだ！」と自分を鼓舞して、このアプリを作成したときに得た知識をまとめていきます。（後にクソアプリを作成する人の役に立つことを祈ります）
私の様に、「javascriptもjqueryも始めててわからないよ〜！」って感じの人に向けて書きます。普通に書ける人には物足りないと思います。多分、これだけわかればクソアプリを作れると思います。

1. ChromeExtensionは意外と簡単

作成する前は、なんだか難しそう...と思っていましたが、manifestといくつかのjsファイルを用意するだけで作れるので意外と行けます。html, css, jsをアドベントカレンダーのために一週間くらいで覚えたレベルの付け焼き刃でも全然作れたので、皆さんなら楽勝だと思います。話はこれくらいにして説明に移っていきます。

作成したExtensionのファイル構造は次の様になっています。
ExtentionDir/
　　　　　├ js
　　　　　　├jquery.js
　　　　　　└contents.js
　　　　　├ images/省略
　　　　　├ icon.png
　　　　　└ manifest.json

2.manifest.json

まず、ChromeExtensionを作るには、manifest.jsonを用意しなければなりません。
ソースコードを以下に示します。

{
    "content_scripts": [ {
        "js": [ "js/jquery.js", "js/contents.js" ],
        "matches": [ "<all_urls>" ]
    } ],
    "description": "横から失礼させて頂きます",
    "icons": {
        "128": "icon.png"
    },
    "manifest_version": 2,
    "name": "横から失礼",
    "permissions": [ "http://*/*", "https://*/*" ],
    "version": "1.0.0",
    "web_accessible_resources": [ "images/*.png" ]
}

詰まりそうな項目だけ見ていきます。
まずcontent_sctiptsですが、ここでは、どのURLで、どのjavascriptを動作させるかを指定しています。matchesにはリストでURLを渡してやり、ここに記されているURLにマッチングするとソースコードが実行されます。今回の例では、全てのURLで、jsディレクトリ配下のjquery.jsとcontents.jsを動作させる設定になっています。

次にweb_accessible_resourcesを設定することでExtensionに付随させたファイルにアクセス可能となります。これを設定することで、images/配下に設置された、横から失礼する人の画像をcontents.jsから使用することが出来ます。

他の項目に関しては、Chrome 拡張機能のマニフェストファイルの書き方という記事を読むとすぐわかると思うので割愛します。

3.contents.js

皆さん大好きソースコードです。焼きそば食べたい
コード全体は私のgithubに置いて起きます。 https://github.com/Noiri/YokokaraShitureiExtension

ここからは、行なっている動作ごとに分けて説明と共に示していきます。

画像を設置する

まずは、画像を差し込む部分です。差し込む画像はこれです↓

let $to_right = $('<img width="200">');
    let to_rightUrl = chrome.extension.getURL("images/to_right.png");
    $to_right.attr("src", to_rightUrl);
    $to_right.css({
        position: "fixed",
        bottom: -10,
        left: -280,        
        zIndex: "9999999",
        width: '200px',
        pointerEvents: "none"
    })
    $('body').append($to_right);

とりあえず、bottomとleftを正の値に書き換えれば、画像がブラウザ上に表示されます。簡単に説明するとimgタグを</body>の直前に差し込んで、cssを設定して位置を決めてあげてます。今回は、負の値を設定していますが、これは画面の外から失礼するように見せるために行なっています。
また、position:"fixed"を指定することで、常に画面上の決まった座標に置くことが出来ます、つまりスクロールなどに引っ張られていかないということです。これを設定してやることでウザみが増します。zIndexは、重なりの優先順位を表します。自分より下の値を持つものよりも上に描画されます。

画像を動かす

画像を動かしている部分です。横から失礼する人が、失礼したり、帰って行ったりする動作がこれに当たります。
説明のため、失礼する動作のみ示します。

function moveToRight() {
        return $to_right.animate({'left':'60px'}, 1000, 'linear').promise();
    }

async function animate() {
        await moveToRight();
    }
    animate();

関数moveToRightでは、ページ左から-60pxの位置に等速で、先ほど追加した画像を移動させるという処理を定義しています。設置された初めの状態で画像は、左から-280pxの位置にあるので-60pxの位置に移動するのはわかると思います。最終地点にマイナスを指定しているので、少し枠からはみ出した様な感じになります。
スッと失礼していく感じをイメージして作ったので、全身出るのはなんか違うなと思いマイナスに設定しました。
　　
実行する時は、async functionの中身で使用します。関数呼び出し時に、awaitをつけるのを忘れない様に注意してください。

後は好きにやる

画像をオーバーレイ表示して、その画像の動かし方がわかれば、後は想像力に任せて作るだけです。
右下にクリスマスツリーを置くもよし、延々と寿司の画像を画面下部に流し続けるも良しです。
私は試しにオルガを走らせてみましたがかなりいい感じです。

おわりに

jsとhtml覚えたしなんか書かないと身にならないなぁ、と思った矢先にカレンダーが空いていたので、これ幸いとクソアプリを作りました。
ChromeExtensionで画像をオーバーレイ表示する方法と画像をいい感じに移動させる方法を探すのにちょっと詰まってしまったので、クソアプリ作りたいと思ってる人の役に経てば嬉しい。
来年は、もっと良い感じのクソアプリを書けるようになっているととても嬉しい。頑張らねば...

という訳でメリークソリマス!!!