SPA + サーバーサイドレンダリング、そのダルさに関する私見
いわゆる SPA + サーバーサイドレンダリングがダルい 唐突ですがおさらいです。 なぜサーバーサイドレンダリング（SSR）が嬉しいかと言えば 初期表示の Critical Rendering Path を短縮できる SEO における保守信仰にやさしい（） 古いブラウザ・低性能マシンにやさしい yahoo/fluxible による SPA + Server Rendering の概観 ::ハブろぐ であり、特に SPA + SSR の文脈においては Universal Architecture による SPA + SSR は、技術的には過渡期の歪なキメラっぽさが拭いきれませんが、昨今の Web フロントエンドにしては珍しくビジネス的な説得力があります。 SSR なのでSNSや検索からの流入による初期表示が速い SPA なので回遊時のページ遷移も速い SSR なので古いブラウザでも CSS
Webデザイン学科の特別講義として、フロントエンドについて演説しました
Web フロントエンドで仕事をしてご飯をおいしく食べる話 画像の引用がめんどうになったので、自分の写真ライブラリから適当なご飯画像を入れることにしました。 学校法人河合塾学園トライデントコンピュータ専門学校の Web デザイン学科に在籍する1, 2年生を対象に、業界研究という授業で演説を繰り広げさせていただきました。ほんと、そこまで喋るつもりなかったのですが、なんだかすごく熱心に聞いてくれているので、ついつい喋りたいこと喋りすぎました(; 'A`) 各位には当日申し上げましたが、分かることは「分かる〜」って感じで、分からないことは「分からん！」って感じのリアクションを正しくとることは、喋ってる人のテンションを左右するので非常に重要です。聞き手のスキルです。調子にのりましたすみません。 なんとなくのアウトライン Web フロントエンドという職能に関する夢のはなしと、社会は厳しいという話を少し
Google I/O で v1.0 が発表された Polymer の Elements Catalog が面白い
Polymer Elements のカタログページ Site: Polymer Element Catalog Repo: Polymer/polymer-element-catalog Polymer は、これからの Web 標準の一角を占めるであろう Web Components のラッパーライブラリです。その Polymer で作られたコンポーネントのカタログサイトが公開されていました。 これまでも Core Elements や Paper Elements が Polymer のコンポーネントとして提供されていましたが、分類も新たにレパートリーが拡充されています。 Cart に入れて Download カタログには各コンポーネントのドキュメントやデモが載っていて、使いたいものをチェックして Cart に入れていきます。必要なコンポーネントを Cart に入れてダウンロードさせると
AngularJS についての所感
AgularJS に対する気持ち 所感といいつつ、主に自分がつらさとして感じていることを書く。所感シリーズとしては jQueryについての所感 も併せて読みたい。 この学習曲線の中でいうと、たぶん今の自分は Very Cool! の頂点から降りている最中くらいだと思う。そして、マサカリをふりかぶった諸兄にひとつだけ言いたいのは、共感脳を養った方がモテるということだ。 チキンハート的弁解: 以下はAngularJSに関するつらさを述べることに専念するために、美点を挙げていないだけであってAngularJSを全方位的に貶めたり、何かと比べて明確にクソだというような意図はない。 画像は AngularJS: The Best Parts · Anand Mani Sankar からの引用。X軸にある www.bennadel.com は AngularJS 大好きさん。 辛1. $scope が
Google I/O 2014 ふりかえり
初海外カンファレンス 帰国後バタバタしっぱなしで、実は一ヶ月も経ってしまったが、いまさらGoogle I/O 2014のふりかえりを書き留めたい。 今回の海外遠征は、勤め先の中で偶然とみなさまのご厚意によって実現した。端的には、金だしてやるから行ってこい、という話がたまたま自分のところに回ってきた幸運だ。 現職に就いてから、英語リソースを「読む」ことはあまり不自由しなくなったが、「聞く」「話す」が不自由という脆弱性を抱えたままという問題があった。しかし、この脆弱性には何のパッチがあたることもなく、渡航当日を迎えることになった。つらい。 そんなこんなで初のサンフランシスコ、初のGoogle I/O を迎えることになる。今回のI/OでもらったAndroid TVの端末や、Android Watchよりも何よりも気に入っているのがMaterial Designのコンセプトペーパーだ。 PDFで公
HTML5のplaceholder属性を代替するjQueryプラグイン(ah-placeholder.js) ::ハブろぐ
HTML5の仕様にあるplaceholder属性を、未対応のブラウザでも擬似的に使えるようにするjQueryプラグインです。title属性に入れた文字列を、プレースホルダー用のテキストとして扱います。placeholder属性については以下などを参照。 HTML5のFormで実現されるplaceholder、autofocusが便利そう - IDEA*IDEA <input> placeholder－HTML5タグリファレンス 今回のプラグインは、HTML5のplaceholder属性をjQueryでやってみる :: ハブろぐ で、以前書いていたjQueryを整理して、プラグインの体裁に整えてみたものです。車輪の再発明もいいとこですね。 2011-09-09追記 バージョン1.2でplaceholderAttrオプションを追加 これまでplaceholder属性代わりに使う属性がtitle
GWですね．nodeとnpm周りの環境が壊れましたがnaveを入れまして，お夕飯おいしいです．
GWですね，みなさん満喫していらっしゃいますか？ 明日出勤ですヤッホー！！ 金土日とお休みしておりましたが，前半2日間は死にかけていて，3日目の今日になってようやっと起動した次第．プログラムかこう！と思ったら何故か環境破壊 -> 再生のドツボにハマって1日使い切りました☆ npm1.0のリリースに伴ってupdateしてみたら... なんかすごいおかしいことになったので，いっそキレイにしてからnaveをインストールしてみた! % git clone git://github.com/isaacs/nave.git ~/.nave % ~/.nave/nave.sh install latest ここまで打って，ものすごい勢いでビルドが始まる．さくらのVPS上で実行しちゃったんですが，3時間に渡ってロードアベレージ25〜30という酷い状態が続き，なんとか完遂． 出かける直前に実行して，出かけた
sshとかでログインしたときのメッセージを変更する
/etc/motd かなりメモエントリー． % sudo emacs /etc/motd ここのテキスト情報を編集すると，ログイン時のメッセージを変更できます． motdは「Message of the day」の略で、その日のお知らせという意味になります。 ログインした時にユーザーにメッセージを表示する なるほどー． 変更してみた Welcome to "ayumusato.com" !! ,___ _______ ___, \ \` `/ / _ / 0 0 \ ( \ >= Y =< ) ) \__ w __/ ( ( /`+=+=o=+=+`\ \ \__/ \__ \/ ) ( \ / / \ \ \ / / \ \ / \/ /-._________.-\ \/ (((_) (_))) ( provided by SAKURA Internet [Virtual Private
既存のPHPを5.3の名前空間仕様に置き換えてみたときのメモ
5.2以前の命名規則の工夫と，5.3以降の名前空間 なんだかんだでPHPですねー．というわけで，今回は，自作Fwを調整してる中で得た，名前空間に関する知識をメモ． PHP5.3から名前空間がサポートされました．それまでは，PEARをはじめとして，あらゆるライブラリ類は命名規則の工夫によって，何とかしてきたわけですが，5.3以降は名前空間を利用してライブラリを構成することができます． ちなみに，名前空間バリバリなPHPのWebフレームワークには，Symfony2とか，Lithiumがあります．Lithiumはファイル構成とかを見た感じでは，結構好み． 5.2以前の命名規則 PHP5.2以前の世界では ファイルパス : Ah/Foo/Bar.php クラス名 : Ah_Foo_Bar こんな感じで，ディレクトリのセパレータがクラス名のアンダースコア（ _ ）として表現されて対応していました．こ
phpDocumentorを導入して，Ext JSのAPIドキュメントっぽく出力
phpDocumentorのインストール phpDocumentorは，PHPのコメントを解析して，自動でドキュメントを出力してくれます． とりあえずpearでインストール % sudo pear install phpdocumentor するするっと． インストールとか使い方は，このあたりを参考に phpDocumentor - PHPDocに代わるAPIドキュメント自動生成ツール - Do You PHP? 基本的な説明が一通り． phpDocumentorでドキュメントの自動生成 同じく基本の解説系．文字化け対策等も色々ありますが，生成されたHTMLに含まれるcharset=iso-8859-1をざっくりとcharset=UTF-8とかに置換するだけでOKっぽい． phpDocumentor tags 公式ドキュメントを見て使いそうなタグの種類を把握するのが一番手っ取り早い感じ．
nodeJSでつかえるMySQL ORMのSequelizeを触ってみる
SequelizeはnodeJSで使えるORM npm install sequelizeでサラッとインストールできます．MySQL本体さえ入っていれば，すぐに使えます． 初期化 Sequelize自体は，requireして，必要な情報を与えてnewすれば簡単に初期化できます． var Sequelize = require('sequelize').Sequelize; var Seq = new Sequelize('データベース名', 'ユーザー', 'パスワード'); /* hostとかportを指定するときはこう var Seq = new Sequelize('データベース名', 'ユーザー', 'パスワード', { 'localhost', 3306 }); */ モデルをつくる 最低限のモデルの定義．ここではUserモデルに対して，文字列型のユーザー名を定義しました． va
PHPカンファレンス関西に行って．発信力と熱さを感じてきた
PHPカンファレンス関西に遠征してきました PHPカンファレンス関西 さる2011年4月2日に，PHPカンファレンス関西に名古屋から参加させていただきました．集合写真では，名古屋遠征組でセンターに居座るという暴挙を犯してきてしまいました．ごめんなさい！（眼鏡と室内帽子の失礼なやつが自分） 名古屋遠征組の犯行写真 以下，"本編セッション"と，"LT+懇親会LT"は，それぞれを分けて感想をば． 自分は，名古屋のWeb制作会社に勤めて，プログラマ2年目を満了した頃のPHPerです．普段はフロントエンド寄りの実装してます． ※テキストだらけで読みづらい記事となっております．ごめんなさい． 本編セッションつらつら 全体的には，PHPの話題というより，クラウドとかアーキテクチャとかの話が多かった印象です．PHPに関連した周辺トピックという感じでしょうか． 得たところ プログラム – PHPカンファレン
社内講習わくわくjQuery編3 - 書くようになったら気をつけたい5つのこと
TIPSというかオマケ プログラマからするとオマケじゃなくて，本編に相当してる気もしますが，以下つらつらと．世間的には色々な入門書とかで散々言われてるような，出がらしレベルの内容です． これまでにほとんど言及していない変数とか宣言とかキナくさい単語が出てきますが，気になったときに調べてみればいいと思います． スタイル操作はCSSに任せて，jQueryは控えめにする jQueryはロジックを含みます．見た目の調整に関わるスタイリングは，なるべくCSSに任せてjQueryスクリプトの中は控えめに，簡潔に保ちます． $(function() { $('div').css('border', '2px solid blue').css('color', 'red').css('opacity', 1); $('div').css('border', '1px dotted silver').css
社内講習わくわくjQuery編2 - リファレンスから使えそうな機能をピックアップする
各領域の主要な機能 ( メソッド ) jQuery - StackTrace Main Page - jQuery JavaScript Library jQuery API Referenceにならって，jQueryの機能を分類し，各領域の主要な機能を紹介します． 詳細な日本語訳はすでに存在するので，自分のやりたいことを大分類から探していくことさえできれば，リファレンスも有効に活用できます． ※CSSはAttributesと何となく近しいので，まとめてしまいました．style attributeということで． セレクタ ( Selector ) Selectors - jQuery API 1.4.4 日本語リファレンス - StackTrace CSS3までのセレクタがJavaScriptでも使えると思ってください．ただし，一部は下記に示すように，jQueryの独自仕様による記法もある
社内講習わくわくjQuery編1 - jQueryを使ってみよう
今回の目標 読める＋書ける＝学べる 2時間ちょっとでいきなり書けるようになる訳はありませんが，書いてみないと覚えられないので，2時間かけて触ってみて独学できるようにします． 最初に，1+1=2の原理を覚える必要はないので，2=1+1でも 2=2＊1 でも 2=1/2＊4 でもいいので，やりたいことをやってみるのが一番です． やること jQueryセレクタをつかってみよう 要素をブン回してみよう スライドショーの動きを追ってみよう 開閉メニューの動きを追ってみよう やらないこと プログラムの基本（習うより慣れる） JavaScriptの構文（書きながら覚える） jQueryPluginの使い方（オプションをいじる以上のことをやろうと思うと難しい） thisなんてしりません $.eachなんてしりません 変数とかIFなんてわかりません jQueryを使えるようにする Downloading j
node.jsとsocket.ioを使って接続する実装サンプルと，ポートの設定周りをごく基本的に
インスパイアされて試してみた node.js+socket.ioを使ったライブコーディングwebアプリを作ってる - すぎゃーんメモに影響されて，ちょうどnode.jsを触っていたので，自分もnode.js+socket.ioを試してみました． コードや設定は別途調べて自分なりに書いてみたり．なかなか勉強になりまして，ちょっと分かってきました．試してみたらワクワクしてきますね！ リアルタイムな実装が，こんな簡単にできるなんてすごい， 今回は，それらのごくごく基本的な実装と設定周りをまとめました．サンプルコードは，socket.ioを動かすところまでを最小限に記述しています． node.jsを動作させ始めるまでの道のりはnode.js用の環境作り - ディレクトリ構成とnginxの設定から起動テストまでとか，node.jsとnpmのインストールをしたメモとかを． サーバーサイドの実装と設定
node.js用の環境作り - ディレクトリ構成とnginxの設定から起動テストまで
開発環境を設定してみる 前回の，node.jsとnpmのインストールをしたメモ（CentOS さくらのVPS）でnode.jsとnpmをインストールしましたが，まだ環境設定ができてなかったので今回も引き続き下準備． (仮に) /hogehoge/public/dev/ で開発することに．環境のディレクトリ構成とか，サーバー設定についてあまり参考になる記事を見つけられなかったので，以下適当に設定をしてみた．サーバーは，nginxを使います． ディレクトリ構成の予定 /hogehoge/public/dev/server.js : 8124をlistenするHTTPサーバー的なJSファイル．． /hogehoge/public/dev/app/ : その他lib的に，nodeで実行するJSを設置する． /hogehoge/public/dev/www/ : 公開ディレクトリとして，CSSやクラ
Tower - GitをGUIから操作できるクライアントソフト
Tower - The most powerful Git client for Mac Sign up for our newsletter and download the free beta to receive a 10% discount at launch! 今はまだβ版としてフリーで提供されていますが，いまのうちからニュースレターを受け取っておくと，製品版も10%OFFで買う権利をもらえるようです． (2011-02-16追記) v1.0になったようです．売価は日本円で¥5,499です．上記の10%オフで¥4,949でした．為替レートで変動する価格なのかは未確認です． GUIのクライアントソフトといえば，SVNでいえばVersionsが有名ですが，TowerはそれのGit版だと思ってもらえばOKです． ただのリコメンド記事なので，以下はさらっと流しつつ，興味のある方はぜひ使っ
Closureって呼ぶな！（PHP5.3 無名関数）
"無名関数は、現在は Closure クラスで実装されています。 これはあくまでも内部実装の問題であり、この事実に依存したコードを書いてはいけません。 " http://bit.ly/eHO3AyWed Feb 02 00:25:56 via Echofonあほむ ahomu うーむ，動くけどダメっていうパターン． サンプルコード $Hoge = new Hoge(); $Hoge->hogehoge(function() { return 'hogehoge'; }); class Hoge { public function hogehoge(Closure $func) { echo $func(); // 'hogehoge' } } 上記のようなコードで引数の型っぽく指定できるが，Closureというクラス名に依存すんな，ってことなので実際にはNG． if ( $func ins
PDOStatement::fetch の返り値パターンのメモ
PDOStatement::fetchに指定できる各fetch style PHP: PDOStatement->fetch - Manual mixed PDOStatement::fetch ([ int $fetch_style = PDO::FETCH_BOTH [, int $cursor_orientation = PDO::FETCH_ORI_NEXT [, int $cursor_offset = 0 ]]] ) PDOStatementオブジェクトに関連付けられた結果セットから1行取得します。 fetch_style パラメータは、PDO がその行をどの様に返すかを決定します。 ドキュメントを読んでも分かりづらいので、下記のfetch_styleについて結果をdumpしたコードを示す。 PDO::FETCH_ASSOC PDO::FETCH_BOTH PDO::FETCH
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
