LoginSignup
3

More than 3 years have passed since last update.

macでwebページをアプリケーションっぽく呼べるようにする

Posted at

自分はmacでSpotlightをよく使う。ふと、よくアクセスするゲームとかそういったものも1つのアプリケーション/ウィンドウとしてspotlightから呼び出したいと思った。そこで過去に書いた記事:JXAを使ってChrome&TwitterWebでツイートを応用してAutomatorでwebサービスをアプリケーションっぽくしてみた

できたもの

Safariでシャニマスを開く shiny.app
mov.gif

JavaScriptを書く

作業としては以下

  1. Safariをアクティブに
  2. ツールバーやナビゲーションバーなしのウィンドウを作成
  3. 必要に応じて経由したウィンドウを閉じる

できたのがこれ

script.js
function openAppWindow(obj){
    var scr = "window.open('"+(obj.url)+"', '"+(obj.name)+"', 'top= "+(obj.displayWidth-484)+", left="+(obj.displayHeight)+", width=820, height=484, menubar=no, toolbar=no, scrollbars=yes')";
    obj.app.doJavaScript(scr, {in:obj.app.windows[0].currentTab()});
}

var app = Application("Safari.app");
app.includeStandardAdditions = true;
app.activate();
var window;
var windowname;
var windowCloseFlag = false;
//現在開いているウィンドウがないときのみ、jsを実行するウィンドウを作成する
if(app.windows.length == 0){
    window = app.Document().make();
    windowname = window.name();//あとで破棄できるよう名前を控える
    windowCloseFlag = true; 
}

window = app.windows[0];

var obj = {app:app};
obj.url = "https://shinycolors.enza.fun/home";
obj.name = "shinycolors"
obj.displayWidth = app.doJavaScript('window.parent.screen.width', {in:window.currentTab()});
obj.displayHeight = app.doJavaScript('window.parent.screen.height', {in:window.currentTab()});

openAppWindow(obj);

if(windowCloseFlag){
    app.windows[windowname].close();//名前を控えたウィンドウを破棄する
}

これらを書くのにはScriptEditor.appを使うと⌘+Rですぐに試せていい感じ。ついでに⌘+Shift+Oで対応するアプリケーションの関数/変数の辞書を開くこともできる。見やすくはないけど。各ブラウザの操作と持っている変数の対応は前回同様「JXAでSafari, Chrome, Firefoxを操作する際の違い」を参考にした。ブラウザごとに若干変数名やjsの実行の仕方が違うので注意。

Automatorでアプリケーションにする

Automatorを起動して、新規作成→アプリケーションを選択。左側の「アクション」の一覧からユーティリティ→JavaScriptを実行をD&Dで右のフィールドへ。出てきたテキストボックスの中に作ったスクリプトをコピペする。
スクリーンショット 2019-05-08 14.46.22.png
できたら右上の「実行」で正しく動くか確認して、好きな名前をつけて/Application以下に保存することで完成。/Applicationに置けばLaunchpad派の人もすぐ呼べるようになると思う。

おまけ

作ったアプリケーションのアイコンを変えたい場合は以下の手順で変更できる。

  1. アイコンにしたい画像をプレビュー.appで開き、メニューから編集→コピーする
  2. アイコンを変えたいアプリケーションのディレクトリで対象を選択し情報を見る(⌘+i)
  3. 「{ファイル名}の情報」ウィンドウのアイコン部分をクリックし、ペースト(⌘+v)する

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
3