javascript
FRPとは何なのか？時間軸に対する値の変化をする型なのか、パイプライン処理を表現しやすくする処理なのか。 自分が何がわかっていないのかわからないので、とりあえずポエムで吐き出します。 — FRPに関して調べてるといろいろな解説がされています。 Q. （…
みなさんはAngularJSアプリケーションを作るさいに、ドキュメントの生成をしていますか？ AngularJSではngdocという形式のドックコメントでドキュメントを生成できるDgeniを使っています。では、AngularJSで作ったアプリケーションはどうするかと言うといく…
この投稿はAngularJS Advent Calendar 2014の4日目の記事です。 今年も昨年に引き続き、yeomanを使用したAngularJSの始め方です。 気がつけばAngularJS用のyeomanのジェネレーターがとんでもない数になってきました。 （なんとBackbone.jsの4倍！） 昨年まで…
grunt-dgeniをリリースしました。 generating documentation for grunt task grunt-dgeni - https://www.npmjs.org/package/grunt-dgeni k-kinzal/grunt-dgeni - https://github.com/k-kinzal/grunt-dgeni Dgeniは優秀なドキュメントジェネレーターなのです…
DgeniでAngularJSアプリケーションのマークダウン形式のドキュメントを生成するdgeni-markdownをリリースしました。 k-kinzal/dgeni-markdown dgeni-markdown Dgeniはngdoc形式のドックコメントをサポートしているため、AngularJSアプリケーションのドキュメ…
Webアプリケーションを開発しているとCORSの関係でプロキシサーバーを立ち上げたくなることがありますよね。 通常であればgrunt-connect-proxyを使ってローカルに立ち上げた別のサーバー（StandaloneとかVagnratとか）に転送してあげればそれですみます。 し…
Javascriptで大量のサムネイル画像を生成する必要があったのでそのお話です。 Javascriptで画像のサムネイルを作成する場合の定番的な手法として、 Imageを作成 CanvasにImageを書き込み Canvasで変形 CanvasからData URLに変換 という流れがあります。 var …
AngularJSで新しい設計を試してみたのでメモ。 AngularJSではServiceに関数やオブジェクトを登録して、Controllerや別のServiceから呼び出せるようにできます。 例えば標準の$timeoutでは関数を、$httpでは関数にヘルパーメソッドを追加したものをServiceと…
前回おこなったyeomanのgeneratorのgenerator-chrome-extensionで生成したひな形でデバッグやビルドの方法の続きです。 今回は一歩進めてTravisCIで継続的にインテグレーションと野良Extensionのデリバリーを行っていきます。 TravisCIでビルドをする GruntJ…
前回の続きです。 generator-chrome-extensionで生成したひな形のタスクを紹介していきます。 Gruntfile.js 生成されたひな形のGruntfile.jsを見てみると4つのタスクが登録されています。 debug test build default 基本的には上の3つのタスクだけでChrome e…
ネタをもらったのでChrome extensionのひな形を作って、CIにのせるまでのまとめていきます。 Yo!! yeomanさんにはextensionのひな形を作るgeneratorがあるのでそれを利用します。 generator-chrome-extension web関係で何か作るときは、まずyeomanさんのgene…
Chrome拡張でページのwindowオブジェクトを取得するのに少し詰まったのでメモです。 Chrome ExtensionとOn Demand JavaScript Chrome拡張では2つのwindowオブジェクトが作られます。 1つは対象ページのwindowオブジェクト、もう1つはChrome拡張のwindowオブ…
当サイトのRAKUGAKI PROGRAMERSをカスタマイズをしました。 前から気になっていた以下の点をカスタマイズしました。 パフォーマンス改善 シェアボタンの強調 サイト内回遊の導線を追加 行間、字間などデザインの調整 これで直帰率を下げたいところです。 つ…
GruntJSでSSTP通信を行うgrunt-sstpというGruntJSプラグインをリリースしました。 npm - https://www.npmjs.org/package/grunt-sstp github - https://github.com/k-kinzal/grunt-sstp ようはこういうことをするためのプラグインです。 使い方とか紹介はQiit…
ネイティブ並の早さを誇るJavascriptの高速レンダリングフレームワークのfamo.usにyeomanサポートと、チュートリアルが来ました。 Install - https://famo.us/install Courses - https://famo.us/university famo.usと言えばこのデモが有名ですね。（HTMLは…
普段開発するさいに3面構成（左半分にエディタ、右下半分にターミナル、右上半分にブラウザ）でやってるのですが、Chrome Devtoolsを表示するとHTMLが全然見えなくて困ります。 そこでGrunt serverにJSエラーでも表示できないかなと思ってたら見つけました。…
Dropo（どろっぽ）というWEBサービスのモックアップを作成しました。 Instant image sharing Dropo http://dropo.in サイトにアクセス中の人たちの間でだけ画像を共有する、瞬間性の画像共有サービスです。 作成動機がPusherを使って何か作りたい！だけの一…
前の記事にて作ったSeleniumで各ブラウザのKeyboard Evenetを調べるスクリプトをTravis CIに対応してみました。 https://github.com/k-kinzal/keymap それで出来たのがこんな設定です。 .travis.yml language: - php - node_js php: - '5.4' node_js: - '0.1…
新年あけましけおめでとうございます。 年始一発目なので、前の記事でメモしていたJavascriptのKeyboard Event関係をまとめました。 ただ、DOM Level3の仕様が揺れていたり、DOM Level2ではキーボード系のイベントがベンダー依存となっているため、情報を漏…
自作のAngularJSで組んでるアプリでKeyboard eventが必要になったので、簡単なライブラリを組んでたらハマったのでメモ。 UnitTestでChrome、Firefox、PhantomJSとやっていて、全部実装が違うってどういうことなのかと。 FX https://developer.mozilla.org/e…
Tumblrで使う関連リンク用のスクリプトを作りました。 最初はtumblr-in-linkを使用してみましたが、遅いし、見た目が好みでなかったので、シンプルに一覧表示するものを作ることにしました。 使い方はTumblrのカスタマイズ画面からHTML編集で <div class="related-posts"> <h3>related posts</h3> <script></div>…
前回書いたAngularJS Startup Advent Calendar 2013でAngularJSをやる上で設定しておくと便利な設定を書き損ねたので書いておきます。 前回書いた状態でgrunt buildを行うとdistディレクトリに以下のように出力されます。 dist/ └──bower_components/ ├──ang…
AngularJS Startup Advent Calendar 2013の5日目です。 AngularJS Startupということで、Yeomanを使用したAngularJSの始め方です。 今回、使用している環境は以下になります。 Mac OS X 10.9 node 0.10.22 ruby 1.9.3p484 node環境にはn、ruby環境にはrbenv…
AngularJS 1.2.0が来たのでいろいろ遊んでいます。 ただ、$sceでハマりにハマったので備忘録がてら残しておきます。 ‘unsafe:blob’ error AngularJS 1.2.0でsame originな画像のURLをURL.createBlobURLでBlobに変換してimg要素に設定すると、こんなエラーが…
QiitaのAdbend Callender 2013に登録しました。 AngularJS Startup Advent Calendar 2013 でyeomanを使ったAngularJSプロジェクトの作り方を書きます。 ちょうど、最近AngularJSが1.2.0にUpdateして、良い機会なのでまとめ直そうと思います。 今回はGruntJS…
AngularJS用のAPIドキュメント生成ツール Docular の紹介です。 Docular AngularJSというとngdocのイメージが強いですが、こちらのDocularの方が使い勝手が良く愛用しています。 Docularは AngularJSのAPI Referenceと同じドキュメントを生成 メニュー毎にモ…
JavascriptやCSSを結合したりminifyをしてくれるgrunt.jsを使い始めたのでメモ。 詳しくはこのあたりを参考。 https://github.com/cowboy/grunt http://hamalog.tumblr.com/post/18137176043/grunt-js-css このgrunt.jsにはwatchという監視機能があります。 …
ちょっとAngularJSで困ったのでメモ。 AngularJSのStable(1.0.x)では$httpでXHR2.0のXHR.responseTypeを指定することができません。 また、overrideMimeTypeを触ることもできないため、AngularJSでXHRからblobを得ることができません。 https://developer.mo…
AngularJSでこれをやるとまずいということのメモ。 AngularJSではControllerなどの引数に$elementと指定すると、そのControllerを指定したelementを取得することができます。（API Referenceには載っていないですが） elementを取得できるので <div ng-controller="TestController"></div> function Tes…
Google Chromeの安定版でWevRTCがサポートされました。 という訳で早速、WebCameraのキャプチャーを取るスクリプトを作成してみました。 Media.js https://github.com/kozaki/media.js デモはこちらから http://logn.in/example/media.js/index.html Google …
