改訂第5版 JavaScript ポケットリファレンスには、IEのhistory API対応バージョンが書かれていなかったんだけど、全バージョン対応していないのだろうか？
下のようなプログラムで検証してみる。
console.log(window.history.pushState)どうやら上のプログラムでは、IE9まではundefinedが返ってくる。
ちょっと触る機会があったので、試してみた。
<script>
jQuery(function($){
if(window.history && window.history.pushState){
var $main = $('#main');
$('#toBar').on('click',function(e){
e.preventDefault();
history.pushState(
'',
null,
location.protocol + '//' + location.host + '/' + 'bar.html'
);
$main.text('ただいま、bar.html');
});
$('#toFoo').on('click',function(e){
e.preventDefault();
history.pushState(
'',
null,
location.protocol + '//' + location.host + '/' + 'foo.html'
);
$main.text('ただいま、foo.html');
});
$('#toSample').on('click',function(e){
e.preventDefault();
history.pushState(
'',
null,
location.protocol + '//' + location.host + '/' + 'sample.html'
);
$main.text('ただいま、sample.html');
});
}
});
</script>
<div id="main">ただいま、sample.htmlです。</div>
<div id="toBar">クリック後、bar.htmlになります。</div>
<div id="toFoo">クリック後、foo.htmlになります。</div>
<div id="toSample">元に戻します！！</div>これは、すごい。前回、_.templateメソッドについて書きました。
デフォルトだと
<%= name %>がレンダリングされるのですが、この部分を_.templateSettingsを使って変更することができます。
_.templateSettings = {
interpolate: /\{\{(.+?)\}\}/g
};なんてすると、{{ name }}でレンダリングしてくれるようになったりします。ちょっと前に、WhatsAppのURL Schemeについて書いたので、今日は、LINEのURL Schemeについて。
こんな感じで呼び出すことができます。
NSString *url = [NSString stringWithFormat:@"line://msg/text/%@",@"test"]; [[UIApplication sharedApplication] openURL:[NSURL URLWithString:url]];上を実行すれば、アプリからLINEが立ち上がります。
昨日、ModulesAPIを使うためのPerformance Settings Migrationについて書きました。
そこで、今日は、Modulesの登録方法について
デフォルトのapp.yaml以外に、hoge.yamlを作るとする。
application: application-name module: hoge version: 1 runtime: python27 instance_class: B8 api_version: 1 threadsafe: true basic_scaling: max_instances: 11 idle_timeout: 10m handlers: - url: / script: home.appModulesを見ると、handlersパラメータなどがなかったのですが、普通に記述することができるようです。
appcfg update app.yamlまでのディレクトリ/app.yaml hoge.yamlまでのディレクトリ/hoge.yamlとしてEnterでおｋです。
どうやら、Google App Engineは、Module単位でインスタンスを管理できるようになったようだ。
そこで、上のようにするには、現状のままじゃーいけないようで、app.yamlに下の記述を追加しないといけないようだ。
で、書いた後、「Migrate Settings」というボタンを押して、次に「Yes,migrate」ボタンを押す
すんごく下にあったので、気がつくのに相当時間を要した。この辺の配慮が若干欠けているんだよなー。
ボタンを押した後、Deployすればおk
以降は、ModulesAPIを使った開発ができるぞと。
ちょっと前に名前付taskQueueの登録について書きました。
で、実際のログを見た結果、このままだとFrontend Instancesが反応してしまいます。
そこで、Backends Instances(現、Modules)にTaskの登録する方法について調べてみました。
と言っても、名前付taskQueueにパラメータを追加するだけでおｋ
from google.appengine.api import taskqueue
taskqueue.add(
url='/bar',
params={'key': key},
queue_name="hoge",
target="foo"
)これを実行することによって、foo.app-id.appspot.comがリクエストに答えてくれます。確か、前のバージョンまでiOS5のシミュレーターがあったなんだけど、今回からなくなってしまった？
Build Runするときに、mobile simulatorの項目でiOS5がDLできたんだけど、今ねーよー。
もう、サポートしないってことなのだろうか？
大規模トランザクションを処理するためにBackends APIを勉強しようと思っていたのですが、どうやら、今年の3月にdeprecateになるようだ。
代替案としてModules APIを使えとのことなので、これから、こちらを勉強しようかなと。The Backend API is deprecated as of March 13, 2014. Although Google will continue to support the Backend API in accordance with our terms of service, it is strongly recommended that all new applications use the Modules API instead.
via:Backends Python API Overview
hammer.jsという存在を知ったので、その使い方について調査。
マニュアルを読むと、下のように実装すればおｋとのこと。
<style>
html,body{
height:1000px;
margin:0;
padding:0;
}
</style>
<script src="//cdnjs.cloudflare.com/ajax/libs/hammer.js/1.0.6/hammer.min.js"></script>
<script>
Zepto(function($){
Hammer(document.getElementById('container')).on("swipe", function() {
console.log('swipe');
});
Hammer(document.getElementById('container')).on("swipeup", function() {
console.log('swipeup');
});
Hammer(document.getElementById('container')).on("swipedown", function() {
console.log('swipedown');
});
});
</script>
<body id="container"></body>
これ、すごいことにブラウザでも動きました(chromeで試しました。)。遅まきながらModernizrについて、少し、調査してみた。
どうやら、ブラウザ毎に特定の機能をサポートしているか確認できるjsのようだ。
<html lang="en" class="no-js"> <head> <meta charset="utf-8"> <script src="http://ajax.aspnetcdn.com/ajax/modernizr/modernizr-2.7.2.js"></script> <script> console.log(Modernizr.canvas) </script> </head> <body> </body> </html>ポイントは、htmlタグにclass名の「no-js」を入れる必要があるということ。
デフォルトのZepto.jsでは、fadeIn、fadeOutメソッドをサポートしていない。
上記のメソッドを使うためには、Githubに公開されているfx_methods.jsを使えばおｋ。
<script src="./zepto.min.js"></script>
<script src="./fx_methods.js"></script>
<script>
Zepto(function($){
$('#hoge').fadeOut(300,function(){
});
});
</script>確かにできた。昨日、Warmup requestsの設定方法を書いたのですが、どうやら、それだけだと、Logに大量の警告がでて、あまりよろしくない。
そこで、どうすればいいのかというと、app.yamlで下のように設定すればいい
handlers: - url: /_ah/warmup script: warmup.app一方で、warmup.pyは下のように実装する
#!/usr/bin/env python
# -*- coding: utf-8 -*-
import webapp2
class Hoge(webapp2.RequestHandler):
def get(self):
pass
app = webapp2.WSGIApplication([
('/_ah/warmup', Hoge)
],debug=False
)こうすれば、とりあえず、警告はでなくなります。管理画面からIdle Instancesの設定ができるんだけど、そのためには、app.yamlでWarmup requestsを設定する必要があります。
inbound_services: - warmupこれ、なんで、わざわざ入れなくちゃーいけないんだろうか？
読了
死刑 人は人を殺せる。でも人は、人を救いたいとも思う
森達也
ここまで死刑について考えさせられたことはなかった。プロローグ
via:目次
第一章 迷宮への入口
第二章 隠される理由
第三章 軋むシステム
第四章 元死刑囚が訴えること
第五章 最期に触れる
第六章 償えない罪
エピローグ
森達也『死刑』文庫版が発売されています。 光市母子殺害事件犯人との対話を新たに書き下ろし。 〈生きていてはいけない人っているのだろうか？論理だけでなく情緒の領域にまで踏み込んだ類書なきルポ〉－角川書店。 装画は会田誠さんの『灰色の山』（部分）。ぜひお手にとってみてください。
— 森達也情報室 (@MoriTatsuyaInfo) 2013, 6月 1一般的にエクステンションはフォルダをzip化して配布するわけだが、scriptやhtmlで、フォルダの中にある画像を参照したい場合があります。
そんなときは、下のようにすればおｋ
images/icon_128.pngこれは、manifest.jsonがあるフォルダにimagesフォルダがあり、さらにその中にあるicon_128.pngという画像を参照しています。
JSONの書き方もちょっと違うようだ。
hoge = bar:"bar" foo:"foo"コンパイルするとこうなる。
// Generated by CoffeeScript 1.5.0
var hoge;
hoge = {
bar: "bar",
foo: "foo"
};
coffeescriptではswitch文が用意されているのですが、caseではなくwhenで記述するようだ。
実際に組んでみる。
hoge = "foo"
switch hoge
when "foo"
console.log "this is foo"
when "bar"
console.log "this is bar"
else
console.log "this is not bar and foo"
これをコンパイルした結果は下のようになります。// Generated by CoffeeScript 1.5.0
var hoge;
hoge = "foo";
switch (hoge) {
case "foo":
console.log("this is foo");
break;
case "bar":
console.log("this is bar");
break;
default:
console.log("this is not bar and foo");
}ちゃんと出力されていますね。下のように組めば新規のtabを生成することができる。
chrome.tabs.create({
'url':'http://yahoo.co.jp',
'active':true
});
canvasタグにURL画像を表示するには下記のように実装さればおｋのようだ。
var img = new Image();
img.src= 'http://hoge.com/img.png';
var $canvas = $('<canvas></canvas>');
$('body').append($canvas);
var c = $('canvas')[0];
var ctx = c.getContext('2d');
ctx.drawImage(img, 0, 0);
任意のtabをアクティブにするにはどうすればいいだろうか？
ずばり下のように組めばおｋ
chrome.tabs.update(tabid, {'active':true});第一引数のtabidはtabのidです。ドメインが設定されているcookieは一般的には取得できないようになっているのですが、どうやら拡張機能では取得できるみたいです。
//manifest.json
{
"manifest_version": 2,
"name":"hoge",
"version":"0.1",
"icons":{
"16":"images/icon_16.png",
"48":"images/icon_48.png",
"128":"images/icon_128.png"
},
"background": {
"scripts": ["eventPage.js"],
"persistent": false
},
"permissions": [
"cookies",
"http://*.bar.com/*"
]
}
manifest.jsonではパーミッションでcookiesとドメインを設定するのがミソchrome.cookies.get({
url:'http://www.bar.com',
name:'foo'
}, function(cookie){
//cookieが取得できた場合
if(cookie){
}
});cookieが取得できなかった場合は、nullが返却されます。ある一定の時間が経過したらJSの処理を行うように実装するにはどうすればいいのだろうか？
一般的には、setTimeoutやsetIntervalを使うんだけど、拡張機能の場合は、alarmsというAPIが用意されている。
//manifest.json
{
"manifest_version": 2,
"name":"hoge",
"version":"0.1",
"icons":{
"16":"images/icon_16.png",
"48":"images/icon_48.png",
"128":"images/icon_128.png"
},
"background": {
"scripts": ["eventPage.js"],
"persistent": false
},
"permissions": [
"alarms"
]
}manifest.jsonではパーミッションでalarmsを設定するのがミソ//アラームの登録
chrome.alarms.create('foo',{
'periodInMinutes':1
});
//アラームが発生した場合の処理
chrome.alarms.onAlarm.addListener(function(alarm){
});
delayInMinutesというプロパティもあるのですが、periodInMinutesだけ設定されている場合、periodInMinutes間隔で処理が発生します。以下のようなmanifest.jsonがあるとする。
{
"manifest_version": 2,
"name":"hoge",
"version":"0.1",
"icons":{
"16":"images/icon_16.png",
"48":"images/icon_48.png",
"128":"images/icon_128.png"
},
"browser_action": {
"default_icon": "images/icon_19.png"
},
"background": {
"scripts": ["eventPage.js"],
"persistent": false
},
"permissions": [
"tabs"
]
}そこで、eventPage.jsにjQueryを使いたい場合は、どうすればいいだろうか？"background": { "scripts": ["jquery.js","background.js"] },みたいにすればいいことがわかる。{
"manifest_version": 2,
"name":"hoge",
"version":"0.1",
"icons":{
"16":"images/icon_16.png",
"48":"images/icon_48.png",
"128":"images/icon_128.png"
},
"browser_action": {
"default_icon": "images/icon_19.png"
},
"background": {
"scripts": ["jquery.js","eventPage.js"],
"persistent": false
},
"permissions": [
"tabs"
]
}tab情報を取得する方法は下のようになります。
//eventPage.js
chrome.tabs.query({}, function(tabs){
//表示されているtabの個数
var nTabLen = tabs.length;
var sURL,oTab;
for(var i=0;i<nTabLen;i++){
oTab = tabs[i];
//tabのURL
sURL = oTab.url;
}
return;
});上だけでおｋなのでとっても簡単。最後にmanifest.jsonを。{
"manifest_version": 2,
"name":"hoge",
"version":"0.1",
"icons":{
"16":"images/icon_16.png",
"48":"images/icon_48.png",
"128":"images/icon_128.png"
},
"browser_action": {
"default_icon": "images/icon_19.png"
},
"background": {
"scripts": ["eventPage.js"],
"persistent": false
},
"permissions": [
"tabs"
]
}permissionsキーのtab設定がキモかな。chromeのextensionsで表示されるブラウザアクションアイコンがクリックされた時のイベントを登録したい場合は下のように実装すればおｋ
//eventPage.js
chrome.browserAction.onClicked.addListener(function(tab) {
})上だけでおｋなのでとっても簡単。最後にmanifest.jsonを。/* manifest.json */
{
"manifest_version": 2,
"name":"hoge",
"version":"0.1",
"icons":{
"16":"images/icon_16.png",
"48":"images/icon_48.png",
"128":"images/icon_128.png"
},
"browser_action": {
"default_icon": "images/icon_19.png"
},
"background": {
"scripts": ["eventPage.js"],
"persistent": false
}
}
ちょっと今、chromeのextensionsを触っているんだけど、extensionがインストールされた場合に、イベントを登録したいときのプログラムをチェックしました。
//eventPage.js
chrome.runtime.onInstalled.addListener(function(details){
//エクステンションがインストールされた場合
if(details.reason == 'install'){
//エクステンションがアップデートされた場合
}else if(details.reason == 'update'){
//chromeがアップデートされた場合
}else if(details.reason == 'chrome_update'){
}
});onloadみたいに使えるかもです。/* manifest.json */
{
"manifest_version": 2,
"name":"hoge",
"version":"0.1",
"background": {
"scripts": ["eventPage.js"],
"persistent": false
},
}
前回、Task Queueの登録方法について書きました。
で、タスクに名前をつけてpushすることができるので、その方法について。
from google.appengine.api import taskqueue
taskqueue.add(url='/bar', params={'key': key},queue_name="hoge")実装方法は、前回と大きな違いはなく、queue_nameパラメータを設定すればおｋtotal_storage_limit: 1G
queue:
- name: hoge
rate: 30/m
retry_parameters:
task_retry_limit: 3
こうしてまとめておけば名前付きqueueをガシガシと作れるぞと今回は、classの作成方法について
左上のアイコンをクリックしてclassを選択(下図参照)
次にクラス名を入力するんだけど、「public static void main」にもチェックを入れて作成
これも意外とあっさりできた。
