2016/03/31

[Python][Jinja2]変数セットを行う

Jinja 2を使って変数設定を行うには、どうすればいいのだろうか?

マニュアルのAssignmentsの部分を読むと、

{% set hoge = 1 %}
で設定することができる。

2016/03/30

[Mac OS X]El CapitanでApacheのディレクトリを変更

Apacheのディレクトリを変更を変更するにはどうすればいいのだろうか?

OS X El Capitan で localhost を接続する方法:悪戦苦闘メモ。(まあ、だいたいてこずるw)

で確認すると、
/private/etc/apache2/httpd.conf

DocumentRoot "/Library/WebServer/Documents"

<Directory "/Library/WebServer/Documents">
を修正すればおk

2016/03/29

[Mac OS X]El CapitanでApache停止

昨日のエントリーでEl CapitanでApache起動する方法を書いたけど、逆に停止させるにはどうすればいいのだろうか?

コマンドラインからapacheを起動/停止/再起動するで確認すると以下のコマンドでいけるみたい。

sudo apachectl stop
実際にうったら、確かに止まった。

2016/03/28

[Mac OS X]El CapitanでApache起動

Mac OS XのEl CapitanでApacheを起動するにはどうすればいいのだろうか?

Mac OS X El Capitan での Apache + MySQL + PHP の設定

で確認すると、以下のコマンドでいけるようだ。

sudo apachectl start
確かに起動できた。

2016/03/27

[iOS][html5]クレジットカード読み取り

amazonのようにwebからクレジットカードの番号を自動で読み取ってくれないかなーっと調べていたら、iOS8以降のsafariで、そのような機能があるようです。
iOS8 (Safari8) で "クレジットカードを読み取る" に対応する
[iOS8]クレジットカード読み取りに対応したフォームの作り方
実際に、https環境下で、下のようにコーディングを組みました。

<input id="cardNumber" type="text" size="20" maxlength="20" name="hoge">
有効年月の読み取りはできなかったんだよなー。

2016/03/26

[requirejs][JavaScript]r.jsを使って結合とminify

REQUIREJS OPTIMIZER
というのを読んで、r.jsを使って1つのファイルにまとめて(結合)かつ最小化する方法を調査しました。

まずは、下記コマンドをうってインストール

npm install -g requirejs
windowsの場合は、基本的には下記コマンドをうって実行をする。
r.js.cmd
r.jsを実行するにあたって、設定ファイルを作る必要がある。

ファイル名は任意で問題ないので、ここでは、build.jsとする。
({
    baseUrl: ".",
    paths: {
        jquery: "hoge/jquery",
        underscore: "hoge/underscore",
    },
    name: "main",
    out: "main-built.js"
})
上記ファイルを保存した上で、
r.js.cmd -o build.js
と実行すればおk
name属性は、
<script data-main="scripts/main" src="scripts/require.js"></script>
のmainの部分で、outは出力するファイル名。
ってことで、
<script data-main="scripts/main-built" src="scripts/require.js"></script>
とすれば解決する。

ただ、これでも呼び込みファイルは2ファイルで、どうせなら1ファイルにしたい。

その場合は、
({
    baseUrl: ".",
    paths: {
        requireLib:'hoge/require',
        jquery: "hoge/jquery",
        underscore: "hoge/underscore",
    },
    name: "main",
    include: "requireLib",
    out: "main-built.js"
})
という形で、require.jsファイルのパスを指定すれば1ファイルにすることができる。

requireは予約語なので、requireLibパラメータとして設定する必要があるのに注意。

で、結果的に、下のように1ファイルで実行することができる。
<script src="scripts/main-built.js"></script>
確かにパフォーマンスは改善されると思うのだが、他のページでも使われる共通ファイルがある場合、バージョンアップが発生すると上を適用している全ファイルを対応させなければないので、一長一短なのかなと。

2016/03/24

[mac]OS X El Capitanのアップデートで一時停止マーク

先日リリースされたOS X El Capitan(10.11.4)にアップデートしていたときのこと。

インストールがなかなか完了しなかったので途中で電源を強制的にきって、再起動かけたら、最初はいつも通りのりんごマークが表示されていて、安心していたまさにそのときに、突然、一時停止マークになって、そのまま止まってしまった。

何回、やっても同じ結果になってしまい、無茶苦茶あせって検索をかけたら、以下の内容が見つかった。

起動させると駐車禁止みたいなマークが出る

記事自体は4年前のものだが、症状がすこぶる似ている。

回答を読んでみるとどうやらシステムが損傷しているらしく、紹介されていた

OS X:OS X での復元について

を読んでみると、「command + R」を押したまま、起動して、なお、「command + R」を押し続けていたら、「OS X ユーティリティ」ウィンドウが立ち上がり、OSの再インストールを選んだら無事に起動することができました。

今回、これで治ったが全部の症状においてこの方法で解決できるとは限らないので、試す場合は、自己責任で。

いやー、しかしすっげー焦った。

2016/03/23

[CSS][Matreial Design Lite][JavaScript][jQuery]チェックボックスをoffにする

Matreial Design Liteのcheckboxでチェックを入れた場合において、JavaScriptを使ってoffにするにはどうすればいいのだろうか?

<label class="mdl-checkbox mdl-js-checkbox mdl-js-ripple-effect" for="checkbox-1">
  <input type="checkbox" id="checkbox-1" class="mdl-checkbox__input _checkbox" checked>
  <span class="mdl-checkbox__label">Checkbox</span>
</label>
とあった場合、
$('._checkbox').prop('checked',false);
var $label = $('label');
$label.removeClass('is-checked');
componentHandler.upgradeElement($label[0]);
キモはpropメソッドを使ってfalseだけでは駄目で、labelタグのis-checkedをremoveしてリフレッシュをかけないといけないみたい。

2016/03/22

[Google Map][JavaScript]windowリサイズイベントを受け取る

google mapを表示させてwindow resizeの場合にイベントを受けとるにはどうすればいいのだろうか?

google.maps.event.addDomListenerを使えばおk

具体的には下のようなプログラム。

jQuery(function($){
  var map;
  window.googlemapCallBack = function(){
    map = new google.maps.Map( $('._googleMap'), {
      center: {lat: 0, lng: 0},
      zoom: 11
    });
    google.maps.event.addDomListener(
      window, 
      'resize', 
      function(){
       google.maps.event.trigger( map, 'resize' );
    });
  };
  var script = document.createElement('script');
  script.src = "https://maps.googleapis.com/maps/api/js?key=XXXX&callback=googlemapCallBack";
  $('head')[0].appendChild(script);
});

2016/03/21

[Google Map][JavaScript]マーカーを画像にする

google map上に表示したマーカーを画像にするにはどうすればいいのだろうか?

iconプロパティーに画像のパスを設定すればおk。

具体的には下のようなプログラム。

jQuery(function($){
  var map;
  window.googlemapCallBack = function(){
    map = new google.maps.Map( $('._googleMap'), {
      center: {lat: 0, lng: 0},
      zoom: 11
    });
    var image = '../img/foo.png';
    new google.maps.Marker ({
      position:{lat: 0, lng: 0},
      map:map,
      title: 'hoge',
      icon:image
    });
  };
  var script = document.createElement('script');
  script.src = "https://maps.googleapis.com/maps/api/js?key=XXXX&callback=googlemapCallBack";
  $('head')[0].appendChild(script);
});

2016/03/20

[Google Map][JavaScript]ロード時のコールバックを設定

どうやら、google map sdkでロードした時のコールバックが設定できるみたい。

window.googlemapCallBack = function(){
 
};
var script = document.createElement('script');
script.src = "https://maps.googleapis.com/maps/api/js?key=XXXX&callback=googlemapCallBack";
$('head')[0].appendChild(script);
callbackパラメータに関数名を設定すればおk

2016/03/19

[Google Map][JavaScript]RequireJSの中でGoogle Mapを使う

RequireJSの中でgoogle map sdk を使いたい場合はどうすればいいのだろうか?

jQueryがある状態で以下のようにscripを組んだらロードすることができました。

require([
  'jquery'
], function($){
  $(function(){
    var script = document.createElement('script');
    script.src = "https://maps.googleapis.com/maps/api/js?key=XXXX&callback=googlemapCallBack";
    $('head')[0].appendChild(script);
  });
});
これ結局、動的にscriptタグを作ってロードしているだけなので、別にrequirejsを使わなくても適用できる技なんだけどね。

2016/03/18

[node.js][npm]webpackインストール時の警告

WEBPACK
をリファレンスを読みながら、インストールするために以下のコマンドを叩いた。

npm install webpack -g
そしたら、以下のような警告がでた。
npm WARN optional dep failed, continuing fsevents
でこれ、どうやら、調べたらmac用のパッケージみたいで、今回、windowsに対してインストールを行ったので、特に問題はないみたいです。

ちょっと焦りました。

2016/03/17

[node.js][npm]npmでインストールされているパッケージを表示

npmでインストールされているパッケージを表示するにはどうすればいいのだろうか?

npmコマンドの使い方

で確認すると以下のコマンドでおk

npm ls -g

2016/03/16

[JavaScript][android]Web App Manifest in Chrome for Android

デベロッパー向け日本語 YouTube チャンネル "Google Developers Japan" のご紹介というエントリーで紹介されていた

の動画を見て
Web App Manifest in Chrome for Android
の確認を行いました。

どうやらhttpsではなくhttp環境下でもおkみたいで基本的なテンプレートは以下のようになります。

{
  "name": "hoge",
  "short_name": "foo",
  "start_url": "./?utm_source=web_app_manifest",
  "display": "standalone",
  "icons": [{
    "src": "images/touch/homescreen48.png",
    "sizes": "48x48",
    "type": "image/png"
  }, {
    "src": "images/touch/homescreen72.png",
    "sizes": "72x72",
    "type": "image/png"
  }, {
    "src": "images/touch/homescreen96.png",
    "sizes": "96x96",
    "type": "image/png"
  }, {
    "src": "images/touch/homescreen144.png",
    "sizes": "144x144",
    "type": "image/png"
  }, {
    "src": "images/touch/homescreen168.png",
    "sizes": "168x168",
    "type": "image/png"
  }, {
    "src": "images/touch/homescreen192.png",
    "sizes": "192x192",
    "type": "image/png"
  }]
}
displayパラメータは
fullscreen
standalone
minimal-ui
browser
の4つがある。

androidのchrome 42から適用できるみたいなので、結構、いい感じ。

htmlには
<link rel="manifest" href="/manifest.json">
という形で、上で記述した内容を「manifest.linkタグに記述すればおk

2016/03/15

[python][Google App Engine]リクエストをエラーで返す

クライアントからきたリクエストを200意外のステータスで返したい場合は、以下のようにすればいい。

self.error(500)

2016/03/14

[jQuery]ajaxのmethodをDELETEにする

jQueryを使ったajax通信でGETとPOSTは今まで試したことはあったのですが、DELETEはできるのか試してみました。

var ajax = $.ajax({
  type:'DELETE',
  url:'',
  success:function(){
 
  },
  error:function(XMLHttpRequest, textStatus, errorThrown){
  }
});

2016/03/13

[jQuery]ajaxのmethodをPUTにする

jQueryを使ったajax通信でGETとPOSTは今まで試したことはあったのですが、PUTはできるのか試してみました。

var ajax = $.ajax({
  type:'PUT',
  url:'',
  success:function(){
 
  },
  error:function(XMLHttpRequest, textStatus, errorThrown){
  }
});

2016/03/12

[JavaScript][jQuery][修正版]OWL Carouselプラグインで任意のindexに移動させる

少し前にOWL Carouselプラグインで任意のindexに移動させる方法を書きましたが、実は、この方法では動かず、正確には、下のやり方じゃーないと動作しない模様。

var owlCarousel = $(".owl-carousel").owlCarousel({
});
owlCarousel.trigger('owl.jumpTo', 3);

2016/03/11

[本]奴隷のしつけ方

読了

奴隷のしつけ方
奴隷のしつけ方
posted with amazlet at 16.03.09
マルクス シドニウス ファルクス ジェリー トナー
太田出版
売り上げランキング: 3,344

序文 主人であれ
第Ⅰ章 奴隷の買い方
第Ⅱ章 奴隷の活用法
第Ⅲ章 奴隷と性
第Ⅳ章奴隷は劣った存在か
第Ⅴ章 奴隷の罰し方
第Ⅵ章 なぜ拷問が必要か
第Ⅶ章 奴隷の楽しみ
第Ⅷ章 スパルタクスを忘れるな!
第Ⅸ章 奴隷の解放
第Ⅹ章 解放奴隷の問題
第ⅩⅠ章 キリスト教徒と奴隷
あとがき さらばだ!

参考文献

via:目次
最初、アマゾンで発見したとき、インパクトのある題名だなーっと思って読んでみました。

これで、実際に当時の奴隷の買い方がわかるのだろうか?と疑問を持ちつつ進めてみると確かに書いてあった。
当初、映画で奴隷を安く買い叩いているシーンをよく見かけるので、右も左も所有していると思ったら、それは勘違いだったらしく、無茶苦茶コストが高く、かつ、いざ、購入しても、マインドを一定以上保つ必要があり、教育も必要なので、よく考えてほしいと警告してあったのがなんとも斬新でした。

購入場所も記載されており当時の市場環境が想像できて面白かったです。

ただ当時の思想があまり受け入れられなかったので、その時に生きていたら速攻で死んでいただろうなーっと思うと今に感謝せざるを得ない。
そういう感想を著者も想定していたのか、あとがきで触れていたが、実は、現在も、奴隷という言葉はないが、低賃金、強制労働をされている人たちは大勢おり、その現実に目を背けてはいけないということが書かれていた。

当時から既に数千年たとうとしているのに今だ残っているこの根深い問題をどう解決すればいいのだろうか?
改めて考えさせてくれる一冊であった。

2016/03/10

[html5]autocomplete属性について

今どきの入力フォームはこう書く! HTMLコーダーが抑えるべきinputタグの書き方まとめ
というエントリーを読んで、inputタグにautocomplete属性があることを初めて知ったwww

<input type="email" name="email" autocomplete="email">

2016/03/09

[jQuery][JavaScript]owlCarouselプラグインで次にスライドさせる

owlCarouselプラグインで次にスライドさせるにはどうすればいいのだろうか?

プログラムを調査したところ、次のように組めばいいことがわかった。

var $owlCarousel = $('._owlCarousel');
$owlCarousel.owlCarousel({

});
$owlCarousel.trigger('owl.next');

2016/03/08

[jQuery][JavaScript]owlCarouselプラグインで前にスライドさせる

owlCarouselプラグインで前にスライドさせるにはどうすればいいのだろうか?

プログラムを調査したところ、次のように組めばいいことがわかった。

var $owlCarousel = $('._owlCarousel');
$owlCarousel.owlCarousel({

});
$owlCarousel.trigger('owl.prev');

2016/03/07

[iOS][html]webを全画面モードで表示

どうやらsafariで開いたページで「ホームに追加」をした後、下のmetaタグが入っていた場合、ナビゲーションバーとツールバーが表示されない、フルスクリーンモードで表示されるようです。

<meta name="apple-mobile-web-app-capable" content="yes">
参考
【iOS】サイトを「ウェブアプリケーション・フルスクリーンモード」で表示させる方法。

2016/03/06

[CSS][Material Design Lite]動的にアップデートする

もともと、下のようなソースコードがあったとする。

<button class="mdl-button mdl-js-button mdl-button--raised">
  Button
</button>
で、jQueryからaddClassでmdl-button--coloredを追加してもボタンに色はつかない。

そこで、更新するためには、componentHandler.upgradeElementを実行すればおk
var $button = $('button');
$button.addClass('mdl-button--colored');
componentHandler.upgradeElement($button[0]);

2016/03/05

[Jinja2][Python][Google App Engine]webapp2.RequestHandlerの__init__をオーバーライド

webapp2.RequestHandlerの__init__をオーバーライドしたい場合にはどうすればいいのだろうか?
Overriding __init__()
で確認すると、以下のようにすればいいみたい。

class HogeHandler(webapp2.RequestHandler):
    def __init__(self, request, response):
        # Set self.request, self.response and self.app.
        self.initialize(request, response)

        # ... add your custom initializations here ...
        # ...
これ、dispatchを組み合わせた場合、__init__が先に実行される。(そりゃーそうなんだけど。)
class HogeHandler(webapp2.RequestHandler):
    def __init__(self, request, response):
        # Set self.request, self.response and self.app.
        self.initialize(request, response)

        # ... add your custom initializations here ...
        # ...
    def dispatch(self):
        # ... check if requirements were met ...
        # ...

        # Parent class will call the method to be dispatched
        # -- get() or post() or etc.
        super(MyHandler, self).dispatch()

2016/03/04

[Jinja2][Python][Google App Engine]Filtersをかける

Google App Engine上の環境でJinja2を使ってフィルターをかけたい場合はどうすればいいのだろうか?

Filters
で確認すると、以下のように「|」を使って実行するようだ。

{{ hoge|lower }}
上の場合は、hoge変数を小文字にして出力する書き方です。

当初は、
{{ lower(hoge) }}
って書いたんだけど、全然エラーが取れなかったので、すっげー苦労しました。

2016/03/03

[jQuery]属性を削除

下のような形で動的にcssを追加した場合、style属性が付与される。

$('#hoge').css('top':0);
で、これを削除したい場合は、removeAttrメソッドを使えばおkみたいです。
$('#hoge').removeAttr('style');
参考URL
.removeAttr()

2016/03/02

[jQuery]ajaxを停止

相当前にajaxを途中で中止するというエントリーを書いたのですが、いまいち、直感的にわかりにくかったので、プログラムを書いてみた。

var ajax = $.ajax({
  type:'POST',
  url:'',
  data:data,
  success:function(){

  },
  error:function(XMLHttpRequest, textStatus, errorThrown){
  }
});
ajax.abort();

2016/03/01

[PhotoShop]空き缶にラベルを貼り付ける

PhotoShopを使って空き缶に画像を巻きつけることができるのだろうか?

[基本操作] 缶にラベルを貼ってみよう (画像のワープ)
によると、巻き付けたい画像を選択して、
「編集」

「変形」

「ワープ」

オプションバーの「アーチ」
を選択すればおk