Pastalablog in はてな

時代はブログ！ 日記もあるよ→http://pastak-diary.hatenadiary.com

Google Chrome version33で chrome-inrernal://newtab が無効になった件

表題の通りの変更がGoogle Chrome version 33から加えられています。

結構反応している人が多くて、公式ブログのアップデート報告記事でもNew Tab機能を復活させてくれの声がいくつも投稿されているようでした。

僕は すぐに宮崎あおいを見れるGoogle Chromeの拡張作った。 - @soh335 memo の拡張を愛用しているのですが、デフォルトの新規タブにある機能、例えば他のデバイスで開いているページを見るとかが使いたいことがあるので"chrome-internal://newtab/を開くリンクを追加して使ってた*1から割とダメージを受けた。

正確にはChrome Ver29でデフォルトでは使えなくなってflagで有効に出来る状態になっていたのが、Chrome Ver33で完全に削除された模様。

今まではChrome拡張を用いて、chrome://newtabを上書きしている場合でも、chrome-internal://newtab/を呼び出せばデフォルトの新規タブ画面を開くことが出来たのだけど、このchrome-internal://newtab/が利用できなくなった。

各種フォーラムとかにもいくつか話題になっているようだけど、みんな結局どうしようもないから、chrome://appsとかを使って代替するということをするしかないみたいな感じだった。

あと、New Tabを任意のURLに書き換えるみたいな拡張があるから、それと組み合わせて、New Tab用のURLを設定するところにchrome://newtabを設定したり、chrome-extension://[extension-id]/を設定したりしてそれを切り替えて使うという提案も上がってた。 後者だとやりたいことが割と実現できてる感じだけど、少し面倒な気もするから、出来れば復活させて欲しいけど望みは薄そう。

Chrome Ver33はこの件もそうだけど、custom.cssが使えなくなったり*2とか割とディープにカスタマイズしていた人たちが代替の拡張機能を使ったりして回避しないといけない変更が立て続けに入っていて少しビックリした。

窓の杜には

比較的小規模な開発者向けの変更がメイン

（カスタム要素と音声合成をサポートした「Google Chrome 33」がベータ版に - 窓の杜）

って書いてあったけど、そんなに小規模じゃないよなぁと思ったり・・・

尚、GIGAZINEはこの件には触れてるけど、大した影響はないと判断した模様。

また、Google Chrome 33安定版バージョンのリリースページでは、「新しいタブページ」が変更されたことについて不満を漏らすユーザーが多く見受けられましたが、実際にGoogle Chrome 33安定版バージョンに更新して確認したところ、以前のバージョンから大きく変更された点は見受けられませんでした。

（悪意のある拡張機能を無効化する「Google Chrome 33」安定版リリース - GIGAZINE）

気にはなっているので、この連休中に関連する議論を漁れれば読んでみようかなと思っております。*3

*1:https://github.com/pastak/chrome-tumblr-tile/commit/7a3f387703c52a5f94b0c9725d9727b807a975b3

*2:参照：http://pastak.hatenablog.com/entry/2013/12/13/230117

*3:最近、少しフォーラムの議論を漁って読むのが面白くなってる

ブラウザーと画像のEXIFのお話

追記 (2020/02/17)

各ブラウザが足並みを揃える形でCSSのimage-orientation属性の初期値が from-imageになりそうです。以下各ブラウザの対応状況です。

発端

調べた

この記事はiOSのSafariとChromeって書いてるけど、iOSのChromeはWebViewを埋め込んでいるだけなのでiOSのSafariと同じ描画をしてもおかしくないなぁという感じ。

この記事も書いている通り今でも各ブラウザはEXIFを無視するんだけど、どうなってるのが正解なのかなぁと思って関連するディスカッションを漁った。（議論はいくつか存在してますが、代表的っぽいのしか読んでないのでそれのURLを列挙しています。）（内容は多分合ってると思いますが、英語を斜め読みしたので間違っていたら教えて下さい）

要約

どうすべきみたいな統一した見解は無さそうで、特にFirefoxの議論を見ているとEXIFをこのタイミングで適応すると、現行のWebサイトなどに混乱が起きるかもしれないという危惧でEXIFは読まないという経緯になっていた。他も大体同じ感じっぽかった。

Firefox

いろいろあって、特に 298619 ではThunderbirdの話とかも飛び交ってるけど、最終的には

When displaying a standalone image, Firefox matches the EXIF orientation information contained within the JPEG image

（訳：画像単体の表示時に、JPEG 画像に含まれる EXIF 情報を利用して縦横を決めるようになりました。）

Support for the CSS image orientation property

（訳：CSS の image orientation 属性をサポートしました。）

via https://www.mozilla.org/en-US/firefox/26.0/releasenotes/

（日本語訳は http://www.mozilla.jp/firefox/26.0/releasenotes/ より）

ということになったようだった。

1つ目は画像を直接開いたらEXIF通りに回転させるというもので、2つ目はCSSでimage-orientation: from-imageと書くとEXIF通りに回転させるプロパティを追加するというもの。ちなみに2つ目のfrom-imageプロパティはFirefox（Gecko）でしかサポートされていないので注意。（一応from-imageキーワード自体はCSS Image Values and Replaced Content Module Level 4に追加されてる）

Chrome & Webkit

  1. Enable for full-page ImageDocuments.
  2. Add a preference (WebKitShouldRespectImageOrientation or something like that) to enable it globally.

　

By "globally" I meant "not just for full-page ImageDocuments, but for and others too", primarily so non-browser WebKit clients can choose to respect EXIF orientation everywhere if they so choose.

の方向でパッチが作成、取り込みが行われ、iOSではこの機能を<img>にも適当するようにしたようです。

Webサービスを作るときにどう扱うか。

普通にWebサービスを開発している人はこういうことをやっているんだろうけど、一応書いておきます。

AndroidやiPhoneで写真を撮るとたまに端末の回転がちゃんと認識される前に撮影してしまって画像の向きが意図にそぐわない場合、ユーザーはギャラリーなどのビュワーの機能で画像を回転させる。この時大体のアプリはEXIFに回転情報を書き込んで、見た目回転したように見せてる。これはEXIFの仕様として正しいし、ユーザーも回転して見えてるので良い。この画像をこのままWebサービスなどにアップロードするとユーザーは画像が回転していることを期待するけど、前述のとおりで<img>の中ではEXIFは無視されるので、疑問に感じる。こういう時はサービス側で適切にやった方が良い。

ImageMagickのコマンドでauto-orientオプション使ってやると簡単です。EXIF情報はGPSとかが入ってるかもしれないので消しておいたほうが何かと安全なので、同時に-stripも合わせて使うとより良いかもです。

convert -auto-orient -strip input.jpg output.jpg

追記(2020/02/17)

＜/ここまで＞

ちなみにMozillaのBoot2Geckoプロジェクトの中ではこういうJSでJPEGのEXIFを読んでいるみたいですね

JSでEXIF情報を読むライブラリもあるようです。

EXIFで回転させた画像群、このリポジトリにあって便利

tmux + zsh 環境下での PATH の話

全然ZSHの仕組みを知らなかったとかそういう話です。

そもそもずっと、phpenvが上手く使えなくておかしいと思ってた。

いつも、デフォルトのphpが起動するので、毎回$ ~/.phpenv/shims/php hoge.phpとかってしてた。これ絶対おかしくて治したいと思ってた。他にもhomebrew経由で入れたVimじゃなくてデフォルトのVimが立ち上がるとかでずっとPATH周りが怪しいなと思ってたけど手を出せずにいた。

最近、vim-gitgutterっていうVimプラグインがVim 7.3 Vim 7.3.105以降を要求してくるようになったので、Vimのバージョンを上げたくなったから重い腰を上げて戦うことにした。

まず、PATHが異常な感じで、zshrcに書いてないPATHが書いてあったり、PATHが重複したりしていて絶対これの所為だと思った。

Homebrewのインストール方法を書いたサイトとかには

export PATH=/usr/local/bin:/usr/bin

って書けば良いって書いてあるから、そうやって書いてるのに、/usr/binが$PATHの中では先に居てそっちが優先されるみたいなことになってた。

頑張ってググってたら、中身自体は今回のことと直接関係はなかったんだけど、こういうページに遭遇した。

ここの解決策のとこに載ってるpostに/etc/pathsがどうこうみたいなことが書いてあって、これっぽいなぁと思ってもう少し調べた。

どうやら、/etc/pathsに書いてあるのは連結されてシェル起動時に環境変数の$PATHに読み込まれるっぽいことがわかったので、/etc/pathsを開くと、確かに色々それっぽいディレクトリのパスが書かれていたので、順番を入れ替えて、/usr/local/binを先頭にした。

これでどうにかなるだろうと思ったけど、まだ解決しなくて、おかしいままだった。homebrewで入れたVimとかは立ち上がるようになったけど、phpenvで入れたPHPとかは相変わらずダメだった。

でも、ふと、そういやシェルの起動はtmux上でやってるから、tmuxが何かしてるのかもしれないと思った。

試しにiTerm2で新規タブを作ってシェルを立ち上げると意図通りに設定できていた。

これはもう絶対にtmuxが絡んでると確信したので、そういう感じでググる。そしたら、それっぽい情報が見つかった。インターネット便利。

解決方法はこのサイトに書いてある通り*1 で、/etc/zshenvを

# system-wide environment settings for zsh(1)
if [ -x /usr/libexec/path_helper ]; then
    PATH=''
    eval `/usr/libexec/path_helper -s`
fi

と書き直した。

原因はこのページの下部の説明のとこに書かれてました。

PATHを設定する際、重複したパスが存在すると"左"に書かれているパスが優先して設定され、"右"にあるパスは削除されます。

/etc/zshenvの中で呼んでるpath_helperっていうのが環境変数を設定してくれているようで、こいつがサブシェル起動時に、親シェルの環境変数を引き継いで設定をして、その後に~/.zshrcの中身が読まれるので、上手くいかないという話だった。

これで無事、phpenvで入れたPHPが使えるようになった。

ついでに環境変数周りについても少し詳しくなれた。

めでたしめでたし。

*1: 元サイトには.zshrcを弄れと書いてあったけど、読み込み順的に/etc/zshenvを書き直した方が良さそうな気がしたから、そうした。

jQuery.getScriptとSJISとIEが不運にも出会ってしまった場合の話

今日ハマったので、メモ代わりに残しておきます。

（ここから下を書いてて気付いたけど、普通に文字コードの問題だから、こんな大層な条件にしなくても良かったと思ったけど、せっかく書いたので残しておきます。読むの怠くて解決策だけ知りたい人は一番下まで行って、関連記事を読みましょう。）

色々あって$.getScript()を利用していたら、初めエラーが出た時に変数がUndefinedだみたいな感じだったので、なんだこれ！？と思って原因とか探ったので書いておきました。基本はただの文字化けですが、こういうケースもあるってことで、他に同じ事例にぶつかった人向けです。

発生条件と事象について

発生条件はかなり限られていて、以下の4つを全て満たす場合に起きるエラーについて書きます。

  1. $.getScriptでjsを読み込んでいる
  2. 1.で読み込むjsがSJISで記述されている
  3. js内のコメントの行末が全角文字で終わっている
  4. Internet Explorerでアクセスしている

現象としては、コメントの終わりがエンコードの関係で正常に展開されず、IEでJavaScript実行エラーが起きます。

中身が

// コメントです
var t = 'a';
alert(t);

や

/* コメントです
*/
var t = 'a';
alert(t);

のようなSJISのjsファイルを$.getScript()で読み込むと再現されます。

回避策

前述の条件を1つでも回避すれば良いです。 やんごとなき理由がない限り、$.getScript()を使わないといけないことにはならないと思うので、素直に<script>をビューに書くか、それが無理なら、

$('<script>').attr('src','example.js').appendTo('head')

とかって書いた方が良いです。どうしてもロードしたい場合は$.ajax()を利用して、後述のサイトで紹介されている方法でxhr.overrideMimeType()に文字コードを設定してやると良いです。

原因は後述しますが、jsファイルの文字コードをUTF-8にしても解決しますし、コメントの行末を全角文字でなくしても解決します。

原因

jQueryの$.getScriptの実装部分をjQuery ver2.0.3のソースコードより引用します。

getScript: function( url, callback ) {
        return jQuery.get( url, undefined, callback, "script" );
    }

ここで呼ばれているjQuery.getはjQuery.ajaxを利用しています。

jQuery.each( [ "get", "post" ], function( i, method ) {
    jQuery[ method ] = function( url, data, callback, type ) {
        // shift arguments if data argument was omitted
        if ( jQuery.isFunction( data ) ) {
            type = type || callback;
            callback = data;
            data = undefined;
        }

        return jQuery.ajax({
            url: url,
            type: method,
            dataType: type,
            data: data,
            success: callback
        });
    };
});

$.ajaxでは読み込み先のファイルの文字コードをUTF-8として読み込んでしまうので、これが原因になっています。

意気込んでブログ記事にしたけど、本当にただの文字コードのアレで文字化けしたってだけの話だし、こんな大層にしなくてよかったなってめっちゃ後悔しています。終わり。

参考文献

サークルの例会講座で発表した

KMCには例会講座ってのがあって、指名された人が１５分くらいで良い話をするシステムがある。

今日、それで発表した。

ブラウザを良くする方法について紹介したので、興味がある人は見てください。

ブラウザを便利にする方法

ちなみにスライドの生成にはJekyllを使って、showerというテンプレートを当ててる。あと、シンタックスハイライトするのにprismjsというのを追加したりした。

上下にスクロール出来るように弄ったりもした気がする。

Jekyllでshower当てるのには、showerの作者が作ったレポジトリがあって、それをcloneして使ってる。便利。なかったら自作しようと思ってたらちょうど欲しいのがあったって感じだった。スゴい。

shower/jekyller · GitHub

そういや、Google ChromeのDeveloper ToolsってCSS当てられる気がする

と思ったからググったらあった。

SouffleCode.net: The Leading Souffle Code Site on the Net

！！！Chrome v33からCustom.cssを変更しても効かないようになったので注意！！！！（エントリーの最後に代替策について記述しています）

Chrome Developer Toolsを開いて、別窓にしてもう1回ショートカットキーを押すとDeveloper ToolsのウィンドウをDeveloper Toolsで解析できる。便利。

でも、なんかウィンドウいっぱい開かないといけないから面倒だって人は、Chromeでchrome-devtools://devtools/bundled/devtools.htmlを開けば直接HTMLファイルを開けるので、この状態で普段HTMLを見る時みたいに見れる。便利。

これを開いてると、Custom.cssを編集して保存した時に手動でリロードしなくてもCSSが適用されるっぽくて地味に良い。

適当に1行だけ書いてこんな感じにしたけど、画像と被ると文字が見辛いとか色々あるから、CSSもう少し書いて良くしていきたい。

もっと良くなったらまた報告します。

ゆゆゆゆゆゆゆゆゆゆゆゆゆゆ

つづき

ちょっとだけ良くした。

%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%BC%E3%83%B3%E3%82%B7%E3%83%A7%E3%83%83%E3%83%88%202013-12-13%2023.50.00
Uploaded with Skitch!

特別にソースコード貼っておきますね

gist7945384

追記：Chromeのバージョン32からDevToolsのHTML構造が変わってたので、諸々変更したりした。

追記２

Chromeバージョン33からCustom.cssが使えなくなったらしいので、stylishとかそういうのを使う必要があるようになった。

Custom.cssが効かなくなって、急にDevToolの背景が白くなってビックリした。

Theme作ったり、あと拡張機能でStyleを当てたりすると解決できる