not good but great

プログラミング、アート、映画・本の感想について書きます。

Javascript

TitaniumでCommonJS仕様に乗っ取って、ファイルをincludeする

前回のエントリの最後で外部ファイルの読み込みをどうすれば良いのだろうかというのを書きました。調べてみて書き方が少しわかったので、記録しておこうと思います。 ・前回エントリ TitaniumのYQLで複数フィード読み込み、Backボタンの文字色を変える - not…

TitaniumのYQLで複数フィード読み込み、Backボタンの文字色を変える

競馬ニュースとまとめサイトを読み込む タブを2つ設けて、競馬ニュースメニューとまとめサイトメニューにしてみました。タブを押せば、ニュースやまとめサイトに切り替えることができます。 フィードを複数読み込む var query = "select * from rss where ur…

TitaniumでJRAのRSSフィードを読み込んで、ショボい競馬ニュースアプリを作ってみる

競馬ニュースアプリみたいなのを作る 競馬をやるときに、シンプルにニュースだけ読みたいアプリがあったらいいなと思っていました。そこでTitaniumでRSSフィードを読み込んで表示するだけのものを作ってみることにしました。ニュース元はJRAが配信しているニ…

Titaniumでタブグループを使って、タブメニューを作る

タブメニューを作成する ドットインストールを参考にしました。 #25 タブグループを作ってみよう (2) | Titanium Mobile入門 - プログラミングならドットインストール タブグループを作成 var tabGroup = Ti.UI.createTabGroup(); ウィンドウを作成 var win1…

Titaniumでファイルの読み書きを行う

ファイルに読み書きを行う ドットインストールを参考にしました。 #20 ファイルの読み書きをしてみよう | Titanium Mobile入門 - プログラミングならドットインストール データを定義 var data = {"tanaka":100,"satou":200,"yamada":340}; データを配列で定…

Titaniumで地図にピンを表示する、フォームを作る

地図にピンを表示する ドットインストールを参考にしました。 #17 地図を表示させてみよう (2) | Titanium Mobile入門 - プログラミングならドットインストール コード var ebisu = Map.createAnnotation({ latitude:35.645, longitude:139.71, title:"ebisu…

Ti.Map.createViewがundefinedのときは、ti.mapモジュールを追加する

地図を表示する var map = Ti.Map.createView({ mapType:Ti.Map.STANDARD_TYPE, region:{latitude:35.456,longitude:139.71,latitudeDelta:0.01,longitudeDelta:0.01}, animate:true, regionFit:true, width:300, height:400 }); ドットインストールを参考に…

Titaniumで真木よう子の画像を表示してみる

折角なので真木よう子で練習しよう Titaniumで画像を表示するというチュートリアルを見ました。サンプル画像を表示させてもおもしろくないので、自分の好きな女優である真木よう子を表示させることにしました。#14 画像を表示させてみよう | Titanium Mobile…

Titaniumでフリップアニメーションでページを切り替える

ドットインストールでウィンドウの切り替えのチュートリアルを見ました。実際自分でコードを書いてみることにしました。 #12 ウィンドウを切り替えてみよう (1) | Titanium Mobile入門 - プログラミングならドットインストール フリップ効果でページ切り替え…

Titaniumでボタンを押してアラートを表示させてみる

ボタンを設置する var button = Ti.UI.createButton({ title:"push me", top:100, height:30, width:200 }); ボタンの文字は「text」ではなく「title」であることに注意します。位置や大きさを決めるところはラベルと同じです 押したときの処理 button.addEv…

Titanium MobileでHello Worldする

ドットインストールを見ながら使い方を学んでいます。先日環境設定ができたので「Hello Wolrd」をさせてみようと思います。 ソース window,view,labelに分けて考えるみたいです。 //win var win = Ti.UI.createWindow({ backgroundColor:"#EBE2D9" }); //vie…

Titanium Mobileで"java.net.SocketTimeoutException: Read timed out"が出たらProxyの設定を確認

Titanium Mobileを使い始めてみた スマホアプリの開発をやってみたいと思い、「Titanium Mobile」の使い方を勉強し始めました。 なぜTitanium Mobile? 「Titanium Mobile」を選んだ理由は、作ってみたいアプリがゲームのような難しいものでもなく、大規模な…

CreateJSで外心と外接円を描画してみた

ボロノイ図を作ろうと思ったが難しい イケテルボロノイ図のデモを見ていたら、自分でも作りたくなりました。 Voronoi Graffitiボロノイ図はものすごくざっくり言うと、各点の垂直二等分線をいい感じに繋いだものです。 HTML5のCanvasでボロノイ図をかいてみ…

CreateJSでただ円を移動させて、自作スクリーンセーバー

demo Pixel Fire - CodePen こういうのをつくろうと思っていましたが、揺れの動きを作るのが難しいです。sin,cosで座標の位置を変えると少しはそう見えるんですけど、同じ動きをしている円がすぐ目につくようになってしまいます。そのへんはあきらめて、ぼー…

CreateJSでパーティクルをアニメーションさせてオリンピックのロゴをつくってみた

demo ソチ冬季オリンピックなんで何か作ってみようかと思いました。以前に下のサイトを見たことがあり、こういう感じで五輪を描画できないかなと思い、やってみることにしました。Chrome Experiment #500 工夫したところ RAFでアニメーションの高速化 cj.Tic…

Javascriptでパーティクルのクラスみたいなのを作って等速円運動させてみた

デモ こちらのサイトを見ていると、等速円運動のやり方が書いてありました。 http://www.fumiononaka.com/Business/html5/FN1401004.html: パーティクルのクラスを作る クラスについてよくわかっていない Javascriptでは正確に言うと、クラスはないというの…

CreateJS(EaselJS)で円を移動させて、大きさも変えてみた

CreateJSでWebGLが使える WebGL公式サポートにより、描画スピードが向上したと聞き、興味を持ちました。触ったことがないので、やってみることにしました。 ・参考 WebGL公式サポートで爆速になったCreateJS - GUGENKAブログ デモ 円が移動して、大きさが変…

Chart.jsを使って円グラフをアニメーションさせてみた

綺麗なチャートが作れる Chart.jsはCanvasにチャートを描画できるライブラリです。アニメーションもできて、デザインを工夫すれば、おしゃれな図を作成することができます。動きや配色によって、チャートのわかりやすさは大きく変わると思うので、このような…

Googleマップのデザインを変更して、線路のないGoogleマップを作ってみた

Google Mapのデザインは変えられる 世界中のデザイナーがGoogle Mapのデザインを投稿するサイトを見ました。Snazzy Maps - Free Styles for Google Mapsとてもかっこよかったです。自分も作ってみることにしました。 デモ 東京の地図から線路と道路を消して…

「○んこ」から連想する言葉を投稿するWebサービスをつくった

nko nko 「○んこ」から連想する言葉をTwitterに投稿するWebサービスをつくった。naoyashiga/nko · GitHub GitHub Pagesに公開させた。コードはここに公開してある。サービスを作る上でやったことを以下にメモしておく。 Tweetボタンの設定 Tweetボタンを作成…

jQueryのappendを使ってulの中に入れ子でliを追加する方法

デモ appendでネストさせるやり方 完成イメージ <div> <ul> <li>sample text</li> </ul> </div> ulの中にliが入って入れ子(ネスト)状態になることを目指す。 html,cssの準備 <div></div> div要素だけ書いておく。 div ul{ height:20px; background:#888; } div > li{/*入れ子失敗*/ color:red; } div …

Javasciptで二重否定を使う意味、「関数名」と「関数名()」の違い

二重否定「!!」の意味 以下はブラウザがCanvasをサポートしているかチェックしているソースである。 ・ソース元 http://tympanus.net/Development/InteractiveParticlesSlideshow/js/particlesSlideshow.js var canvas = document.createElement('canvas'); …

Youtubeのローディングアニメーションもどきを作ってみた

demo 以下の参考サイト見て、Youtubeのローディングデモを自分でもつくってみようと思った。自分でつくるといっても、ほとんど書き写しただけだが。下のデモでは影をつけたり、アニメーションのボタンをjsで操作する際にライブラリを使ったりしている。自分…

SVGをアニメーションさせて線を描画する

デモ ボタンを押すと線がアニメーションして描画される。SVGを使ったアニメーションするチェックボックスが新鮮だったので、自分もやってみることにした。 Animated Checkboxes and Radio Buttons with SVG | CodropsそこでSVGのアニメーションについて紹介…

Canvasで着物の柄である「毘沙門亀甲」を描画する

紋様の科学 (伏見康治コレクション (1))作者: 伏見康治,江沢洋出版社/メーカー: 日本評論社発売日: 2013/06/10メディア: 単行本この商品を含むブログを見るCanvasで遊ぶことが多いのだけれど、もう少し数学を使って描画やアニメーションをつくればおもしろい…

JavascriptでKeyの同時押しを判定する

demo codepenを見ていたら、綺麗なグラデーションでパーティクルが回るデモがあった。 Canvas Sparkle Light Trailこれを参考にシューティングゲームみたいなものを作れないかなと思った。しかし途中で挫折したww プレイヤーから弾が出るところまでは作った…

Content ScriptからBackground Scriptにメッセージ送り、popupに表示させる方法

何を作ったか? 以前、Youtubeの埋め込みコードに開始時間を設定する拡張を書いた。 YouTubeを途中再生できるように埋め込みコードを改変するChrome拡張をつくった - not good but great Chrome Web Store - Embed Screen Jump Code for YouTube™それの技術的…

nodejs,ntwitterでStreaming APIを使う

・参考 node.js + socket.ioでTwitterのStreaming APIを使ってみる - 大人になったら肺呼吸参考ページを9割以上書き写して、実行したらつぶやきを取得できた。ドキュメントも英語だけど、眺めたりしている。 User streams | Twitter Developers わからないこ…

nodejsでexpressコマンドが見つからない時の解決法

nodejsの環境構築 jsでサーバーサイドの処理が出来ると聞いて、nodejsを触ってみることにした。なぜか自分の環境にはすでにnodeが入っていた。 $node -v v0.8.19 バージョンは上の通り。 $npm -v 1.2.10 パッケージマネージャーのnpmもインストール済みだっ…

WebGLでフィルターを使用するライブラリ「 WebGLImageFilter」

Fast Image Filters with WebGL - PhobosLabインスタグラムっぽい加工ができるフィルターライブラリ。また被写体がテスラ、バッドマン使用でかっこいいんだこれがw 「なぜWebGLでやる必要があるのか」という疑問があるが、読んでみると、そっちのほうが早い…