💻 Google Chrome のアプリモードでウェブページを開く

Google Chrome のアプリモードを使ってなんちゃって艦これ専用ブラウザを作ってみるよ。

アプリモードってなんぞ？

タブやツールバーなど表示されない、あたかもひとつのアプリケーションのように表示されるモードのこと。（と勝手に解釈。詳しくは Chrome ウェブストアで Pocket や Google Keep を入れてみよう！）

OS X 版表示例

Linux 版表示例

URL をアプリモードで開くコマンド

実行ファイルに --app=URL を指定すると URL をアプリモードで開いてくれます。

OS X の場合

open コマンドの場合

open -n -a 'Google Chrome' --args '--app=http://www.dmm.com/netgame/social/-/gadgets/=/app_id=854854/'

Google Chrome コマンドの場合

/Applications/Google\ Chrome.app/Contents/MacOS/Google\ Chrome --app="http://www.dmm.com/netgame/social/-/gadgets/=/app_id=854854/"

Linux の場合

/opt/google/chrome/google-chrome --app="http://www.dmm.com/netgame/social/-/gadgets/=/app_id=854854/"

Windows の場合

C:¥Program Files¥ あたりに実行ファイルがあるんじゃないかな………（というかみんな専ブラ使ってそう）

ランチャを作る

いちいちコマンドラインで実行するのは面倒なのでランチャを作ります。名前やアイコンはお好みで。Chrome アプリの詳細をまだ調べていないためもっと良い方法があるかもしれません。

今回、アイコンは @Kiguchi1902 さんの艦これアイコンをお借りました。

OS X の場合

osacompile や AppleScript エディタ.app でアプリケーションを作ります。Automator で作ったアプリケーションは編集するとアイコンが元に戻りますのでご注意を。

osacompile -o 艦これ.app <<\!
do shell script "open -na 'Google Chrome' --args '--app=http://www.dmm.com/netgame/social/-/gadgets/=/app_id=854854/'"
!

今回、ICNS ファイルは makeicns で作成します。MacPorts とか Homebrew とかでインストールできます。出来上がったアイコンはアプリケーションバンドル内の applet.icns に上書きコピーしてもいいし、Finder でアプリケーションバンドルのインスペクタを表示してドラッグしてもOK。

makeicns -in image.png -out applet.icns
cp applet.icns 艦これ.app/Contents/Resources/applet.icns

Linux の場合

MenuLibre や Alacarte なんかで作ります。（デスクトップ環境による）

Windows の場合

しょ、ショートカットの作成で作れるんじゃないかな………

角丸＋影付きアイコン作成レシピ

ImageMagick によるアイコンの作成。256x256 サイズのアイコンを作成します。角丸半径や透明度はお好みで。

（-composite ありのときのリスト処理忘れたのでコマンドを分けて書いています…汗）

# 角丸化
convert image.png -resize 240x240+0+0\! -alpha on \
    \( -size 240x240 xc:none -draw 'roundRectangle 0,0 239,239 24,24' \) \
    -compose DstIn -composite temp.png

# 影の追加
# note: -shadow {opacity}x{blur}+{x}+{y}
convert temp.png \
    \( +clone -background black -shadow 60x4+0+4 \) \
    +swap -background none -layers merge +repage icon.png

現在開いている URL をアプリモードで表示する（OS X 向け）

現在開いているタブをアプリモードで表示します。

tell application "Google Chrome"
    do shell script "open -na 'Google Chrome' --args '--app=" & URL of active tab of window 1 & "'"
end tell

アプリモードは幅と高さがある程度決まっているのでウィンドウ装飾付きでウェブページのスクリーンショットを撮ったりするときにいいかもしれません。例えば以下は User Agent Switcher オン・オフの例です。

Google Chrome コマンドラインオプション（Linux 版）

google-chrome(1)                 USER COMMANDS                google-chrome(1)



NAME
       google-chrome - the web browser from Google


SYNOPSIS
       google-chrome [OPTION] [PATH|URL]


DESCRIPTION
       See the Google Chrome help center for help on using the browser.

              <http://www.google.com/support/chrome/>

       This manpage only describes invocation, environment, and arguments.


OPTIONS
       Google  Chrome has hundreds of undocumented command-line flags that are
       added and removed at the whim of the  developers.   Here,  we  document
       relatively stable flags.

       --user-data-dir=DIR
              Specifies  the directory that user data (your "profile") is kept
              in.  Defaults to ~/.config/google-chrome .   Separate  instances
              of  Google  Chrome  must  use  separate  user  data directories;
              repeated invocations of google-chrome  will  reuse  an  existing
              process for a given user data directory.


       --app=URL
              Runs URL in "app mode": with no browser toolbars.


       --incognito
              Open in incognito mode.


       --proxy-server=host:port
              Specify the HTTP/SOCKS4/SOCKS5 proxy server to use for requests.
              This overrides any environment variables or settings picked  via
              the  options  dialog.   An  individual proxy server is specified
              using the format:

                [<proxy-scheme>://]<proxy-host>[:<proxy-port>]

              Where <proxy-scheme> is the protocol of the proxy server, and is
              one of:

                "http", "socks", "socks4", "socks5".

              If  the  <proxy-scheme>  is omitted, it defaults to "http". Also
              note that "socks" is equivalent to "socks5".

              Examples:

                --proxy-server="foopy:99"
                    Use the HTTP proxy "foopy:99" to load all URLs.

                --proxy-server="socks://foobar:1080"
                    Use the SOCKS v5 proxy "foobar:1080" to load all URLs.

                --proxy-server="socks4://foobar:1080"
                    Use the SOCKS v4 proxy "foobar:1080" to load all URLs.

                --proxy-server="socks5://foobar:66"
                    Use the SOCKS v5 proxy "foobar:66" to load all URLs.

              It is also possible to specify a separate proxy server for  dif‐
              ferent URL types, by prefixing the proxy server specifier with a
              URL specifier:

              Example:

                --proxy-server="https=proxy1:80;http=socks4://baz:1080"
                    Load https://* URLs using the HTTP proxy "proxy1:80".  And
              load http://*
                    URLs using the SOCKS v4 proxy "baz:1080".


       --no-proxy-server
              Disables  the proxy server.  Overrides any environment variables
              or settings picked via the options dialog.


       --proxy-auto-detect
              Autodetect proxy configuration.  Overrides any environment vari‐
              ables or settings picked via the options dialog.


       --proxy-pac-url=URL
              Specify  proxy autoconfiguration URL.  Overrides any environment
              variables or settings picked via the options dialog.


       --password-store=<basic|gnome|kwallet>
              Set the password store to use.  The default is to  automatically
              detect  based  on  the  desktop  environment.  basic selects the
              built in,  unencrypted  password  store.   gnome  selects  Gnome
              keyring.  kwallet selects (KDE) KWallet.  (Note that KWallet may
              not work reliably outside KDE.)


       --version
              Show version information.


       As a GTK+ app, Google Chrome also obeys GTK+ command-line  flags,  such
       as --display.  See the GTK documentation for more:

              <http://library.gnome.org/devel/gtk/stable/gtk-running.html>
              <http://library.gnome.org/devel/gtk/stable/gtk-x11.html>


ENVIRONMENT
       Google Chrome obeys the following environment variables:


       all_proxy
              Shorthand  for  specifying  all  of   http_proxy,   https_proxy,
              ftp_proxy


       http_proxy, https_proxy, ftp_proxy
              The  proxy servers used for HTTP, HTTPS, and FTP.  Note: because
              Gnome/KDE proxy settings may propagate into these  variables  in
              some  terminals,  this  variable  is  ignored (in preference for
              actual system proxy settings) when running under Gnome  or  KDE.
              Use  the  command-line flags to set these when you want to force
              their values.


       auto_proxy
              Specify proxy autoconfiguration.  Defined and empty autodetects;
              otherwise,  it  should be an autoconfig URL.  But see above note
              about Gnome/KDE.


       SOCKS_SERVER
              SOCKS proxy server (defaults to SOCKS v4,  also  set  SOCKS_VER‐
              SION=5 to use SOCKS v5).


       no_proxy
              Comma separated list of hosts or patterns to bypass proxying.


FILES
       ~/.config/google-chrome
              Default directory for configuration data.


       ~/.cache/google-chrome
              Default  directory  for  cache  data.   (Why?  See <http://stan‐
              dards.freedesktop.org/basedir-spec/latest/> .)


BUGS
       Bug tracker:

              http://code.google.com/p/chromium/issues/list

       Be sure to do your search within "All Issues"  before  reporting  bugs,
       and  be  sure  to pick the "Defect on Linux" template when filing a new
       one.


AUTHOR
       The Chromium team - <http://www.chromium.org>



                                                              google-chrome(1)

2014年08月17日：一部コマンドを修正

mattintosh note

技術書典に出たい人生だった…

💻 Google Chrome のアプリモードでウェブページを開く

アプリモードってなんぞ？

URL をアプリモードで開くコマンド

OS X の場合

Linux の場合

Windows の場合

ランチャを作る

OS X の場合

Linux の場合

Windows の場合

角丸＋影付きアイコン作成レシピ

現在開いている URL をアプリモードで表示する（OS X 向け）

Google Chrome コマンドラインオプション（Linux 版）