読者です 読者をやめる 読者になる 読者になる

ShikousakuGo

MacBookとChromebookでおもしろいものをつくりたい

【日記】Prisma

感想 日記

写真を加工して綺麗にするタイプのスマホアプリが好き.インスタグラム,Google Photos,ミイルのフィルターとかが最高.最近ではツイッターの画像編集も面白い.今日はPrismaというアプリを入れてみた.

Prisma - Google Play の Android アプリ

写真を渡して好きな絵画フィルターを選ぶと,写真をアート風に仕上げてくれる.以前実験した

ようなことが高速でできる.

メインの変換処理はサーバ側で行われているようなので,プライベートすぎない写真で楽しむとよいかもしれない.

たとえば,左の写真が右のようになる.

f:id:daiiz:20160828040601j:plain:h240 f:id:daiiz:20160828040608j:plain:h240
f:id:daiiz:20160828040817j:plain:h240 f:id:daiiz:20160828040652j:plain:h240

【GAE/Python】Google App EngineのデータストアでのURLセーフキー, id, エンティティの種類

google app engine python

Google App Engine のデータストア(Cloud Datastore)に保存されるアイテム(エンティティ)には,「エンティティの種類」と「id」が与えられている.

例えば,ユーザー情報を管理するデータモデルを

from google.appengine.ext import db

class User (db.Model): 
    first_name = db.StringProperty()
    last_name  = db.StringProperty()
    user_name  = db.StringProperty()

のように定義して,これのインスタンスをデータストアに保存した場合には「エンティティの種類」はUserとなる.idは保存時に自動で採番される.

エンティティの種類, idを取得する方法

プログラム中でエンティティeの情報を取得したい場合は,関数keyを使えばよい.先のものとは別の例での実行結果は以下のとおり.

print(e.key())
# -> datastore_types.Key.from_path(u'Screenshot', 5348024557502464L, _app=u'dev~svgscreenshot')

print("%s" % str(s.key().id()))  # エンティティのid
# -> 5348024557502464

print("%s" % s.key().kind())  # エンティティの種類
# -> Screenshot

エンティティの種類やidを取得できると,エンティティ固有内容をシェアするウェブページのURLを構成する場合に役立つ.

f:id:daiiz:20160827035845p:plain:h70

URLセーフキー

上記例での e.key() で得られた結果を文字列化すると,以下のように,

print("%s" % str(e.key()))
# -> ahFkZXZ-c3Znc2NyZWVuc2hvdHIXCxIKU2NyZWVuc2hvdBiAgICAgIDACQw

少々長めのキーが得られる.これは何か?
Google Cloud Consoleの「データストア」の項目での説明によると,上記で得られた文字列は「URL セーフキー」と呼ばれるものらしく,下記引用のような説明が書かれていた.

これはエンティティの種類と ID を base64 でエンコードした、シリアライズ バージョンです。 Cloud Console、App Engine クライアント ライブラリ、Cloud Datastore NDB クライアント ライブラリの URL セーフキーを使用できます。 警告: URL セーフキーは暗号化されていません。種類や ID に機密データが含まれている場合、URL セーフキーから簡単に解読できるので注意してください。

これを読む限りだと,URLセーフキーを解読(base64デコード)すれば「エンティティの種類」と「id」を取得することができるようなので,挑戦してみる.

url_safe_key = 'ahFkZXZ-c3Znc2NyZWVuc2hvdHIXCxIKU2NyZWVuc2hvdBiAgICAgIDACQw'
decoded_key  = base64.urlsafe_b64decode(url_safe_key + ('=' * (4 - len(url_safe_key) % 4)))
# -> 'j\x11dev~svgscreenshotr\x17\x0b\x12\nScreenshot\x18\x80\x80\x80\x80\x80\x80\xc0\t\x0c'

16進表記と制御文字の変換は,http://www.oocities.org/dtmcbride/tech/charsets/ascii.html を眺めるとわかる.

  • \x11: ^Q (Default UNIX START char)
  • dev~svgscreenshot: アプリ名(svgscreenshotのローカル開発環境)
  • \x17: ^W (End of transmission block)
  • \x0b\x12 ^K (Vertical tab) ^R
  • \n: 改行
  • Screenshot: エンティティの種類
  • \x18: ^X (Cancel)
  • \x80\x80\x80\x80\x80\x80\xc0: おそらくidを表している?(正解id = 5348024557502464 = 128 ^ 6 + 1216.128は \x80 の10進表記で,6は\x80の出現回数?.1216の出処が不明.\xc0未使用)
  • \t: タブ
  • \x0c: ^L (Form feed)

エンティティidがわからない...
このあたりの解読方法について,上手くいきそうな手法をご存知の方がいれば教えてください!!

【日記】調布の美味しいカレー屋

日記

調布でカレーが食べたくなったら必ずここに行く.RAJA(ラージャ)というインド・ネパール料理店.

インド・ネパール料理店 ラージャ Raja メニュー

昼時のランチセットしか食べたことがないので,ディナーメニューも食べたい. ランチではナンがおかわり自由.ナン大好きなので嬉しい.一枚あたりがすごく大きので,大好きでも2枚が限界. メニューを見たところサフランライスとかブリヤニもあるらしいので挑戦してみたい.

カレーは白米派という人は,向かいにCoCo壱番屋がある.

CoCo壱番屋 京王調布駅北口店(メニュー/地図) - ぐるなび

これまでに撮ったRAJAのカレー写真集.クリックするとミイルに移動.

http://miil.me/p/7ek2c http://miil.me/p/7ek2o http://miil.me/p/7ek30 http://miil.me/p/7mbap http://miil.me/p/7yfyc http://miil.me/p/80tup http://miil.me/p/8eyfh http://miil.me/p/8wykq

結構あった.

Chrome拡張機能でカッコいいポップアップウィンドウを開く

chrome

ブラウザでポップアップ画面を開くには

window.open('https://www.google.co.jp', '', 'location=no, width=400, height=300');

と書く.引数は左から順に,開くページのURL, ウィンドウ名, オプション文字列となっている.第3引数を見ると分かるように,アドレスバーlocationは非表示にするように要求している.しかし,これをChromeで実行すると,

f:id:daiiz:20160825003113p:plain

のように必ずアドレスバー付きで表示される.何のサイトにアクセスしているかを分かりやすくする配慮だと思うが,ウェブアプリの一機能として開くサブウィンドウだった場合,格好悪い.

f:id:daiiz:20160309005235p:plain:h56

Chrome拡張機能*1のAPIには,chrome.windows.createというものがある.これはwindow.openと用途が似ていて拡張機能でサブウィンドウを開くために使ったりする.上のやつと同じことをするためには,

chrome.windows.create({
    url: 'https://www.google.co.jp', 
    type: 'popup',
    width: 400, 
    height: 300
});

こちらのAPIのオプションはJSONで,また,ウィンドウタイプtypeに "popup" を与える. これを実行すると,

f:id:daiiz:20160825004905p:plain

というふうになり,アドレスバーは表示されなかった.格好良い.

まとめ

  • Chromeでサブウィンドウ画面を開く場合は,嫌でもアドレスバーは付いてきて消すことはできない.ウェブサイトでサブウィンドウを開くときは,格好悪いけれど諦めるしか無い.
  • Chrome拡張機能でサブウィンドウを開くときは,window.openを使うよりもchrome.windows.createを使うと格好良くできる

できればウェブサイトでも格好良く開きたい.

*1:先日廃止が発表された「Chromeアプリ」とは別物!

【日記】貯金を始めた

日記

研究室の友人からチップスターの空き箱を貰ったので,小銭を貯めていくことにした.MacBook Pro購入のための貯金とか言ったけど,きっとみんなでジュースとか買うときに使ってしまうと思う.コピー代とかにも使えそう.

現在,120円です.

【日記】考えごと木

日記

ここのところ,自分のなかで起きている問題.

プログラム書いたり,部屋の片付けをしていたり,といったやるべき作業があるときに考えごとを始めるとずっと考え続けてしまう事態が多発している. 「考えごと木」の「考えごとノード」が考えごとを無限に展開しているような感じで,考えごとが考えごとをさらに生み出していく.

連想ゲーム形式で考えごとをしていくので,考えごと木はどんどん深くなっていく. 深さが浅い考えごとは,直前の作業に密接に関連することだけど,ある一定の深さを超えると,本題と関係ないトピックの考えごとノードが混ざってくる.

関係ないトピックというのは,

  • やりたいこと,つくってみたいもの,突然思いついたアイデアなど自分の興味があるもの

であるかもしくは

  • いまやっている作業とは別に,依頼されていた仕事,課題など締め切りが迫っているもの

であることが多い.

前者の場合は,連想ゲームが楽しくてノードの展開が止まらない. 後者の場合は,プレッシャーが脳を圧迫して,考えごと木を処理する容量が足りなくなる*1. どちらの場合も,考えごと木の解決が終わらずに疲れ果ててしまい,作業には戻れない.

最近試して比較的上手くいっている対処法として,考えごと木に違うネタが混ざり始めたら強制的に休憩するという超シンプル技で凌いでいる.

*1:こちらの方が重症

Windows、Mac、LinuxでChromeアプリが廃止される! 開発者はどうすればよいか?

驚いた

どういうことか

Chrome OS以外のOSでは,Chromeアプリ(Chrome Packaged Apps と Chrome Hosted Apps)が2018年までに廃止されるそうです.

jp.techcrunch.com

Chromeアプリとは,Chromeのブックマークバーの左隅にある f:id:daiiz:20160821021247p:plain をクリックして開いた先のページ*1で一覧されているアプリたちのこと.Chromium Blog のポストによれば,これらのアプリは

  • 2016 末〜: Chrome OSユーザー以外の,Chromeアプリの新規出品は不可になる.すでに公開済みのものについては,どのOSからでも更新可能.
  • 2017 後半: Windows, Mac, Linux ユーザーに対してはChromeウェブストアでChromeアプリが表示されなくなる.拡張機能とテーマは引き続き提供される.
  • 2018 初め: Windows, Mac, Linux ユーザーはChromeアプリを使用できなくなる.

のようなスケジュールで段階的に廃止される.

スポンサーリンク
f:id:daiiz:20160304231004p:plain:h34 f:id:daiiz:20160304231004p:plain:h34 f:id:daiiz:20160304231004p:plain:h34
ここからは開発者向け情報

どうするか

このニュースが発表されたChromium Blog の記事のタイトルが『From Chrome Apps to the Web』であった通り,ウェブアプリ化することが推奨されているように思える. 昔に比べて充実してきたブラウザAPI や Service worker,web push を使って Progressive Web Apps を作ろうよという感じで書かれていた.

Transitioning from Chrome apps on Windows, Mac, and Linux - Google Chrome

というページも用意されていて,Chromeアプリの移行について丁寧に書かれている.このページでは以下のような選択肢が挙げられている.

  • Build a web app

    • Progressive Web Apps を構築する方法.手元にあるChromeアプリをそのままウェブアプリに変換してくれるツール「Caterpillar」も提供されている.
    • 自分のChromeアプリをウェブアプリに置き換えるにあたってブラウザAPIでは不十分だと思う部分があれば,それを送信できるフォームも設けられている.
  • Build an extension-enhanced web page

    • Chrome拡張機能とウェブアプリの合わせ技で提供する方法.ブラウザAPIでは不十分な点を拡張機能APIで補う作戦.
    • これまで通り,拡張機能とウェブサイトを連携させるMessage Passingの技術が使える.
  • Build an extension

    • ChromeアプリをChrome拡張機能に変更する方法
    • Browser actionを使ってブラウザ上に小窓を表示させることができる.
  • Build a native app

    • PCにインストールするタイプのネイティブアプリを構築する方法.
    • Electoron」や「NW.js 」などのフレームワークを使えば,Chromeアプリと同じHTML+JavaScriptでデスクトップアプリを作れる.

ひとまずこんな感じ.

追記

僕もいくつかChrome アプリを開発してウェブストアに公開しているので,これから徐々に移行作業をしていきます.以降の方針や,作業の様子も記事にする予定です.(2016/08/22 15:00)

*1:chrome://apps/

【日記】Cordovaアプリでアプリ内課金を実装したい

最近はCordovaでAndroidアプリをつくっている.クライアント側はウェブ技術(HTMLとJavaScript)だけで作れるので,新たに勉強することはあまりない.

しっかりしたスマホアプリを作るとなると,JavaとかSwiftとかで書くのがメジャーだと思う.なので,Cordovaではできないこと(カバーしきれていない機能)も多いのではないかと少々不安がある.でも,いまのところは大きな問題もなく動いているので安心.

次回の作業では下記ページあたりを参考にしながら,アプリ内でアイテムやポイントを購入する「アプリ内課金」を実装してみたい.

さっきまで完全に忘れていたけれど,ふたたびMonacaを使うのもありかもしれない.Monacaは,Cordovaでのアプリ作りサポートしてくれる便利なウェブサービスで,はじめてのCordova入門のときにお世話になった.

このブログでも何度か紹介したことのある「Monaca」というサービスでは、アプリの開発者はブラウザIDE上でHTMLやJavaScriptを書くだけで良く、各スマホOS向けのCordovaによるビルドはmonacaがクラウド上で行ってくれます。このサービスは非常に便利なので手放せません。

ハイブリッドアプリの開発 - ShikousakuGo

プラグインをどこまでサポートしてくれるのかも調べておきたい.

本日の一品

f:id:daiiz:20160819023021j:plain:w300
ジョナサンのブルベリーソフトクリーム美味しいので是非どうぞ