2015年12月24日木曜日

ユーザースクリプトを書くときにjQueryを使おうと思ったけど変なところがあったので詰まったのを解決?した話

おさらい

ユーザースクリプトでjQueryを使う時は,
@require http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js
のように宣言してjQueryを利用します.
コンフリクトした場合は,
this.$ = this.jQuery = jQuery.noConflict(true);
と書くと回避できます.
ここらへんは公式のリファレンスを見てもらったほうが早いと思います.

実は…

Chrome+Tampermonkeyだと何もしなくても使えます.
ウェブページのjQueryを自動的に適用してくれているみたいです.
なのでChromeでは詰まりませんでした.

しかし

Firefox+Greasemonkeyではそうはいかないので素直に@requireして使います.
だけど正しく動かない.
あるノードのイベント一覧を取得したかったのですが,
なぜかundefined,未定義と言われてしまう….
しかしコンソールから同じコードを実行するとちゃんとイベント一覧が取れる!
ドキュメントの読み込みのタイミングかと思いましたがそうではありませんでした.

原因

Chromeではなぜか動くということから無事糸口を見つけることができました.
読み込んだjQueryではなくウェブページのjQueryを使う必要があったのです!!!
それぞれのjQueryが完結しているみたいなので,外部からは触れられないっていう話だと思います.
なのでjQueryで実行部分をスクリプトタグの中に入れて,スクリプトタグをページに挿入し,
該当スクリプトをページ内で実行させるようにしました.
(ユーザースクリプトからウェブページのjQueryを利用する方法がわからなかった…)
そうすることで無事,FirefoxでもChromeでも動くようになりました!

ちなみに

そのユーザースクリプトというのがこれ
右クリック禁止とかコピペ禁止を禁止するスクリプトです.

2015年12月13日日曜日

Android用Twitterクライアント「Peafowl」を作りました

この記事は「Twitterクライアント開発マン Advent Calendar 2015」の13日目の記事です

***

機能とかスクリーンショットとかはこちら
Google Playのリンクはここです


世の中には数多くのTwitterクライアントがあるのになぜ作ったのかというと,
・Androidアプリの勉強をしたかった
・Twitterをそれなりに使っているので作りやすいんじゃないか
という理由です.

デザインはみなさんお馴染みのマテリアルデザインを元に設計しています.
ガイドラインを見れば大体なんとかなります.
すごく細かく書いてあるので何か困ったらガイドラインっていう感じです.
それでもわからなかったり腑に落ちなかったりした場合は,
Google謹製のアプリのデザインやMaterialUpを参考にしました.
前者に関してはデザイン作ったのはいいけど実際に動かしてみたらどうなんだろう,
というのがわかるのでオススメです.
後者に関してはデザインのアイデアが浮かばないな〜〜〜っていうときにオススメです.
それを作るかどうかはともかくとして,とてもいい刺激になります.

システムは公式で使える機能を網羅するように頑張りました
それだけじゃなくて細かいところに手が届くように気を配りました
ですので一応「多機能」と謳っていますが多分他のクライアントのほうが機能がある…と思います
まだまだ実装したい機能があるので今後のアップデートで追いつきたい!です!


最初のリリースということで不具合があるかもしれませんが,
継続的にアップデートを行っていくつもりです.
もしよかったら使ってみてください!