2017/01/02

Oracleマニュアル日英切り替えブックマークレットの紹介

Oracle Database のリファレンスマニュアルを参照することはよくありますが、ごくたまに英語版を見たいときがあり、その時はいつも Web を検索してマニュアルトップページから辿っていました。(普段英語のリファレンスマニュアルは参照しないので。。。)

このような切り替え作業を手軽に行えるブックマークレットを見つけたので紹介します。

Oracleマニュアル日英切り替えブックマークレット

便利な TIPS などが多くいつも参考にしているサイトの未読 RSS を眺めていると以下のエントリを見つけました。

ブックマークレットとは、ブラウザのブックマークとして JavaScript コードを登録し、表示しているページに対してそのコードを実行できるようにしたものです。ちょっとしたページの書き換えを行ったり、関連する別の URL を表示したりする際に使用します。

このブックマークレットは表示中の Oracle マニュアルの URL から、それに対応する英語(あるいは日本語)のマニュアルをブラウザの別ウィンドウ(_blank)で開くものです。とても便利です。Database のみならず Java 8 や WebLogic などにも対応しているようです。

ブラウザのブックマークの URL として JavaScript コードを記述する都合上、コードサイズに制限があります。日本語版と英語版の対応テーブルがバージョンを追う毎に増えていきますので、ブラウザの実装によってはコードサイズが大きいと登録できない場合があります。

カスタマイズする

このブックマークレットとして紹介されていた JavaScript の整形前コードが GitHub に公開されています。

先のエントリにこのようなコメントを見かけましたのでカスタマイズできないか検討してみました。
都度ダイナミックにGitHubにソースを読みにいくbookmarkletも簡単に作れるようですのでいつか試したいと思います。

GitHub コンテンツの外部呼び出し

まず単純に docOraJE.js を外部リソースとして呼び出すことです。GitHub に登録してあるコンテンツは raw 形式でダウンロードできますので単純に外部 JavaScript リソースとして呼び出すブックマークレットで良いかと思いました。 手元の macOS 環境で試したところ、raw.githubusercontent.com でホストされるファイルは Content-Type が text/plain として提供されるため、外部 JavaScript リソースとしては利用できませんでした。(Safari は大丈夫でした)

  • Google Chrome
    Refused to execute script from 'https://raw.githubusercontent.com/inoue-katsumi/misc/master/docOraJE.js' because its MIME type ('text/plain') is not executable, and strict MIME type checking is enabled.
  • Firefox
    MIME タイプの不一致により “https://raw.githubusercontent.com/inoue-katsumi/misc/master/docOraJE.js” からのリソースがブロックされました (X-Content-Type-Options: nosniff)。
% curl -I https://raw.githubusercontent.com/inoue-katsumi/misc/master/docOraJE.js
HTTP/1.1 200 OK
Content-Security-Policy: default-src 'none'; style-src 'unsafe-inline'
Strict-Transport-Security: max-age=31536000
X-Content-Type-Options: nosniff
X-Frame-Options: deny
X-XSS-Protection: 1; mode=block
ETag: "94439337d0f6b66ac27bfb564cdfb7246169efe9"
Content-Type: text/plain; charset=utf-8
Cache-Control: max-age=300
X-Geo-Block-List:
X-GitHub-Request-Id: 17EB2916:44F9:DE99B4:5869EEE3
Content-Length: 6277
Accept-Ranges: bytes
Date: Mon, 02 Jan 2017 06:10:44 GMT
Via: 1.1 varnish
Connection: keep-alive
X-Served-By: cache-syd1625-SYD
X-Cache: MISS
X-Cache-Hits: 0
X-Timer: S1483337444.659826,VS0,VE228
Vary: Authorization,Accept-Encoding
Access-Control-Allow-Origin: *
X-Fastly-Request-ID: ed7db026d3261e55c8ad5f54fda30ff16a640bdf
Expires: Mon, 02 Jan 2017 06:15:44 GMT
Source-Age: 0
ブックマークレットからの外部呼び出しとして機能するように Content-Type を正しく処理するには、該当の GitHub Repository で GitHub Pages を設定して公開すればよさそうです。 外部のリポジトリを GitHub Pages で公開する為だけに fork するのも何か違うかなと思いましたので別の方法を探します。

GitHub コンテンツの外部呼び出し(raw.githack.com)

raw.githubusercontent.com が text/plain を返すことを不便と思っている人は沢山居るようで、探すと GitHub などの公開リポジトリを適切な Content-Type ヘッダを付与して提供するサービスがあるようです。

このサービス経由でオリジナルスクリプトを呼び出すブックマークレットは以下のようになります。 このブックマークレットを使用することで Google Chrome や Firefox でも機能するようになりました。

githack.com では開発時の確認用サイトも提供されていますが、レスポンスヘッダを確認すると Expires や Cache-Control が 1年 から 30分と短めになっていますね。

  • 本番用
    % curl -I https://rawcdn.githack.com/inoue-katsumi/misc/master/docOraJE.js
    HTTP/1.1 200 OK
    Date: Mon, 02 Jan 2017 06:31:41 GMT
    Content-Type: application/javascript; charset=utf-8
    Connection: keep-alive
    Set-Cookie: __cfduid=dabe184e2bceab0fae8b4df24924059031483338700; expires=Tue, 02-Jan-18 06:31:40 GMT; path=/; domain=.githack.com; HttpOnly
    Strict-Transport-Security: max-age=31536000
    X-Content-Type-Options: nosniff
    ETag: W/"94439337d0f6b66ac27bfb564cdfb7246169efe9"
    X-Geo-Block-List:
    X-GitHub-Request-Id: C71B4C27:44F9:ADDC8A:58694FCA
    Via: 1.1 varnish
    X-Served-By: cache-hhn1538-HHN
    X-Cache: MISS
    X-Cache-Hits: 0
    X-Timer: S1483296714.852600,VS0,VE115
    Vary: Authorization,Accept-Encoding
    X-Fastly-Request-ID: 4d0457f50bf67ab85da37cba1b5e354dc36194d8
    Expires: Tue, 02 Jan 2018 06:31:41 GMT
    Source-Age: 0
    X-Robots-Tag: none
    Access-Control-Allow-Origin: *
    X-Githack-Cache-Status: MISS
    CF-Cache-Status: REVALIDATED
    Cache-Control: public, max-age=31536000
    Server: cloudflare-nginx
    CF-RAY: 31ac2b5fdb8d1329-NRT
  • 開発用
    % curl -I https://raw.githack.com/inoue-katsumi/misc/master/docOraJE.js
    HTTP/1.1 200 OK
    Date: Mon, 02 Jan 2017 06:32:57 GMT
    Content-Type: application/javascript; charset=utf-8
    Connection: keep-alive
    Set-Cookie: __cfduid=dbd98fef91bc6b198eab16afd35e3ba6f1483338777; expires=Tue, 02-Jan-18 06:32:57 GMT; path=/; domain=.githack.com; HttpOnly
    Strict-Transport-Security: max-age=31536000
    X-Content-Type-Options: nosniff
    ETag: W/"94439337d0f6b66ac27bfb564cdfb7246169efe9"
    X-Geo-Block-List:
    X-GitHub-Request-Id: C71B4C27:44F8:9F2B7A:5869F3CD
    Via: 1.1 varnish
    X-Served-By: cache-hhn1524-HHN
    X-Cache: MISS
    X-Cache-Hits: 0
    X-Timer: S1483338701.151704,VS0,VE108
    Vary: Authorization,Accept-Encoding
    X-Fastly-Request-ID: 15cba2a2b1085e77f0a7d253d7281f4ed1c27dc0
    Expires: Mon, 02 Jan 2017 07:02:57 GMT
    Source-Age: 0
    X-Robots-Tag: none
    Access-Control-Allow-Origin: *
    X-Githack-Cache-Status: HIT
    CF-Cache-Status: MISS
    Cache-Control: public, max-age=1800
    Server: cloudflare-nginx
    CF-RAY: 31ac2d3d7f67133b-NRT

GitHub コンテンツの外部呼び出し(XMLHttpRequest)

githack.com を経由することで機能するようになりましたが、この程度のことのために GitHub 以外のサービスに依存するのも大げさです。そこで DOM の要素として外部 JavaScript リソースを追加するのではなく、もっと単純に raw.githubusercontent.com からファイルを XMLHttpRequest で取得してその内容を eval すれば機能することを確認しました。 (追記) もともと外部からの呼び出しを想定しているものではありませんので、これまで確認してきた方法では処理を中断終了するための exit の箇所でエラーを起こしていました。

Uncaught ReferenceError: exit is not defined
    at eval (eval at <anonymous> (:1:98), <anonymous>:16:13)
    at XMLHttpRequest.<anonymous> (<anonymous>:1:98)
これは exit を return に書き換え、eval する内容を即時関数に変更することで回避できました。

おわりに

マッピングテーブルのようなものは JSON として提供されていると応用の幅が広がりそうですね。

ブラウザでの作業を効率化するコードの多くは JavaScript で書かれることが多いですので、サーバサイドの Node.js も含めてもう少し詳しくなりたいなと思いました。

0 件のコメント:

コメントを投稿