春のJavaScript祭りでAngularJSについてお話ししてきました

2014年05月20日

4月26日(土)にKDDI ウェブコミュニケーションズさんに会場をご提供頂いて開催されたJavaScriptのお祭り、「春のJavaScript祭り」で登壇してきました。 春のJavascript祭り – Javascript祭り | Doorkeeper 事のはじまりは主催のITかあさん(chihiro_kaasan)がTwitterで「JavaScriptの勉強会をやりたい」な感じの呟きに僕が「やりましょ!僕話しますよ!」って乗っかったとこから始まった感じのゆるめな始まりだったんだけど結果200人近いキャンセル待ちが出る程の人気となりました。いやーJavaScript怖いわー。 Web制作者の方々も「これ覚えとかないと今後やばいんじゃね?」なJavaScriptの脅威が肌感覚で感じてらっしゃるのかな?と思いました。いやーJavaScriptこわいわー。 僕のセッション というわけで、僕は実案件でもちょっと使った事のあるAngularJSについてのお話をさせて頂きました。僕はAngularJSをhtmlを拡張するフレームワークだと認識していて、htmlをベース(テンプレート)として書く事ができ、双方向データバインディング(この言葉カッコイイよね)によりデータが変更された際に即表示に反映される仕組みがもっともコアな部分なんじゃないかと思い、またその部分がもっとも分かりやすく「触ってみたい!」と思ってもらいやすい箇所だと思ったので、そこにフォーカスしたお話をしてみました。 全セッション 僕の他にも4名の方のセッションと5名のLTがありましたので紹介しますね。 コピペJavascriptよさようなら!15分でjQuery2がモリモリ書ける 松田千尋さん Twitter:@chihiro_kaasan URL:http://www.kaasan.info/ 制御構文と関数でもっと自由なjQuery 田島優也さん twitter[…..]

つづきをよむ

Dashすげー便利

2014年02月13日

結構前にインストールしてたんだけどそんなに使わなかったアプリが僕の中で人気急上昇中。 Dashとは 各種Web系ライブラリ等のドキュメントをローカルに保存しておいてオフラインでもサクサク検索できるアプリ。ローカルにインストールするからいちいちページが開かれるのを待たなくて良いしピンポイントに探せるし使い勝手は良いしドキュメントは自動でアップデートしてくれるしこれほどありがたいことはないと思う。 対応してるドキュメントは結構多くて、html, css, javascript,jqueryは当たり前で、JSライブラリ、バックエンドフレームワーク、CSS フレームワーク等、ホント色々ある。 一応無料で使えるけど、無料だとサクサク動くってわけじゃなくてページ表示の度にローディングされるから使おうと思ったら即買うくらいで良いと思う。 というか実は今までは無料版と有料版の違いが分からなくて「何だこれすげー遅い。使えんよ」て思いながら使ってて、そういえば有料にできるよなー、もしかしたら有料にしたら早くなんじゃね?と思って試したら爆速になった。いやお金は使うもんですね。 DashをAppStoreで開く すげーポイント オフラインだからとにかく速い 自動ドキュメントダウンロード タブ機能でよく使うライブラリを据え置き Alfred連携でさらに速い オフラインだからとにかく速い これはマジ。「今どき光回線だし公式見りゃよくね?」と思ってた僕がバカだった。公式見たいって時はブックマークか検索でまず公式ページを開いて、それからサイト内検索するって感じだと思うんだけど割と時間がかかるよね。最低2回検索してるんだし。それがオフラインだから激的に速い。インクリメントサーチな感じで検索窓に入力したら即座に探してくれる。 自動ドキュメントダウンロード ライブラリのバージョンが上がったらDashは自動でドキュメントをアップデートしてくれる。ただし自動でとはいえ、何でもかんでもダウンロードしてくれる訳じゃない。そもそも自分が使いたいドキュメントを対応しているドキュメントから選択したら選択したドキュメントだけローカルにダウンロードするんだけどそのローカルにダウンロードしたドキュメントが更新された場合は自動でアップデートしてくれるって感じ。 何だったら自動でダウンロードしてくれる事が嬉しいってことよりもむしろDashのドキュメント自動更新通知でライブラリのアップデートを知るみたいな感じになってる。[…..]

つづきをよむ

jQueryのwidth,height系メソッドの違いについて

2014年02月10日

jQueryには横幅とか高さを取得するメソッドがあってよく使うしすげー便利なんだけど、paddingも含めたいとかmarginも含めたいとか色々状況によって取得したい値が変わるんだけどイマイチ使い分けが覚えられないからメモ。 各メソッド メソッド 範囲 width() コンテンツ部分の横幅 innerWidth() padding含む横幅 outerWidth() border含む横幅 outerWidth(true) margin含む横幅 height() コンテンツ部分の高さ innerHeight() padding含む高さ outerHeight() border含む高さ outerHeight(true) margin含む高さ[…..]

つづきをよむ

Grunt+ST2な人がプロジェクトをチャチャっと開始する方法

2014年01月27日

昨日作業した制作途中のプロジェクトを今日続きから作業する時ってみんな最初に何やります? 僕は大体こんな感じ プロジェクトディレクトリをST2で開く プロジェクトディレクトリをターミナルで開く gruntコマンドを実行 ファイルの監視 ローカルサーバを立ち上げ ブラウザで開く この一連の作業を終えてから書きだしてる。 でもこれがちょっとめんどくさいなーって思う事がよくある。 ぼくはFinderのツールバーにターミナルとST2のアイコンを置いていて、そこにディレクトリをドロップしてるんだけど、上の作業をやる場合、ディレクトリを2回ドロップするんだよね、ターミナルとST2に。 それが何かめんどくさいなーと思ったっつーか同じ事2度やるの無駄だなぁと思ってて、何かいい方法ないかと色々探した結果結構良い感じになったので書いた次第です。 最終的な感じを試しに動画に撮ってみた。 ほら、何か良い感じ。 やったこと ターミナルからST2を開くコマンドを追加して2個のコマンドを同時に実行しただけ、カンタン。でもGruntでローカルサーバを立ち上げてブラウザで開く設定は別途必要ですよ。 ターミナルからST2を開くコマンドの追加はこれを一度ターミナルで打てば良い。 $ sudo ln[…..]

つづきをよむ

ローカルマシンにNode.jsをインストール

2014年01月25日

ここ数年、Web制作のフロントエンド界隈ではNode.jsがかなり重要な位置を占めてきてる感がある。 Node.jsとはサーバサイドで動くJavaScriptで、言ってみればPHPとかRubyとかみたいなものなんだけどフロントエンド界隈ではhtml、css、jsとかのビルドツールとして使われていたりして結構良い感じに効率化が図れたりする。 また、Node.jsはnpmというパッケージ管理システムを使っていて、npmを使ってプラグインをポンポンとインストールしていけるからカジュアルに好きな機能をすぐ追加できるのもステキ。 ちなみに僕の大好きWeb制作用ビルドツールのGruntもNode.jsのパッケージの1つ。正直GruntのためだけにNode.jsを入れても良いくらい。Gruntマジステキ。 というわけでとりあえずインストールしましょう。Node.jsは公式サイトのトップページにある「INSTALL」をクリックしてファイルを実行すれば勝手にインストールされます。お手軽、簡単。 で、インストールされたかどうかはターミナルで以下のコマンドを入力すればオーケー。 node -v これでこんな感じのがでればインストール成功。 v0.10.24 多分これでnpmも一緒に使えるようになってると思う。 とりあえずローカルサーバを立ち上げる Node.jsがインストールされたらまず試しにローカルサーバを立ち上げてみる。本家に書いてあるコードをコッペする。 以下のコードをどこか好きなディレクトリで hello.js として保存してみる。とりあえず今回はデスクトップに作りますか。 ■ hello.js var http[…..]

つづきをよむ

jQueryでChromeの場合$(function(){]); が画像読み込み前に実行される場合の対応

2014年01月24日

結構前から知ってはいたんだけどイマイチ対処法が分からなくてしょうがなくsetTimeoutでごまかしていたChromeでの $(function(){ }); が画像ロード以前に実行されてしまう件についてです。 $(function(){}); はページのロード後に実行されるはずなんだけど、Chromeだと画像の読み込みよりも前に実行されてしまうから、例えばフローとした画像しか入ってないブロック要素の高さを揃えるようなスクリプトがある場合に高さが0になったりする。 結構前から知ってはいたんだけどイマイチ対処法が分からなくてしょうがなくsetTimeoutでごまかしていたChromeでの $(function(){ }); が画像ロード以前に実行されてしまう件についてです。 $(function(){}); はページのロード後に実行されるはずなんだけど、Chromeだと画像の読み込みよりも前に実行されてしまうから、例えばフローとした画像しか入ってないブロック要素の高さを揃えるようなスクリプトがある場合に高さが0になったりする。 例えばこんな感じ # jade .wrap.clrfx .img img(src=”./kannomiho.jpg”) .img img(src=”./miyazakiaoi.jpg”)[…..]

つづきをよむ

Macのアプリで「タブ」「ウィンドウ」「アプリ」を切り替えるショートカット

2014年01月23日

Macですでに起動してるアプリを切り替えるときってみんなExposeなの?僕はWindowsからのクセでCmd+tabな人。で、タブの切り替えも同様にCtrl+tab。 で、1つのアプリって1ウィンドウで複数タブを開いていて、しかもそれが複数windowだったりするでしょ?ST2とかだと「他のプロジェクトのあのコードを見たい」って感じでポンポンディレクトリをドラッグしてウィンドウを作るって感じの運用をすることが多い。 これ、すげー切り替え面倒じゃない? 大体Cmd+tabでアプリを全部表に出してから触りたいウィンドウがタップできればタップするけど物によっちゃ完全に隠れたりしててExpose使わないといけなくて結構手間だったりする。 この結構面倒なやつが意外にもショートカットで何とかなるっぽいのに今日気付いた。どうやらOption+tabアクティブアプリのウィンドウ切り替えが出来るみたい。 まとめるとこんな感じ ショートカット 動作 Cmd + Tab アクティブアプリを切り替え Option + Tab アクティブアプリのウィンドウ切り替え Ctrl + Tab アクティブウィンドウのタブ切り替え[…..]

つづきをよむ

AngularJSでページロード時にコンパイル前のタグが表示されるのを防ぐ

2014年01月16日

以前IEの各バージョンでhtml、css、jsプロパティとかがどれくらい対応してるのかをまとめてそれをインクリメントサーチできる「IEEEeee」ってWebアプリをAngularJSで作ったんですが何点か気になったところがあったので直してみた。その1つが表題の件。 多分AngularJSを使い出して最初に気になるところだと思うんだけど新しい物をやり出した時って何となくそういうもんなんかなぁって放置することも多いんだけど今回は頑張った。つか調べただけやけど。 ロード中にコンパイル前のタグが表示される これ結構なんだかなぁな感じ。普通に {{ore.name}} とか出てくる。完全に呪文よね。これはとりあえず何とかし用途思ったら割と普通にそういった感じの対処をする機能があってビックリした。ngCloakってディレクティブがあるみたいでその名の通り覆い隠す感じなんでしょうね。これを使って解消すれば良いとのこと。 使い方 隠したい要素に ng-cloak と .ng-cloak を追加する。隠したい要素をラップしてる要素でも良い。 ■ html <div class=’dog’ mg-cloak class=’mg-cloak’> <p class=’name’>{{dog.name}}</p>[…..]

つづきをよむ

スクロールで隠れるナビゲーションメニューのJSがステキだったので勝手にプラグイン化しました

2014年01月15日

こちらのブログで公開されていたものがステキでした。 スクロールで隠れるナビゲーションメニューhidenavi.jsをjQueryで作りました | Kana-Lier カナリエ こういった隠す系の動きをやりたい事って結構多いですよね。 なのでいつもな感じでjQUeryにしてみました。勝手にやっちゃってすみません。 デモ ※ 画像とか勝手にこちらのサーバに置かせてもらってます。後日ちゃんと自分のものに変えますね、すみませんすみません。 ※ ごめんなさいあとで自分の作ったページで公開しますね。とりあえず今デモは削除してます。 ファイルはこちら スクリプトファイル 使い方 これで動きますよー <script type=”text/javascript” src=”jquery.js” ></script> <script[…..]

つづきをよむ

crontabでpython使った際にエラーが出たときの対応例

2014年01月12日

これ誰得な感じなんだけどちょっと知ったことがあったからメモ。 やりたかったこと Delicousにブックマークを追加したらはてブにも追加したかった、それだけ。何でそんな事をしたかったのかはまた別の機会に書く。 で、それをデバイス問わずにやりたいからChromeの拡張とかみたいに端末縛りがある方法とかはヤで何とかしてiftttみたいに「こっちに追加されたら自動でこれをやる」みたいにしたかったの。 そう考えるとiftttってすげーな。どういう手段からでもそのサービスへのアクションがあれば自動で別アクションをやってくれるって便利。つかiftttがはてブに対応してくれればそれで万事解決だよね。こういう時にローカルで戦ってる(よね?)サービスは不便。つかこれをやりたかった理由もその辺なんだけどまぁいいや。 タグが残念 で、まぁ実際はiftttでもDeliciousに追加したらメールを飛ばしてはてブに入れるって事も出来なくはないんだけど、それだとDelicious側でつけたタグが1つにまとまったタグになってすげー残念な感じ。例えば「html」「css」「js」ってタグをDeliciousでつけたらはてブでは「html css js」って1つのタグになっちゃう。すげー残念だしタグの意味がない。 だから何か別のいいソリューションはないかなぁって色々探してたら良い感じのがあったので見てみたらそれがPythonのライブラリでそれをcronすれば?って感じだったのでやってみたてとこまでがプロローグ。 ちなみに使ったライブラリはこちら Delicious に投稿したらタグも含めてちゃんとはてブに投稿できるようにした – 人生いきあたりばったりで生きてます@はてな これを今使ってるさくらVPSに入れようとした感じ。 やったこと Python2.7をインストール ライブラリをダウンロード、設定 cronで動かす[…..]

つづきをよむ