こんにちは、Sleipnir Mobile for Android 開発担当の西田です。
Sleipnir Mobile for Android 2.0 β では、Web ページを自由にカスタマイズできるエクステンションを利用できるようになりました。
エクステンションは JavaScript をご存知の方ならすぐに作ることができます。ブックマークレットくらいしか作ったことのない JavaScript 初心者の自分でも簡単に作れたので間違い有りません！
というわけで今回はエクステンションの作り方をチュートリアル形式で解説します。
Android マーケットの Sleipnir Mobile Beta へ
はじめに
今回は モバイル版 Sleipnir Start をものすごくシンプルにする「Sleipnir Start Simplifier」エクステンションを作成してみましょう！解説は必要最小限で進めますので、詳しいことは Extensions Gallery の エクステンション開発ページをご覧ください。なお開発作業は PC で行います。
ソースファイルの作成
エクステンションは 1つのファイルからなります。ファイル名は *.slex.js という形でなければなりません。今回作成するエクステンションは sss.slex.js というファイル名にします。
メタデータ(エクステンションの情報)の記入
コードを書く前にまずはメタデータを記入しましょう。メタデータはエクステンションの情報です。メタデータはソースファイル中にコメントとして記入します。
// ==UserScript== // @name Sleipnir Start Simplifier // @author Nishida // @description Simplifies Sleipnir Start. // @include http://m.sleipnirstart.com/ // @version 0.1 // @require jquery // ==/UserScript==
// ==UserScript== から // ==/UserScript== で囲まれたブロックがメタデータとして認識されます。次のような情報を記入します。
- ・@name エクステンション名
- ・@author 作者名
- ・@description エクステンションの説明
- ・@include 実行対象のURL
- ・@version バージョン番号
- ・@require 有効にするスクリプト機能
今回、jQuery を使ってエクステンションを作成するので、 @require jquery と指定することで jQuery を利用できるようにしています。
プログラミング
HTML 要素を極限まで削ってやりましょう！
// ==UserScript==
// @name Sleipnir Start Simplifier
// @author Nishida
// @description Simplifies Sleipnir Start.
// @include http://m.sleipnirstart.com/
// @version 0.1
// @require jquery
// ==/UserScript==
$("#keywdBox").remove();
$('#searchIcon').remove();
$('#PR').remove();
$('#copyright').remove();
$('#otherlink').remove();
実質たった5行のコードですが、これで完成です。やっていることは単に HTML 要素を ID 指定で 5 つ削除しているだけです。
ちなみに削除する HTML 要素の ID をどうやって調べるのかと言いますと、HTML のソースコードを眺めてもいいんですが、Web インスペクタを使うととても楽に調べられます。
Sleipnir 3 for Windows ではレンダリングエンジンを Gecko に切り替えれば Firebug の 1.7.3 が利用できます。調べたい要素を右クリックして「要素を調査」を選択するだけです。
インストール
Sleipnir Mobile for Android からアクセスできるところにエクステンションを置きましょう。手軽なのは Dropbox です。
Android の Dropbox アプリからインテントで Sleipnir Mobile for Android にエクステンションを渡してやればインストールすることができます。
メールの添付ファイルで送るのもアリですが、Gmail アプリだと添付ファイルを開けないことがあるので、この場合 Sleipnir Mobile for Android で mail.google.com/ にアクセスするのが吉です。
テスト
インストールできたら http://m.sleipnirstart.com/ を読み込んでみましょう。ページ読み込みが完了すると、以下のように変化するはずです。
検索ボックスだけのシンプルな、でもちょっと素敵じゃない Sleipnir Start の出来上がりです。簡単でしょ？
公開
作成して頂いたエクステンションは、extensions@fenrir.co.jp か Twitter の @fenrir_dev までご連絡頂ければ Extensions Gallery で公開させて頂きます。将来的には Extensions Gallery 上で自由に投稿・管理できるようにする予定です。
もちろん、ご自身の Web サイトやブログなどで公開して頂くのも大歓迎です！
ソーシャルアカウント
関連記事
