SleipnirからChromeへ乗り換えるための必須機能まとめ

前からというかずっとなのですが、
やはりSleipnirはブラウザとしては「重い」ものに分類されるのだと思います。

IE基盤のタブブラウザとしては多機能で使いやすいものの、
IE基盤だからこそのロードの重さや、Flashが多用されているページへの切り替えの重さが目立ちます。

その中、ようやく拡張機能「Chrome Extensions」が正式に対応したChrome4が来たわけですね。
公開された当時から軽い動作だったので、サブブラウザとして使用していました。

というわけで、先週頃から「SleipnirからChromeへ乗り換えるための機能」を考えていたわけです。
今Sleipnirで使用している機能がChromeで充分に満たせるものであるなら、
いっそのこと乗り換えてしまえば良いんじゃないか、ということです。

これからChromeに乗り換える上で重要となる機能は、以下のようなものです。
マウスジェスチャ([右クリック+ホイール]でタブ切り替えも含む)
ブログ用ブックマークレット代替(簡易リンクタグ生成など)
RSS Reader(記事タイトルから本ページに飛べればOK)
グループ機能(お気に入りを一度にまとめて表示)
ページキャプチャ(ページ内をD&Dでキャプチャ出来ればなお良し)
IEのページを表示(Chromeとの動作の差をみるため)
あくまでも個人的なものですが。
素直に、Sleipnirでの動きをそのままChromeに持ってこられたらよりGoodです。

調べて探して学校で動作してみた結果、設定具合でそのまま持ってこられるもののほかにも、
「Sleipnirでやるよりも便利じゃん！」っていうのもあります。
また、想像していたものが見付からなかったりするので、
そういうものは自分で作ったりも出来たらなぁとか思ってます。

【自作】Sleipnir別ブラウザ表示スクリプトインストーラ 「exBrowserSleipnir」

この投稿で書いた、
Sleipnirでのアクティブページを別のブラウザで開くスクリプトを、
ダウンロードしインストールする、インストーラを作成しました。
その名も「exBrowserSleipnir」。
以下からダウンロード及び実行出来ます。
詳しい利用方法は、zip内の「Readme.txt」を参照して下さい。
exBrowserSleipnir Ver1.00 ダウンロード
exBrowserSleipnir_v100.zip
直接起動はこちら。
exBrowserSleipnir.vbs

この投稿で書いていたのはFirefoxに関してですが、
このインストーラを利用すると、Chrome用も同時にインストールされます。
当然、Sleipnir及びFirefox、Chromeがインストールされていない場合、
エラーと共に終了することになります。
主に自分用なので、細かなエラーチェックもしていないのが特色(？)です。

インストーラを実行し終了した後、「スクリプトの再読み込み」を行うと、
「スクリプト」内へ以下の様に表示されます。

Sleipnir APIを利用したアクティブページ別ブラウザ表示

Sleipnirを利用している人には分かることなのですが、
標準でいくつかのスクリプトが用意されています。
その中には、内部でSleipnirAPIを使用しているモノもあります。
SleipnirAPIに関してはこちら。
タブブラウザ Sleipnir オンラインデータベース(Sleipnir.API リファレンス)

で。
SleipnirAPIを利用して、アクティブページのURLを取得し、
別のブラウザで表示するスクリプトを作成したので、以下にまとめます。

まずはソースを。
そんなに難しい内容ではないです。
' ******************************************************
' FirefoxでSleipnirアクティブページを表示
' ******************************************************
Option Explicit

Dim Pnir, WshShell, Url

' SleipnirAPI呼び出し
Set Pnir = CreateObject("Sleipnir.API")

' 現在開いているページのURL取得
Url = "firefox "
Url = Url & Pnir.URL

' 非同期で呼び出し
Set WshShell = WScript.CreateObject("WScript.Shell")
Call WshShell.Run( Url )
ソースはFirefoxで開いていますが、Chromeでも確認済です。
「名前を指定して実行」出来るブラウザに対してはいけるはずです。
ブラウザを変える場合には、12行目のブラウザ名を変更してください。

以下が使用準備・方法となります。


Sleipnirのメニューバー「スクリプト」内のスクリプトが実行出来ない場合は、
「ツール」→「Sleipnirオプション内」から、
スクリプト実行を許可する必要があります。


スクリプトが利用できるようになると、
「スクリプト」内の「スクリプトの整理」を選択できるようになるので選択。


Sleipnirのスクリプトディレクトリが表示されるので、
「Firefoxで開く.vbs」を作成し、上のソースをそのまま貼り付けて保存。


Sleipnirに戻り、先ほど作成したスクリプトファイルを表示するために、
「スクリプト」内の「スクリプトの再読み込み」を行います。


「Firefoxで開く.vbs」が表示されるので選択。
Sleipnirで開いているページが、Firefoxで表示されれば完了です。

なお、当然ながらFirefoxで開くので、
インストールされていない場合にはエラーが発生します。
何しろエラーチェックしていないもので・・・。

今週した事まとめ

なんかてんやわんやとしていたのでまとめますね。

今週の火･水･木は、大阪の祭始めとされる「愛染祭」に参加しました。
といっても遊びに行ったわけではなく、ボランティア活動として参加しました。
ゴミ拾いや掃除、自転車整理、宝恵駕籠(ほえかご)と言われる愛染娘の担ぎ駕籠の解体や音響まで幅広くサポートし、充実の3日間を体験しました。
特に1日目2日目は雨で、びしょ濡れになりながらゴミ拾いを行いかなりへとへとになりましたが、祭自体テンションが上がる行事ですので、比較的楽しいままに終了する事が出来ました。

愛染娘さんからおみくじを買ったのですが、見事に中途半端な小吉でした。
4月に住吉大社で買った恋愛おみくじは大吉だったのですが、その他の運に関してはそれほど無いようです。

あとは、「はてなブックマーク」のアカウントを作りました。
はてなブックマーク - ほるめす のブックマーク
きっかけは、Sleipnirを制作・配布している「フェンリル」の「あの話題のデバイス」プレゼントキャンペーンです。
応募するだけならタダですし、もらえるモノはもらっておいて損はしないですから。
はてなブックマーク自体は初めて使ってみますが、ブックマークをネット上に置く理由はあまりないかなぁと思います。
こういうように、ブログに貼り付けて便利なサイトを共有したり、自分の家にあるPCのお気に入りと同期して外部から見られるようにする以外は使い道を見出せないですね。
しばらくは様子見です。

こんな感じです。
今週は忙しかったので、この土日はゆったりと過ごす予定です。

Sleipnirプラグイン Hawkeye

常日頃使っているWebタブブラウザ「Sleipnir」での、便利な機能を紹介します。
Sleipnirでは、Firefoxなどに比べてまだプラグインやスキンは少ないです。
ただし、少ないゆえ(?)のシンプルさもあり、個人的にはSleipnir使いならば使うべきだと思います。

で。
今回紹介するのは、プラグイン「Hawkeye」。以下からダウンロードできます。
Sleipnir｜プラグイン｜レイアウトの調整、CSS・HTML のエラー修正などの Web 開発補助ツール Hawkeye
Hawkeyeは開いているページ内のHTMLを解析し、情報を抽出することが出来るプラグインです。


インストールすると、通常左にあるエクスプローラバーに緑色のタカのアイコンが表示され、そのアイコンを選択することでメニューを表示出来ます。
上のキャプチャは「デザイン」メニューで、他には「校正」「アクセシビリティ」「SEO」「デバッグ」「解析」があります。
何が便利か、と言うのが今回書きたい内容ですが、量が多すぎる事とまだ全部使えていない事を踏まえて、今回は「デザイン」のみの解説を。


「解析：クリックした要素の詳細を表示」
その名の通り、クリックした部分のオブジェクトの情報を表示します。
上のキャプチャはBlogger投稿画面の、タイトル横のINPUTを選択した時の情報です。
HTML内の階層のどこにいるか、そのオブジェクトが持つスタイルの情報などの表示がされます。
わざわざINPUTを立体的に見せるために、枠線も1本ずつ違う色に選択してるのが分かりますね。


「枠線」
この中で選択したものに対応して、HTML内の要素に枠線を付加して分かりやすくします。
上のキャプチャでは、「要素名も表示」して「H要素」に枠線を付加した状態です。
どの部分に＜H1＞～＜H6＞要素が使われているかが一目でわかります。


「CSS」
HTML内にあるCSSに関する情報を操ることが出来ます。
上は、このブログの「すべてのCSSを無効」にした状態です。
外部から呼んでいるCSSだけでなく、要素にStyleとして付加したCSSも無効化され、ページを作成する際などの解析に応用できます。
ブログではいかにCSSを多用しているかが分かりますね。


「HTML」
ここでは、表示されているHTMLを編集することや構造をGUI的に表示することが出来ます。
上のように、階層を色分けして表示出来ますが、階層が深すぎると訳が分からなくなります。
「HTMLを編集」することで、リアルタイムにページに書き換えが反映され、「ここにこれを入れるとこうなる」といったデモンストレーションとして利用できます。



「表示」
今回一番推したい機能です。
HTML内の要素のidや色の情報を取得出来ます。
キャプチャ1枚目が「id,class属性値」、2枚目が「色情報」をそれぞれ表示した状態です。
idが分かれば便利な時と言えば、JavaScriptで要素を操作する時ですね。
idさえ分かれば、あとはその大きさもスタイルも中の値も変え放題ですから。
「色情報」が1発で表示出来るのも嬉しいです。
サイトを見ていて「この色が欲しい」と思った時にさっと使えます。
欲しい情報を局部的に即座に出せる機能は本当に便利だと思います。


「画面」
ウィンドウのサイズの表示と変更が出来ます。
あまりブラウザを細かく表示したりはしないので、使い道が分からないです。
キャプチャする時に「どうしてもこのサイズじゃないとダメ！」というぐらいじゃないかと。


以上で、「Hawkeye」メニュー「デザイン」の解説は終わりです。
適当にサイトで有効/無効に機能を切り替えるだけでも、思わぬ発見があったりします。
特に最近のウェブサイトは入り組みすぎて「どうやってこの構造を生み出してるの？」というのが多々ありますから。
そういう意味では、テクニックを奪う為の1つの案としてもいかがでしょう。