Javascript
前回のエントリの最後で外部ファイルの読み込みをどうすれば良いのだろうかというのを書きました。調べてみて書き方が少しわかったので、記録しておこうと思います。 ・前回エントリ TitaniumのYQLで複数フィード読み込み、Backボタンの文字色を変える - not…
競馬ニュースとまとめサイトを読み込む タブを2つ設けて、競馬ニュースメニューとまとめサイトメニューにしてみました。タブを押せば、ニュースやまとめサイトに切り替えることができます。 フィードを複数読み込む var query = "select * from rss where ur…
競馬ニュースアプリみたいなのを作る 競馬をやるときに、シンプルにニュースだけ読みたいアプリがあったらいいなと思っていました。そこでTitaniumでRSSフィードを読み込んで表示するだけのものを作ってみることにしました。ニュース元はJRAが配信しているニ…
タブメニューを作成する ドットインストールを参考にしました。 #25 タブグループを作ってみよう (2) | 【サポート終了】Titanium Mobile入門 - プログラミングならドットインストール タブグループを作成 var tabGroup = Ti.UI.createTabGroup(); ウィンド…
ファイルに読み書きを行う ドットインストールを参考にしました。 #20 ファイルの読み書きをしてみよう | 【サポート終了】Titanium Mobile入門 - プログラミングならドットインストール データを定義 var data = {"tanaka":100,"satou":200,"yamada":340}; …
地図にピンを表示する ドットインストールを参考にしました。 #17 地図を表示させてみよう (2) | 【サポート終了】Titanium Mobile入門 - プログラミングならドットインストール コード var ebisu = Map.createAnnotation({ latitude:35.645, longitude:139.…
地図を表示する 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で画像を表示するというチュートリアルを見ました。サンプル画像を表示させてもおもしろくないので、自分の好きな女優である真木よう子を表示させることにしました。#14 画像を表示させてみよう | 【サポート終了…
ドットインストールでウィンドウの切り替えのチュートリアルを見ました。実際自分でコードを書いてみることにしました。 #12 ウィンドウを切り替えてみよう (1) | 【サポート終了】Titanium Mobile入門 - プログラミングならドットインストール フリップ効果…
ボタンを設置する var button = Ti.UI.createButton({ title:"push me", top:100, height:30, width:200 }); ボタンの文字は「text」ではなく「title」であることに注意します。位置や大きさを決めるところはラベルと同じです 押したときの処理 button.addEv…
ドットインストールを見ながら使い方を学んでいます。先日環境設定ができたので「Hello Wolrd」をさせてみようと思います。 ソース window,view,labelに分けて考えるみたいです。 //win var win = Ti.UI.createWindow({ backgroundColor:"#EBE2D9" }); //vie…
Titanium Mobileを使い始めてみた スマホアプリの開発をやってみたいと思い、「Titanium Mobile」の使い方を勉強し始めました。 なぜTitanium Mobile? 「Titanium Mobile」を選んだ理由は、作ってみたいアプリがゲームのような難しいものでもなく、大規模な…
ボロノイ図を作ろうと思ったが難しい イケテルボロノイ図のデモを見ていたら、自分でも作りたくなりました。 http://codepen.io/neave/details/InhFqボロノイ図はものすごくざっくり言うと、各点の垂直二等分線をいい感じに繋いだものです。 HACKist » HTML5…
demo http://cdpn.io/nLCJp こういうのをつくろうと思っていましたが、揺れの動きを作るのが難しいです。sin,cosで座標の位置を変えると少しはそう見えるんですけど、同じ動きをしている円がすぐ目につくようになってしまいます。そのへんはあきらめて、ぼー…
demo ソチ冬季オリンピックなんで何か作ってみようかと思いました。以前に下のサイトを見たことがあり、こういう感じで五輪を描画できないかなと思い、やってみることにしました。Chrome Experiment #500 工夫したところ RAFでアニメーションの高速化 cj.Tic…
デモ こちらのサイトを見ていると、等速円運動のやり方が書いてありました。 http://www.fumiononaka.com/Business/html5/FN1401004.html: パーティクルのクラスを作る クラスについてよくわかっていない Javascriptでは正確に言うと、クラスはないというの…
CreateJSでWebGLが使える WebGL公式サポートにより、描画スピードが向上したと聞き、興味を持ちました。触ったことがないので、やってみることにしました。 ・参考 WebGL公式サポートで爆速になったCreateJS - GUGENKAブログ デモ 円が移動して、大きさが変…
綺麗なチャートが作れる Chart.jsはCanvasにチャートを描画できるライブラリです。アニメーションもできて、デザインを工夫すれば、おしゃれな図を作成することができます。動きや配色によって、チャートのわかりやすさは大きく変わると思うので、このような…
Google Mapのデザインは変えられる 世界中のデザイナーがGoogle Mapのデザインを投稿するサイトを見ました。Snazzy Maps - Free Styles for Google Mapsとてもかっこよかったです。自分も作ってみることにしました。 デモ 東京の地図から線路と道路を消して…
nko nko 「○んこ」から連想する言葉をTwitterに投稿するWebサービスをつくった。GitHub - naoyashiga/nko at gh-pages GitHub Pagesに公開させた。コードはここに公開してある。サービスを作る上でやったことを以下にメモしておく。 Tweetボタンの設定 Tweet…
デモ 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 …
二重否定「!!」の意味 以下はブラウザがCanvasをサポートしているかチェックしているソースである。 ・ソース元 http://tympanus.net/Development/InteractiveParticlesSlideshow/js/particlesSlideshow.js var canvas = document.createElement('canvas'); …
demo 以下の参考サイト見て、Youtubeのローディングデモを自分でもつくってみようと思った。自分でつくるといっても、ほとんど書き写しただけだが。下のデモでは影をつけたり、アニメーションのボタンをjsで操作する際にライブラリを使ったりしている。自分…
デモ ボタンを押すと線がアニメーションして描画される。SVGを使ったアニメーションするチェックボックスが新鮮だったので、自分もやってみることにした。 Animated Checkboxes and Radio Buttons with SVG | CodropsそこでSVGのアニメーションについて紹介…
紋様の科学 (伏見康治コレクション (1))作者:伏見康治日本評論社AmazonCanvasで遊ぶことが多いのだけれど、もう少し数学を使って描画やアニメーションをつくればおもしろいものができると考えていた。そこで図書館で見つけたこの紋様の本を借りた。これは昔…
demo codepenを見ていたら、綺麗なグラデーションでパーティクルが回るデモがあった。 http://codepen.io/jackrugile/details/Gvingこれを参考にシューティングゲームみたいなものを作れないかなと思った。しかし途中で挫折したww プレイヤーから弾が出ると…
何を作ったか? 以前、Youtubeの埋め込みコードに開始時間を設定する拡張を書いた。 YouTubeを途中再生できるように埋め込みコードを改変するChrome拡張をつくった - not good but great Embed Screen Jump Code for YouTube™ - Chrome ウェブストアそれの技…
・参考 node.js + socket.ioでTwitterのStreaming APIを使ってみる - 小さい頃はエラ呼吸参考ページを9割以上書き写して、実行したらつぶやきを取得できた。ドキュメントも英語だけど、眺めたりしている。 Twitter API Documentation | Docs | Twitter Devel…
nodejsの環境構築 jsでサーバーサイドの処理が出来ると聞いて、nodejsを触ってみることにした。なぜか自分の環境にはすでにnodeが入っていた。 $node -v v0.8.19 バージョンは上の通り。 $npm -v 1.2.10 パッケージマネージャーのnpmもインストール済みだっ…
PhobosLabインスタグラムっぽい加工ができるフィルターライブラリ。また被写体がテスラ、バッドマン使用でかっこいいんだこれがw 「なぜWebGLでやる必要があるのか」という疑問があるが、読んでみると、そっちのほうが早いかららしい。作者はFlashのColorMat…
