楽園追放を観た

なんとなくログインしたらモチベが上がったのでブログ書く。 Qiitaとの使い分けどうしようかと思ったけど、こっちには非技術ネタ書いても良いかなと思った。

なのでじわじわと余韻が続いてる楽園追放を観た感想。 以下ネタバレあり。

続きを読む

FlaskとjQueryでJSONのやりとり

FlaskとjQueryでのJSONのやりとりについて。
サーバからJSONを受け取るサンプルはよく見かけるんだけど、サーバにJSONを送るものがあまりなかったので。

Flask

...
@app.route('/test', methods=['POST'])
def test():
if request.method == 'POST':
    data = request.json
    print data
    return Response('ok')
...

jQuery

$(function() {
    data = {"hoge": "fuga"};
    json = JSON.stringify(data);  // object型からJSON文字列(string型)に変換
    $.ajax({
        type: 'POST',
        url: '/test',
        data: json,
        contentType: 'application/json',
        success: function(msg) {
            console.log(msg);
        },
        error: function(msg) {
            console.log('error');
        }
    });
});

JSON.stringifyをしていなくてハマりました。


サーバ側からJSONでResponseを返す場合は$.ajaxでdataTypeを指定すること。


Flask

...
    return jsonify(res='ok')
...

jQuery

$.ajax({
    ...
    dataType: 'json',
    success: function(msg) {
        console.log(msg.res);
    },
    ...

Firefox Developers Conference 2012 in Osaka に行ってきました

Firefox Developers Conference 2012 in Osakaに行ってきました。
メモ兼まとめなど。

Opening 〜Web こそがプラットフォーム!〜

  • Boot to Gecko
  • Linuxカーネル上でGeckoを走らせる
  • アプリはHTML/CSS
  • 通常のOSは起動だけでメモリ食う
  • B2Gは数百MBで動作。軽い
  • いろいろなAPI(電話からH.264まで)
  • スペインのキャリア Telefonica が採用
    • スペインでは言語的なコストが高すぎるためiPhoneAndroidは売れていない
    • 軽く、いじりやすいOSが欲しい
  • Webがプラットフォーム
  • アプリはMarketPlaceで
  • Web技術のみで実装
  • ベンダー非依存

Web 開発者ツール、使いこなせてますか?

  • 属性変更を監視してブレークできる
  • ネット>XHR レスポンスヘッダが確認できる
  • スクリプトブレークポイント、ステップ実行、変数の中身が見られる
  • おすすめアドオン YSlow, PageSpeed, WebDeveloper, AutoReload, FireQuery

才色兼備なグラフィックス SVG が魅せる Web の未来

  • Retinaでも
  • <img> <svg> タグなどで使える
  • CSSでurl('hoge.svg')でも
  • <object> インタラクティブにするならこっち
  • apacheは自動でgzipかける
  • SVGCSSは相性が良い(フィルタやマスク、クリップなど)
  • SVG2ではメッシュグラデーションが使える

Web プラットフォームのためのアプリ開発

  • FirefoxUIのこだわり。インストールがポップアップではなくアプリのUIにはみ出てる。フィッシング防止
  • MarketPlaceからインストールしたものはアプリケーションのフォルダに
  • JSON形式のマニフェストファイル
  • アプリは独立ウインドウで起動
  • Firefoxとは別プロセス
  • Firefoxが閉じていてもOK(インストールされたFirefoxGeckoを探して使う)

LT

モバイル
  • 電池消費を考える
  • ApplicationCache/WebStorageを使う
  • 余計なものは消す
  • サーバサイドUAでprefix自動生成
  • pngよりjpeg
Mecha-Mozilla
ウェブフォント
  • フォントプラス
ShareWis
  • SVGの挙動がブラウザで違う
  • <svg>...</svb> ←計算が多くてもっさり
  • <g>...</g> ←gタグでグループ化して計算量を減らす
Mozilla Factory
  • オープンとは何か

Writing HTML 〜これからの HTML の書き方〜

  • レスポンシブウェブ
  • フレキシブルなグリッドレイアウト
  • 最適化ではなく汎用化
  • 特定のデバイスにフォーカスはしない
  • 画像は1パターンで差し替えなどはしない
    • 差し替えは読み込みのコストがかかる
  • CSS3を積極的に使う
  • ファイルを減らしてリクエストを減らす
  • デスクトップ前提からマルチデバイス前提へ
  • すべてのサイトでレスポンシブ対応する必要はない
  • プログレッシブ・エンハンスメント

懇親会は無料! おいしかった! Tシャツも当たった!
カクテルのデモが良かったけど、やっぱりアルコール+ポカリは危険だと思います。
あと、名刺は必須だなと思いました。今度からつくって持ってくる。

起動時のフレームサイズをディスプレイ解像度に応じて縦いっぱいに

Emacsのフレームサイズは、デフォルトサイズで起動してマウスで調整していたけど、さすがにそれは賢くないので。

init.el

(when (window-system)
  (set-frame-size
   (selected-frame)
   80  ; 横幅
   (- (/ (- (x-display-pixel-height) 22) (frame-char-height)) 1)))  ; 縦幅は画面に合わせて最大化

メニューバーを考慮しているのでMac用です。