Jinja 2を使って変数設定を行うには、どうすればいいのだろうか?
マニュアルのAssignmentsの部分を読むと、
{% set hoge = 1 %}で設定することができる。
常にテンパってます。
Apacheのディレクトリを変更を変更するにはどうすればいいのだろうか?
OS X El Capitan で localhost を接続する方法:悪戦苦闘メモ。(まあ、だいたいてこずるw)
で確認すると、
/private/etc/apache2/httpd.conf
の
DocumentRoot "/Library/WebServer/Documents"と
<Directory "/Library/WebServer/Documents">を修正すればおk
昨日のエントリーでEl CapitanでApache起動する方法を書いたけど、逆に停止させるにはどうすればいいのだろうか?
コマンドラインからapacheを起動/停止/再起動するで確認すると以下のコマンドでいけるみたい。
sudo apachectl stop実際にうったら、確かに止まった。
Mac OS XのEl CapitanでApacheを起動するにはどうすればいいのだろうか?
Mac OS X El Capitan での Apache + MySQL + PHP の設定
で確認すると、以下のコマンドでいけるようだ。
sudo apachectl start確かに起動できた。
amazonのようにwebからクレジットカードの番号を自動で読み取ってくれないかなーっと調べていたら、iOS8以降のsafariで、そのような機能があるようです。
iOS8 (Safari8) で "クレジットカードを読み取る" に対応する
[iOS8]クレジットカード読み取りに対応したフォームの作り方
実際に、https環境下で、下のようにコーディングを組みました。
<input id="cardNumber" type="text" size="20" maxlength="20" name="hoge">有効年月の読み取りはできなかったんだよなー。
REQUIREJS OPTIMIZER
というのを読んで、r.jsを使って1つのファイルにまとめて(結合)かつ最小化する方法を調査しました。
まずは、下記コマンドをうってインストール
npm install -g requirejswindowsの場合は、基本的には下記コマンドをうって実行をする。
r.js.cmdr.jsを実行するにあたって、設定ファイルを作る必要がある。
({ baseUrl: ".", paths: { jquery: "hoge/jquery", underscore: "hoge/underscore", }, name: "main", out: "main-built.js" })上記ファイルを保存した上で、
r.js.cmd -o build.jsと実行すればおk
<script data-main="scripts/main" src="scripts/require.js"></script>のmainの部分で、outは出力するファイル名。
<script data-main="scripts/main-built" src="scripts/require.js"></script>とすれば解決する。
({ baseUrl: ".", paths: { requireLib:'hoge/require', jquery: "hoge/jquery", underscore: "hoge/underscore", }, name: "main", include: "requireLib", out: "main-built.js" })という形で、require.jsファイルのパスを指定すれば1ファイルにすることができる。
<script src="scripts/main-built.js"></script>確かにパフォーマンスは改善されると思うのだが、他のページでも使われる共通ファイルがある場合、バージョンアップが発生すると上を適用している全ファイルを対応させなければないので、一長一短なのかなと。
先日リリースされたOS X El Capitan(10.11.4)にアップデートしていたときのこと。
インストールがなかなか完了しなかったので途中で電源を強制的にきって、再起動かけたら、最初はいつも通りのりんごマークが表示されていて、安心していたまさにそのときに、突然、一時停止マークになって、そのまま止まってしまった。
何回、やっても同じ結果になってしまい、無茶苦茶あせって検索をかけたら、以下の内容が見つかった。
起動させると駐車禁止みたいなマークが出る
記事自体は4年前のものだが、症状がすこぶる似ている。
回答を読んでみるとどうやらシステムが損傷しているらしく、紹介されていた
OS X:OS X での復元について
を読んでみると、「command + R」を押したまま、起動して、なお、「command + R」を押し続けていたら、「OS X ユーティリティ」ウィンドウが立ち上がり、OSの再インストールを選んだら無事に起動することができました。
今回、これで治ったが全部の症状においてこの方法で解決できるとは限らないので、試す場合は、自己責任で。
いやー、しかしすっげー焦った。
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してリフレッシュをかけないといけないみたい。
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); });
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); });
どうやら、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
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を使わなくても適用できる技なんだけどね。
WEBPACK
をリファレンスを読みながら、インストールするために以下のコマンドを叩いた。
npm install webpack -gそしたら、以下のような警告がでた。
npm WARN optional dep failed, continuing fseventsでこれ、どうやら、調べたらmac用のパッケージみたいで、今回、windowsに対してインストールを行ったので、特に問題はないみたいです。
npmでインストールされているパッケージを表示するにはどうすればいいのだろうか?
npmコマンドの使い方
で確認すると以下のコマンドでおk
npm ls -g
デベロッパー向け日本語 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パラメータは
<link rel="manifest" href="/manifest.json">という形で、上で記述した内容を「manifest.linkタグに記述すればおk
クライアントからきたリクエストを200意外のステータスで返したい場合は、以下のようにすればいい。
self.error(500)
jQueryを使ったajax通信でGETとPOSTは今まで試したことはあったのですが、DELETEはできるのか試してみました。
var ajax = $.ajax({ type:'DELETE', url:'', success:function(){ }, error:function(XMLHttpRequest, textStatus, errorThrown){ } });
jQueryを使ったajax通信でGETとPOSTは今まで試したことはあったのですが、PUTはできるのか試してみました。
var ajax = $.ajax({ type:'PUT', url:'', success:function(){ }, error:function(XMLHttpRequest, textStatus, errorThrown){ } });
少し前にOWL Carouselプラグインで任意のindexに移動させる方法を書きましたが、実は、この方法では動かず、正確には、下のやり方じゃーないと動作しない模様。
var owlCarousel = $(".owl-carousel").owlCarousel({ }); owlCarousel.trigger('owl.jumpTo', 3);
読了
最初、アマゾンで発見したとき、インパクトのある題名だなーっと思って読んでみました。序文 主人であれ
via:目次
第Ⅰ章 奴隷の買い方
第Ⅱ章 奴隷の活用法
第Ⅲ章 奴隷と性
第Ⅳ章奴隷は劣った存在か
第Ⅴ章 奴隷の罰し方
第Ⅵ章 なぜ拷問が必要か
第Ⅶ章 奴隷の楽しみ
第Ⅷ章 スパルタクスを忘れるな!
第Ⅸ章 奴隷の解放
第Ⅹ章 解放奴隷の問題
第ⅩⅠ章 キリスト教徒と奴隷
あとがき さらばだ!
参考文献
今どきの入力フォームはこう書く! HTMLコーダーが抑えるべきinputタグの書き方まとめ
というエントリーを読んで、inputタグにautocomplete属性があることを初めて知ったwww
<input type="email" name="email" autocomplete="email">
owlCarouselプラグインで次にスライドさせるにはどうすればいいのだろうか?
プログラムを調査したところ、次のように組めばいいことがわかった。
var $owlCarousel = $('._owlCarousel'); $owlCarousel.owlCarousel({ }); $owlCarousel.trigger('owl.next');
owlCarouselプラグインで前にスライドさせるにはどうすればいいのだろうか?
プログラムを調査したところ、次のように組めばいいことがわかった。
var $owlCarousel = $('._owlCarousel'); $owlCarousel.owlCarousel({ }); $owlCarousel.trigger('owl.prev');
どうやらsafariで開いたページで「ホームに追加」をした後、下のmetaタグが入っていた場合、ナビゲーションバーとツールバーが表示されない、フルスクリーンモードで表示されるようです。
<meta name="apple-mobile-web-app-capable" content="yes">参考
もともと、下のようなソースコードがあったとする。
<button class="mdl-button mdl-js-button mdl-button--raised"> Button </button>で、jQueryからaddClassでmdl-button--coloredを追加してもボタンに色はつかない。
var $button = $('button'); $button.addClass('mdl-button--colored'); componentHandler.upgradeElement($button[0]);
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()
Google App Engine上の環境でJinja2を使ってフィルターをかけたい場合はどうすればいいのだろうか?
Filters
で確認すると、以下のように「|」を使って実行するようだ。
{{ hoge|lower }}上の場合は、hoge変数を小文字にして出力する書き方です。
{{ lower(hoge) }}って書いたんだけど、全然エラーが取れなかったので、すっげー苦労しました。
下のような形で動的にcssを追加した場合、style属性が付与される。
$('#hoge').css('top':0);で、これを削除したい場合は、removeAttrメソッドを使えばおkみたいです。
$('#hoge').removeAttr('style');参考URL
相当前にajaxを途中で中止するというエントリーを書いたのですが、いまいち、直感的にわかりにくかったので、プログラムを書いてみた。
var ajax = $.ajax({ type:'POST', url:'', data:data, success:function(){ }, error:function(XMLHttpRequest, textStatus, errorThrown){ } }); ajax.abort();
PhotoShopを使って空き缶に画像を巻きつけることができるのだろうか?
[基本操作] 缶にラベルを貼ってみよう (画像のワープ)
によると、巻き付けたい画像を選択して、
「編集」
↓
「変形」
↓
「ワープ」
↓
オプションバーの「アーチ」
を選択すればおk