title
heading
- item1
- item2
para
aaa
Phalcon + AngularJSで作る 動画プラットフォーム
Phalcon + AngularJSで作る 動画プラットフォーム(クリックでスライド表示)
Phalcon Nightという勉強会で、登壇してきました。↑がスライドです(reveal.js製のスライドをGitHub Pagesで公開してる)。SlideShareにも後で上げると思います。
勉強会に誘われたのはTransifexのPhalcon翻訳チームのディスカッションだったので、オープンソースは参加してみるものだなー、と思いました。
Phalcon + AngularJSというタイトルなんですが、実際はAngular側で特別な何かをする必要はなかったりします(なのでスライドにもAngularの話はほとんど出てきません)。
一方、Phalcon側からすると、VoltというPhalcon組み込みのテンプレートエンジンが、Angularのシンタックスとバッティングする(どちらも「{}」という記法を使う)という問題があります。他の登壇者の方のお話を伺った印象だと、Voltは結構バグがあるみたいなので、全面的にAngularJSを使ったのは(結果的には)正解だったみたいですね。
同行者からは「スライドの文字が小さかった」というフィードバックも貰いました。スライド自体はそれなりに大きなフォントサイズだったんですが、プロジェクタへの写し方がまずかったみたいです…。次に発表する際は、その場での写りもちゃんと確認しようと思います。
Kindleランキングの「近日発売 予約可」のアイテムを非表示にするスクリプト
// ==UserScript== // @name Kindle_yoyaku_disable // @namespace ryo_utsunomiya // @include http://www.amazon.co.jp/gp/* // @version 1 // @grant GM_getValue // @grant GM_setValue // ==/UserScript== window.addEventListener("load", function () { var ele = document.getElementsByClassName("zg_item_compact"); for (var i = 0; i < ele.length; i++) { if (-1 != ele[i].innerHTML.indexOf("近日発売 予約可")) { ele[i].style.visibility = "hidden"; } } },false);
アプリケーションキャッシュ メモ
アプリケーションキャッシュとは
HTML/CSS/JavaScriptや画像ファイルなど、Webページの表示に必要な諸々のファイルをユーザーのローカルに保存する仕組み。
なぜ、アプリケーションキャッシュが必要なの?
モバイル端末等の、通信速度が遅かったり、通信品質が低かったりする端末でも、Webサイトを快適に利用できるようにするため。また、アプリケーションキャッシュをフル活用すれば、オフラインでも動作するアプリケーションを作ることができる。
アプリケーションキャッシュの対応ブラウザーは?
Internet Explorer 10以上、主要なモダンブラウザー(Firefox, Chrome, Safari, Opera)の各最新版、Mobile Safari(iOS2.1以上)及びAndroid標準ブラウザー(Android 2.0以上)。
アプリケーションキャッシュの利用方法
キャッシュマニフェストの作成
キャッシュマニフェストとは、各ファイルのキャッシュ方針を示すファイルのこと。以下のような書式で記述する。
CACHE MANIFEST
# rev1
# キャッシュマニフェストにはコメントを書ける
# CACHE: でキャッシュするファイルを指定する
CACHE:
./app.js
./style.css
./logo.png
./not_found.html
# NETWORK: で、常にネットワークから取得するファイルを指定する
# *を使用すると、全てのファイルをネットワークから取得する
NETWORK:
*
# FALLBACK: で、ローカルにキャッシュされたファイルが存在しない場合の代替ファイルを指定する
# 左側のリソース(/以下の全てのファイル)がキャッシュされていない場合は、右側のリソースを表示
FALLBACK:
/ not_found.html
リビジョン以外のコメントを除去したバージョン:
CACHE MANIFEST
# rev1
CACHE:
./app.js
./style.css
./logo.png
./not_found.html
NETWORK:
*
FALLBACK:
/ not_found.html
キャッシュマニフェストファイルには、「example.appcache」といった具合に、「.appcache」という拡張子をつけるのが一般的。
キャッシュマニフェストの配信
キャッシュマニフェストは、text/cache-manifestというMIMETypeで配信する必要がある。Apacheの場合は、キャッシュマニフェストの配置ディレクトリに以下のような.htaccessを配置すると、配信できる。
AddType text/cache-manifest .appcache
キャッシュマニフェストの読み込み
HTMLファイルのmanifest属性で読み込むキャッシュマニフェストを指定する。
<!doctype html>
<html manifest="example.appcache">
<head>
<meta charset="UTF-8">
<title>HTML5 Application Cache Sample</title>
<script src="app.js"></script>
<link rel="stylesheet" href="style.css">
</head>
<body>
<h1>HTML5 Application Cache Sample</h1>
<img src="logo.png" alt="logo">
</body>
</html>
キャッシュマニフェストの更新
CHACHEでキャッシュするよう指定されているファイルについて、キャッシュ対象ファイルが更新された場合でも、ブラウザーは新しいファイルを取りに行かない。ブラウザーに再度リソースの取得をさせるためには、必ずキャッシュマニフェストを更新しなければならない。
キャッシュマニフェストの更新を伝えるのはコメント行の更新でもOKなので、コメント行のリビジョン等を更新して更新を伝える。
Application Cache API
キャッシュマニフェストが更新されても、即キャッシュが更新されるわけではない。流れとしては、(1) Webページを読み込む (2) キャッシュマニフェストが更新されていることがわかる (3) 次回アクセス時にキャッシュを破棄して新しいファイルを取りに行く となる。
こういったキャッシュの更新等の処理を、ブラウザー任せではなく自前で制御したい場合は、Application Cache APIを使用する。
たとえば、キャッシュを1時間おきに更新確認したい場合、以下のようなJavaScriptで実装できる。
document.addEventListener("onload", function() {
setInterval(function() {
applicationCache.update();
}, 1000 * 60 * 60);
});
参考文献
参考URL
JavaScriptではじめるプログラミング入門
とある場所で、プログラミング初心者向けのハンズオンセミナーを開催しました。初心者に教えるというのは、やはり難しい。今回は知識レベルもまちまちで、人によってはHTMLも知らなかったので、スライドには無いけどHTML基礎講座をやったりしました。
また、受講者の方にはあらかじめChromeのインストールをお願いしたのですが、PCにインストールされているソフトウェアの影響で、こちらの想定した動作とは異なる動作をするPCがあったりして、なかなかに悩ましい。
環境構築が簡単なJavaScriptでさえこれなのだから、他の言語は推して知るべし、ですね。
内容としては、結構詳細に(ある程度本気でプログラミングを覚えたい人向けに)説明してしまったのですが、もっとプログラミングの楽しさをダイジェスト的に感じられるような課題だと良かったかな、と思いました。
ちなみに、今回はreveal.jsでスライドを作成し、GitHub Pagesにアップロードして公開しました。reveal.jsは簡単にスライドが作れるし、GitHubにgh-pagesブランチを切ってpushすればGitHub Pagesとして公開できるので、とても楽。この組み合わせは今後も使っていきたいですね。
Phalconドキュメントの日本語翻訳チームにJOINしました
Phalconのドキュメントの翻訳は、以前はGitHubで進められていましたが、現在はTransifexという翻訳サービスに移行しています。
If you want to translate English documentation into your native language, please request join a translation team at Transifex.翻訳チームへの参加方法は以下のとおり。
https://github.com/phalcon/docs/blob/master/CONTRIBUTING.md
(1) Transifexにアカウントを作成する
(2) Phalconドキュメントのプロジェクトに参加申請をする
(3) 参加申請が受諾されたら、翻訳作業を開始できる
今後はPhalconドキュメントの翻訳作業はTransifexで行うことになるため、このブログにはドキュメントの翻訳は掲載しなくなると思います。