こんにちは。
\nGoogle AnalyticsのiOS版がなぜか「Temporary unavailable」で何も情報を出してくれなくなってはや1ヶ月。
\nもうiPhoneでの閲覧はあきらめてPCでどうにかしようと思い立ったものの、 ただでさえ増えがちなChromeのタブを増やしたくない 。
たくさんタブ開いちゃうとファビコンすら見えなくなって何のタブかわからなくなるんですよね。動作も重くなるので常に必要最小限のタブだけ開いておきたいんです。
\nかといってApp storeを探してみてもいいAnalyticsのアプリが見つからない。
ということでWebページをアプリ化するFluidというアプリを使用していくつかのWebサービスをアプリ化してみようと思います。
\n\n今回アプリ化したいのはGoogle AnaylticsとTrelloとGithubです。
\n早速やってきます。
\nなお動作確認は Mac OSX 10.10.5 Yosemite にて行っています。
\n\n\n
Fluidはこちらのページの[Free Download]からダウンロードできます。
\n古めなテイストのページですがきちんと動きました。ツールは見かけによらないですね。
Fluidを起動すると以下の様な画面になると思います
\n| 項目 | \n意味 | \n
|---|---|
| URL: | \nアプリ化するURLを入力する | \n
| Name: | \nアプリ名 | \n
| Location: | \nアプリを保存する場所。特に理由がない限りデフォルトでよいはず | \n
| Icon: | \nアプリのアイコン。デフォルトではWebサイトのファビコンを使うと書かれているがうまくいかないことが多い。 | \n
おっ、ファビコン使ってくれんだ便利じゃ〜んと思っていたのですが、だいたいうまく行きませんでした。なぜ。
\n失敗するとこのようなアイコンになり、何開いてんだか全くわかりません。
アイコンがないとパット見でわからずモチベも上がらないので、アイコンは作ります。
\nImage2iconというアプリを使用しました。
\n過去に.icnsをPNGで書き出す方法については書きましたが、逆はできないようだったのでアプリを利用します。
App storeからダウンロードして起動します。
\nこんな画面になれば想定通りです。
\n画像をドロップすると以下の様な画面になります。いろいろな形式・装飾でエクスポートできるので便利です。
Export→ICNSで保存すれば.icnsファイルが作れるので、そのパスをFluidのIconのところに指定します。
\n以下の内容はこれらのアプリを使用してアプリを作っていきます。
各サービスのロゴはブランドガイドラインのページや画像検索で手に入るので割愛します。好みの画像をググってください。
\nいかがでしょうか。ブラウザのタブの1つではなく、単独のアプリとして起動しています。
\njsもざっくり触った感じでは動いていました。中身見てませんが、おそらく単にWebViewのアプリを吐き出してるだけだと思われます。
Chromeで常に開いてるアプリはアプリ化してしまったほうが楽な気がします。Gmailとかも。
\n他にもCommand + Tabの切り替えでアプリが切り替えられるので、捗りそうな予感がします。
他にも色々とアプリ化したら便利そうなものがあるので、今後試してみます。
","timeToRead":4,"frontmatter":{"title":"Fluidで任意のWebページをアプリ化する","tags":["Google Analytics","Mac"],"date":"December 17, 2015","featuredImage":{"childImageSharp":{"fluid":{"tracedSVG":"data:image/svg+xml,%3csvg%20xmlns='http://www.w3.org/2000/svg'%20width='400'%20height='183'%20viewBox='0%200%20400%20183'%20preserveAspectRatio='none'%3e%3cpath%20d='M91%2060l-2%202-1%2028%201%2031c2%206%204%206%2036%206h28l3-3%202-3V62l-2-3-3-2H93l-2%203M0%2089v29l4-1c5-2%205-5%205-29%200-22%200-26-2-24-1%201-1%201-1-1l-1-3-1%201H3l-3-1v29m181-25l-1%204-2%207c-4%208%200%2017%209%2019l4%202-2%202c-3%203-4%203-7-1-2-3-6-4-6-3%200%202%208%209%2010%209%203%200%203%200%203%203l-1%205-1%201c0%202%203%201%205-1%201-1%201-1%201%201-1%203%201%204%203%201h2l3%202c2%200%202%200%201-1l-1-7v-5l1%204%202%206c2%202%204%201%202-1l-1-9-1-7h4c7-2%2011-13%207-20l-2-8c0-4-1-4-5-3-5%202-18%202-23%200h-4m-82%203c-3%203-3%2043%200%2045%202%203%2016%203%2018%200%203-2%203-43%200-45-3-3-16-3-18%200m31-1c-3%201-3%2027-1%2029l11%201h9V82c0-13%200-15-2-16h-17m262%2013l-1%2023v11h9V69h-3c-2%201-3%200-3-1l-2%2011M17%2093l1%2026h64V67H17v26m322-19l-14%202c-1%200%201%2015%203%2018%206%2015%2026%2015%2033%201%202-4%202-16%200-22-1-3-3-3-22%201m-154%207c-2%202-2%207%200%209%203%204%2018%205%2024%202%203-2%203-9%200-11-3-3-22-3-24%200m164%204c-4%205-4%205-9%201-3-2-6-2-7%200%200%202%2012%2010%2013%209%203-1%2010-11%209-13-2-2-4-1-6%203m-61%2015l-17%2017-8-9-8-8-9%208c-9%209-9%2010-9%2014v4h69v-22l-1-21-17%2017m69%2013l-5%201c-3%201-4%201-3%203a1275%201275%200%200023-1c-8%201-8%201-8-1-1-2-4-3-7-2'%20fill='%23d3d3d3'%20fill-rule='evenodd'/%3e%3c/svg%3e","aspectRatio":2.183006535947712,"src":"/static/644031dc0365832a2087cb77f3c0dd02/4b9ef/featured-image.png","srcSet":"/static/644031dc0365832a2087cb77f3c0dd02/1ec58/featured-image.png 334w,\n/static/644031dc0365832a2087cb77f3c0dd02/ccb4a/featured-image.png 668w,\n/static/644031dc0365832a2087cb77f3c0dd02/4b9ef/featured-image.png 1093w","srcWebp":"/static/644031dc0365832a2087cb77f3c0dd02/fd5ef/featured-image.webp","srcSetWebp":"/static/644031dc0365832a2087cb77f3c0dd02/cd98f/featured-image.webp 334w,\n/static/644031dc0365832a2087cb77f3c0dd02/7535d/featured-image.webp 668w,\n/static/644031dc0365832a2087cb77f3c0dd02/fd5ef/featured-image.webp 1093w","sizes":"(max-width: 1093px) 100vw, 1093px"}}}}}},"pageContext":{"slug":"/how-to-create-native-apps-with-fluid-from-web-apps/","previous":{"fields":{"slug":"/how-to-download-with-a-tag-without-file-server/"},"frontmatter":{"title":"aタグのdownload属性でサーバを介さずにファイルダウンロードする","tags":["HTML5 Canvas"]}},"next":{"fields":{"slug":"/write-interface-of-modern-template-engine-in-php/"},"frontmatter":{"title":"昨今のPHPのテンプレートエンジンについて調べて共通インタフェースを作った","tags":["Github","PHP","Template Engine"]}}}}, "staticQueryHashes": ["2585454260","2954598359"]}