はてなブックマーク

Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article?

Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article?

gulpで普段使っている(使っていた)モジュールをまとめてみました。 本当はHTML/CSS/JSや関連ツールのモジュールも載せたかったのですが、長くなりそうなのでユーティリティとして使っているものだけを先に記事にしました。 一応、ここで紹介するgulpプラグインに関してはブラックリストに入っていない事を確認済みです。 ちなみに、Qiita内だと下記の記事がまとまっていて大変参考になると思います。 gulp.js その4 プラグイン一覧 - Qiita 僕がGulpで使っているプラグインとnode.jsモジュール一覧 - Qiita サンプルのGitHub https://github.com/yuichiroharai/gulp-sample ここで使用しているサンプルは全てGitHubにて公開しています。 実際に実行してみるとイメージが掴みやすいかと思います。 gulp-plumber

ICSさんの「JenkinsでCI環境構築チュートリアル ～GitHubからWebサーバーへのデプロイ～」の記事が素敵過ぎて導入してみたかったんですけど、Jenkinsのためにサーバ借りるのがちょっと厳しいので断念。 上記の記事でも書かれていますが、WinSCPはコマンドラインから実行できるので、これをベースに上手いことgulpから叩いてFTPサーバに同期させてみる方法を試してみました。 やりたいこと WinSCPのディレクトリ同期が良さげなので、コレを使ってローカルからFTPサーバへディレクトリ同期をしたい パスフレーズ付きの秘密鍵を使った公開鍵暗号方式でセキュリティも担保したい gulpのファイル監視を起点にして、良い感じのタイミングで実行したい 動作環境 ローカル: Windows 7 64bit Webサーバー: heteml 今回はWindows限定の話ですが、Macだとrsyn

突然の宣伝ですが、「WebGL Bits」という実験サイトをやってまして、ここではWebGLで作ったちょっとした小ネタをいくつか載せています。 ちょっと前に「Simplex Noise」というGLSLで実装されたSimplex Noiseというアルゴリズムを使ってグラフィックパターンを生成するコンテンツを作りました。 今回はそのGLSL版Simplex Noiseの使い方やパターンの生成方法の考え方について説明したいと思います。 特にライブラリは使わず、直接WebGLのAPIを使用する前提の話になってしまいますが、基本的にGLSLの話しかしないのでもしかしたら何らかのライブラリで独自のシェーダーを使う場合にも応用が利くかもしれません（？） Simplex Noiseコンテンツの概要 「Simplex Noise」で作られるグラフィックパターンがどんな感じなのかは、上の画像やサイトを見てもら

gulpでTypeScriptをコンパイルするプラグインはいくつか種類があるようですが、今のところ自分はgulp-tscとgulp-typescriptの2つを試しながら使っています。 両方使ってみると分かるのですが、利用方法にかなり違いがあるのでお好みに合わせて選ぶと良いのではと思っています。 今回はそんな2つのプラグインの利用方法の違いについて説明します。 と、その前に。 書いている途中で気づいたのですが、今現在のgulp-tscは最新のTypeScriptを利用すると上手く動作しない場合があるようです。 GitHubのIssuesでも報告されていてPull RequestsにPRがたまっているので、これらを参考にしながら自分で修正すれば直るかもしれませんがまだ試せていません。 自分の環境だと/// <reference path="...">の指定がコンパイラに正しく解釈されずにコン

// グローバル変数 var global; $(document).ready(function () { console.log("start"); // コンソール出力 // ローカル変数 var local; // set1ボタンクリックで各変数に1を代入 $("#set1").click(function(){ local = 1; global = 1; console.log(global, local); // コンソール出力 }); // set2ボタンクリックで各変数に2を代入 $("#set2").click(function(){ local = 2; global = 2; console.log(global, local); // コンソール出力 }); }); HTMLのソースコードは特に載せませんが、idがset1とset2になっているボタンを配置して、J

gulpを使ってEJSテンプレートをHTMLに書き出す方法を試してみたので、その導入手順などをまとめてみました。 EJSについて HTMLを生成するテンプレートエンジンのひとつ Node.js環境で動作し、テンプレートタグ中の処理はJavaScriptで記述できる HTMLにテンプレートタグを埋め込む形なので学習コストが低い →　PHPみたいな事をJavaScriptでやるイメージ Webサーバ上で動的ページとして出力する使い方を想定しているっぽい けど、ローカル環境で静的ページとしての出力も可能（gulp/Gruntなどと連携すると簡単そう） よく比較に挙げられているJadeの場合はRubyのテンプレートエンジンHamlに影響を受けているらしく、テンプレートタグ以外のHTMLの記述も通常とは異なります（いわゆる短縮文法）。 Jadeの方がコードの記述量は抑えられて便利そうですが、学習コス

gulpで使えるライブリロード環境を探していたら、BrowserSyncというツールを見つけまして、試しに使ってみたらかなり便利だったので紹介します。 BrowserSyncの特徴 node.js上で動作 単体での実行やGrunt/gulpのプラグインとして利用可能 専用のWebサーバを構築して利用 同じURLを開いている複数のブラウザに対して、スクロールやページ遷移、フォーム入力などを同期 ファイルが更新されたら同期している全てのブラウザをリロード ブラウザにプラグインをインストールする必要なし タブレット/スマートフォンなどの実機からの閲覧も可能 主要なブラウザ/端末をサポート →　公式サイトの中段辺りに書かれています →　IEは7からみたいです サンプル動画 少し適当ではありますがサンプル動画を作ったのでご覧頂ければと思います。 https://www.facebook.com/ph

Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article?

Kazitori.jsをTypeScriptで使ってみたら、ちょっとおかしなハマり方をしたのでメモしてみます。 そろそろ pushState/popState を始めてみようかなぁと思ってたのですが、以下の点でKazitori.jsが気に入ったので、試しに使ってみました。 jQueryとかBackbone.jsなどのライブラリに依存しない。 Ajax通信やViewの変更等とセットになってない。イベントが発生するだけ。 要は、pushState/popStateだけを単独で使いたいなと思った訳です。 処理は自分で勝手にやるよ、と。 なんですが、 Kazitori.jsはCoffeeScript製でTypeScriptには対応していません。 Haxeには対応しているのに！ せっかく良い感じそうなライブラリがあるのに、手持ちのTypeScript環境で使えないのは何か悔しいので、Kazitori

Xcode 5 で新規に作ったiOS向けの Single View Application プロジェクトから Storyboardを削除してAppDelegateクラスとViewControllerクラスの紐付けを行う方法 をメモ。 0. プロジェクトの作成 新規にiOS向けの Single View Application プロジェクトを作成。 1. Storyboardを削除 Project Navigator（左側のツリー）から Main.storyboard を削除。（Move to Trash） 2. Info.plist を編集 XXX-Info.plist （XXXはプロジェクト名）を開いて Main storyboard file base name の項目を削除。 これで Main.storyboard への参照が無くなりビルド時のエラーが出なくなります。 3. AppD

ここで紹介する内容はAdobeやAppleが推奨する手順では無いと思われます。 一応、この方法で審査を通してアプリが公開しされた実績はありますが、必ず成功するかどうかは分かりませんので、あくまで自己責任でお願いします。 今回はiPhone向けに新しく追加された 120×120px のアイコンのみを追加する手順を紹介しますが、 iPad向けのアイコンも同様の手順でいけるかと思います。（未確認） また、この内容はFlashDevelop で AIR Mobile AS3 App プロジェクトを使用した場合の手順になります。 他の開発環境でも基本的な考え方は同じかと思いますので、適宜手順を変えて試してもらえればと思います。 参考サイト ・Support for new icon sizes in iOS 7 - Adobe Community http://forums.adobe.com/me