2012.04.10
15:49
author: taikiken
0件のコメント
Noe at the garden
http://skfb.ly/jg2fe1dca
WebGLのデモ。
スゲー！こんなこともできるのね。
この世界に足を踏み入れるのは勇気がいる。
SketchfabはTwitterかGoogleのIDで簡単にアカウント作成できます。
3D, WebGLなSNSなサイトなようです。
embed(iframe)コードも配布されていました。
300×200だけど、ポップアップ・リンクを仕込みました。
Chromeで見るといいよ
Noe at the garden
Sketchfabには他にも色々驚きの3Dモデルがあります。
Cat doing la migdiada
猫が気持ちよさそうに寝てる。
Suburban ecosystem
庭の植物、拡大すると…
2012.04.10
13:05
author: taikiken
0件のコメント
Androidの標準ブラザでのお話。
DOMコンテナに設定したoverflowでscroll, autoを設定してもhiddenになっちゃうんだね。
overflow: scroll; overflow: auto; |
良く知られたことなんだ。
困るなぁ。
Galaxy S2 LTE, Android 2.3.6 で確認しました。
まぁ、あの画面サイズでコンテナサイズを固定する方が悪いと言えば悪いけど…
自分が作ったサイトじゃないので、本当に困るなぁ。
2012.04.10
12:25
author: taikiken
0件のコメント
HTML5 Canvas でインタラクティブなの作るよ、でもその前に…
Canvasの初歩の初歩。
よちよち歩きのメモ。
Canvasするなら、まずブラウザが対応しているか調べないと。
HTML
<canvas id='canvas'></canvas> |
JavaScript
*DOMContentLoaded, onLoad で実行
function isCanvasSupport () { return !!document.createElement('canvas').getContext; }; if (isCanvasSupport()) { console.log('使えるよ'); } else { console.log('使えないね'); } |
Modernizrを使う。
if (Modernizr.canvas) { console.log('使えるよ'); } else { console.log('使えないね'); } |
2012.04.05
20:17
author: taikiken
0件のコメント
gskinner先生のCreateJSがpublicになった様子。
https://github.com/CreateJS/
CreateJSには以下の5つのプロジェクトが含まれているようです。
SoundJS
PreloadJS
EaselJS
TweenJS
Zoe
Canvas操作でお馴染みのEaselJSをはじめとするそうそうたるライブラリです。
次期Flash CS 6.0に搭載される予定のCanvas書出機能はCreateJSが使われるようです。
Adobe Working With CreateJS (Grant Skinner) To Let Flash CS6.0 Export To HTML5 Canvas
Adobeと深くコミットしてるんですね。
ビデオはYoutubeにもあります。
Sneak Peek: Export to HTML5 from Flash Professional
CreateJS Official Site
http://createjs.com/#!/CreateJS
2012.03.29
18:56
author: taikiken
6件のコメント
Flash Player 11.2, AIR 3.2 が出たので開発できる環境だけは作っておくの巻き。
・Flex SDK最新版をダウンロード
http://www.adobe.com/devnet/flex/flex-sdk-download.html
opensource.adobe.com じゃなかった…
Flex SDKはまだ4.6、Flash Player 11.2ようは4.7になる（？）のかな。
・AIR SDK 3.2ダウンロード
http://www.adobe.com/devnet/air/air-sdk-download.html
・Flex SDKを解凍して Flash Builder > sdk フォルダへ移動
フォルダ名を[4.6+AIR3.2]へ変更。
・4.6+AIR3.2 フォルダへAdobeAIRSDK.tbz2を移動
・ターミナル起動
cd "/Applications/Adobe Flash Builder 4.5/sdks/4.6+AIR3.2" sudo tar jxvf AdobeAIRSDK.tbz2 |
・Flash Builderの環境設定でsdkを追加
うむ、できた気がする。
FDT5でおなじみのpowerflasherさんのvideoを参考にしました。
https://vimeo.com/28170092
PlayerGlobalとDebug Playerアップデート
http://www.adobe.com/support/flashplayer/downloads.html
・PlayerGlobal (.swc)をダウンロード
/Applications/Adobe Flash Builder 4.5/sdks/4.6+AIR3.2/frameworks/libs/player/playerglobal.swc
と差し替え。
・Debug Player ダウンロード
“Download the Macintosh Flash Player 11.2 Projector content debugger (ZIP, 14.4MB)” をダウンロード
2012.03.28
03:12
author: taikiken
0件のコメント
CoffeeScriptをTextMate 2で開発できるように設定するの巻き。
TextMate 2にCoffeeScriptBundle.tmbundleをインストール。
Text editor plugins
github wikiに様々なeditorのPlugin情報が記載されています。
TextMateようPlugin(bundle)はCoffeeScriptのjashkenas (Jeremy Ashkenas)さん謹製。
CoffeeScriptと同じくgithubにあります。
coffee-script-tmbundle
インストールはTextMate.appの中にするらしい。
README.markdownに詳しく書かれています。
■TextMate 2を起動。
Preference > Bundles
CoffeeScriptをチェック
■path設定
ターミナルでパスを確認
echo $PATH |
パスが表示されるのでコピーしておく
TextMate 2にパス追加
Preference > Variables
[+]
Variable Name: PATH
Value: コピーしたパスをペースト
modeをCoffeeScriptへ
arr = [1..3] last = x for x in arr console.log "last = #{last}" |
command+r
last = 3
無事実行できた。
めでたしめでたし。
update 2012-04-16
CoffeeScriptBundle.tmbundleのインストール場所
TextMate.appパッケージの中でなくても良さそう。
mkdir -p ~/Library/Application\ Support/Avian/Bundles cd ~/Library/Application\ Support/Avian/Bundles git clone git://github.com/jashkenas/coffee-script-tmbundle CoffeeScriptBundle.tmbundle |
ライブラリのApplication SupportフォルダにAvianフォルダを作る。
AvianフォルダにBundlesフォルダを作る。
このフォルダへgit cloneする。
ここでも認識できる様子。
2012.03.27
19:08
author: taikiken
0件のコメント
SassやCoffeeScriptをイジクリいじくりしてる訳ですが、コマンドラインでコンパイルなんてのはしたくない不精者です。
Sass+Compassは、Compassサイトから自動コンパイルアプリを購入して使っています。
CoffeeScriptはどうしようかしらと思ってたら神アプリがありました。
CodeKit
http://incident57.com/codekit/
CodeKit automatically compiles Less, Sass, Stylus, CoffeeScript, Jade & Haml files. It effortlessly combines, minifies and error-checks Javascript. It supports Compass. It even optimizes jpeg & png images, auto-reloads your browser and lets you use the same files across many projects. And that’s just the first paragraph.
今はやりのもろもろを自動コンパイルして画像も若干最適化する、らしい。
Public Betaな現在は無料だけど自己責任で使っておくれってことです。
正式版は有料になるらしいけどありがたく購入させていただきます。
2012.03.27
01:24
author: taikiken
0件のコメント
まじで可愛いCoffeeScriptを使うための最初の一歩。
http://coffeescript.org/
【インストール】
Node.js
Node.jsが必要なのでまずインストール。
http://nodejs.org/
Downloadリンクから.pkgをダウンロードしダブルクリックでインストール。
gcc
gccが必要なので確認。
ターミナルを起動。
gcc |
i686-apple-darwin11-llvm-gcc-4.2: no input files
と表示されればOKだけどLionさんだと gcc が見つからない様子。
Xcode
Xcodeをapp storeからダウンロードしインストール。
これでgccもインストールるされるらしい。
npm
curl http://npmjs.org/install.sh | sudo sh |
インストールされたか確認
node -v npm -v |
CoffeeScript
sudo npm install -g coffee-script |
インストールされたか確認
coffee -v |
update
あ、「CoffeeScript マジ Coffee でかわいい」と教えてくれたのはこちらのサイトです。
glass factoryさんのサイトはgitとかお料理とか勉強になることばかりです。
2012.03.26
20:08
author: taikiken
0件のコメント
【メモ】
Sass+Compassでclearfix
Scss
@import "compass/utilities/general/clearfix"; .clearfix { @include clearfix; } .legacy-clearfix { @include legacy-pie-clearfix; } .pie-clearfix { @include pie-clearfix; } |
CSS
.clearfix { overflow: hidden; *zoom: 1; } /** legacy-pie-clearfix */ .legacy-clearfix { *zoom: 1; } .legacy-clearfix:after { content: "\0020"; display: block; height: 0; clear: both; overflow: hidden; visibility: hidden; } /** pie-clearfix */ .pie-clearfix { *zoom: 1; } .pie-clearfix:after { content: ""; display: table; clear: both; } |
overflow: hidden;加えたら:afterいらないってこと？
overflow: hidden;がまずい場合はpie-系使うで良い？
2012.03.26
17:24
author: taikiken
0件のコメント
TechCrunchで紹介されていたMixpanel Flowを「イナヅマtvログ」に導入しました。
Webサイト上のユーザの“動線”を分析するMixpanel Flow–無料で提供開始
サイト分析ツール。
ユーザー導線を視覚的に表示してくれるのが特徴のようです。