サクサク読めて、アプリ限定の機能も多数!
トップへ戻る
デスク環境を整える
qiita.com/yuichiroharai
元FLASHerで、現HTML5erないしWebGLerの荒井です。 FLASHerあるあるの 「なんでHTML5/JavaScriptには○○が無いんだ!」 に時折悩まされながらも、代替手段を模索しながら日々お仕事をしています。 で、そのあるあるのひとつに 「JavaScriptの有名なトゥイーンライブラリにはなんでserial/parallelが無いんだ!」 というのがありました。 serial / parallelって? 比較的最近のFLASHerがお世話になったであろうTween24の例だとこんな感じです。 // 1.と2.を同時に実行 Tween24.parallel( // 1. ここは順番に実行 Tween24.serial( Tween24.tween(box1, 0.7, Ease24._6_ExpoInOut).x(400), Tween24.tween(box2, 0
GLSLでは条件分岐をする際にif/else構文を使うと処理負荷が高いと言われています。 (その分だけ暖を取りやすくなるかもしれませんが・・・?) そこで、最初に考えつく代替案は三項演算子ではないでしょうか? vec3 BLACK = vec3(0.0); vec3 WHITE = vec3(1.0); vec3 color; // こんなif文は、 if (x < 0.5) { color = WHITE; } else { color = BLACK; } // こんな三項演算子に置き換える color = (x < 0.5) ? WHITE : BLACK; こんな感じでif/else構文を避けていくわけですが、この方法の欠点はベクトルを一度に条件分岐することができない事です。 ですが、step関数とmix関数を使うとベクトルの要素ごとに条件分岐をしてその結果をベクトルに直接反映させ
いやぁ、今年のWebGL Advent Calendarはレベルが高いですね・・・ 全然ついていけないので、ちょっと箸休めにシェーダーのビルド周りのお話をしてみます。 最近、Deja vu | KAMRAのGitレポジトリが全面公開されてたので、お宝探しに中を覗いていたのですが、その中でglslifyが使われていまして、コレは気になってたヤツ!だったのでちょっと色々試してみました。 一言で言えば、glslにrequireの仕組みを導入して、主に関数をモジュール化して別ファイルに分ける事が出来るやつですね。 node.jsで動きます。 とりあえずコマンドラインで使ってみる glslifyのインストール とりあえず、グローバルインストールで説明します。
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="...">の指定がコンパイラに正しく解釈されずにコン
「WebStorm」とJetBrains製品共通のChromeプラグイン「JetBrains IDE Support」を利用すると、ブラウザ上で実行されるJavaScriptでも、本格的なデバッグを行うことができます。 今回はそのデバッグ方法を紹介したいと思います。 使用するWebサーバは最近お気に入りの「BrowserSync」を使っています。 今回やる事 WebStormのコンソールにログを出力 WebStormのエディタで変数/プロパティの中身をリアルタイム表示 WebStormでブレークポイントを設定してJavaScriptを一時停止 → コールスタックを辿ったり、変数/プロパティの中身を調べたり 動作環境 Windows 7 64bit WebStorm 9 → 最近リリースされた最新版 JetBrains IDE Support 2.0.7 → Chromeプラグインの最新版
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
Gruntに代わるタスクランナー gulp を試してみた所、gulp.watch の挙動ではまった点があったのでメモしておきます。 ちなみに動作環境は以下のとおりです。 Windows 7 (64bit) node.js: ver 0.10.24 gulp.js: ver 3.8.7 監視対象がひとつでも存在している必要がある gulp.watch で監視するパターン(glob)にマッチするファイルが1つでも存在しないと、監視そのものが上手く動作しない様です。 var gulp = require('gulp'); gulp.task('watch', function (callback) { var path = "../scss/main.scss" gulp.watch(path, function (e) { // added, changed or deleted のどれかが発
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
このページを最初にブックマークしてみませんか?
『@yuichiroharaiのマイページ - Qiita』の新着エントリーを見る
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く