サクサク読めて、アプリ限定の機能も多数！
トップへ戻る
ドラクエ3
lab.branberyheag.com
ポートフォリオをつくっていて、どうしてもJava Scriptの読み込みファイルが多くなってしまう。どうしようかな・・・と思っていたら、Require.jsというライブラリを見つけた。非同期でファイルを読み込みをしてくれる便利なライブラリ。早速試してみた。 main.js(名前はなんでも良い)を用意して、この中にロードしたいJSファイルを記述する。 require( [ 'jquery-1.6.min', 'skroll', 'jquery.ba-hashchange.min', 'placedata', 'hoge' ] ); それからHTML内に <script data-main="main" src="/js/require.js"></script> html5のカスタムデータ属性というものを使って、JSリストファイルをインクルードしている。こういうことができると便利だね。 こ
画像にbase64（Data URIs）をかけてHTMLやCSSに埋め込む方法って、知らなかった。。。HTTPリクエストを減らせるので、軽量化に役に立ちそうだったので、メモ。 <img src="http://hogehoge.jp/hoge.png"> と書いていたものを <img src="data:image/png;base64,iVBORw0KGgo...."> と書けるようだ。 オンラインツールでひとつひとつ変換するのもいいけど、PHPで変換すればアップロードのみで対応ができそう。 <?php $img = file_get_contents( 'http://hogehoge.jp/hoge.png' ); if ( $img !== false ) { $img = base64_encode( $img ); } ?> 上記はあくまでもサンプルだけど、これを関数にしてht
Windowの一番下まですくるロールされたことを取得して、何かをやりたかったので、いろいろと調べてみた。 ググってみてたら、「リトルプログラマーの日記」さんに載っていた。 これを参考にして実装してみた。 <pre>// 垂直スクロール量を取得する var scrollTop = document.body.scrollTop || document.documentElement.scrollTop; // 表示領域の高さを取得する var clientHeight = document.body.clientHeight; // スクロールバーで隠れた領域を含むコンテンツ領域の高さを取得する var scrollHeight = document.body.scrollHeight; // コンテンツ領域の底までの残り領域 var remain = scrollHeight - clie
タイトルでは表現しにくかったが、管理画面のディレクトリとWordPressの公開する場所を変更することが簡単にできる。 今まで、知らなくて、同じディレクトリ上でしか設置できないと思い込んでいた。 その方法は、以下のとおり。 1.WordPressの管理画面にある「設定」を変更する 2.htaccess を管理画面で変更したサイトのアドレスと同じディレクトリに移動する。（ある場合は移動する） 3.WordPressのindex.phpをサイトのアドレスと同じディレクトリに移動して、ソースコードの一部を書き換える。 デフォルトの状態 /** Loads the WordPress Environment and Template */ require('./wp-blog-header.php'); ?> 変更後 /** Loads the WordPress Environment and
JavaScriptで文字列の数字を数値型(int型)にする方法がいろいろとあったので、メモ。 str = "123"; num1 = parseInt(str); num2 = parseFloat(str); num3 = Number(str); num4 = str - 0; いろんな方法で型を変換できる。一番シンプルなのは、num4の数字の文字列に- 0 にしてやると型が変わるらしい。 関連記事 javascriptで他のウィンドウにデータを渡す方法 CSSで背景にPNG画像使ったときのIE6対応の注意点 WordPress3.0にバージョンアップしたら、テンプレートJavascriptエラーになった Javascriptの配列を空にする方法 最近買った本「JavaScriptパターン」
PHPでJSONを取得をしたいと思ったので、いろいろと調べてみた。 案外簡単。 <?php $json = file_get_contents("http://<em>url.of.web.api?パラメータ</em>"); ?> とりあえず、これだけで取得が可能。それ以降の処理は、こんな感じ。 file_get_contentsではなく、HTTP/Request.phpで処理する場合は、以下のようになるみたい。 <?php require_once('HTTP/Request.php'); $request =new HTTP_Request( 'http://<em>url.of.web.api?パラメータ</em>' ); $result = $request->sendRequest(); //リクエスト送信 $json = $request->getResponseBody(
完全に乗り遅れた感じだけど、Instagram API（公式）が出てた。 写真系のSNSでしかも、やりたかったことができそうなので、すぐに食いついてしまった。 コメント、タグ、いいね！、は、できるみたいだけど、写真の投稿は、iPhone,iPodtouchからしかできないみたい。 それでも十分なすぎるくらいの機能なので、気にならない。 Instagramのいいところって、ロケーション機能がしっかりしていること。 これとGoogle Map APIを使って、写真と地図とリアルタイム性ていうのが、すごくひもづけられて面白いかも。 データ取得だけだったら、JSONなので、フロントエンドのみで遊べちゃう。 久しぶりに燃えてきたぞ。 Instagram API ドキュメント http://instagram.com/developer/ Instagram APIを触ってみる http:
Google Chrome Team が作った「20 Things I Learned About Browsers and the Web」という素晴らしいサイトがあるんだけど、そのページをめくる感じがものすごくいい感じ。 これ、Canvas を使って表現されている。マウスイベントでアニメーションを使っているため、ロジック自体は複雑になっていると思う。 実は、これを自分でつくろうと思っているいろいろと試してみたけど、結局、駄目だった。（時間が切れ） これを今作っているサイトに取り入れようと思って、いろいろと試してみた。 このページめくりに関して、参考になる記事があったので、メモ。 「HTML5Rocks」にある、「Case Study: Page Flip Effect from 20thingsilearned.com 」という記事を見つけた。 これを使って、実際に作っているサ
30 best practices to boost your web application performance – Web User Interface Architect JavaScriptコーディング等を 書く上でのパフォーマンス確認事項３０。 自分へのインプット＆メモがてらにちょっとまとめてみます。 JavaScript DOMの操作は可能な限りやめる eval, new Function() は遅いので可能な限り使わない withステートメントを使わない（使った事ないですが） for-in 文ではなく for 文を使う。 ループの中で try-catch ではなく、try-catchの中にループを置く グローバル変数をなるべく使わない aaa+=’AAA’;aaa+=’BBB’; の方が aaa=’AAA’+'BBB’;より速い 複数の文字列連結には、Array で文字
「すきなばしょ」でtwitter上に表記されている画像を各サービスから取得するためにURLについて調べていた。 多くのサービスが、URLを簡単に作って画像のパスをひろえるようなので、メモ。 ※引用元があるのだけど、危険サイトに指定されていたため、リンクの貼るのをやめました。 * Twitpic （ドキュメント） o ページ: http://twitpic.com/<image-id> o サムネイル画像: http://twitpic.com/show/<size>/<image-id> + <size>: “mini” or “thumb” * 携帯百景 o ページ: http://movapic.com/<image-id> o サムネイル画像: http://image.movapic.com/pic/<size>_<image-id>.jpeg + <size>:
ちょっと、やってみたいことがあってtwitterのハッシュタグを使ってみようと思った。 どうやって使えば良いのかわからなかったのでいろいろと調べてみた。 ということで、全体の流れをメモ。 twitterにて、hashtags（http://twitter.com/hashtags）をフォローする。 1で登録したハッシュタグに右のようなメッセージを送る。「@hashtagsjp #タグ名 タグの説明」 「タグ名」と「タグの説明」を書き換える。 「@hashtagsjp」「#タグ名」「タグの説明」の間は「半角スペース」を入れる。 「タグの説明」にリンクを含める場合は、前後に「半角スペース」を入れる。 これで完了。 ハッシュタグを登録したら、検索してみる。 twitterにも検索機能はついているけど、hashtags.jpで調べるとより詳しく調べられる。 関連記事 twitter AP
今、スマートフォンで位置情報を取得し、メール投稿する時にGPS情報も送信する、支援ツールを作っている。というかもう完成した。 iPhoneとAndroidで位置情報を取得できるようにして、Google Maps API v3にデータを渡して表示するということをやっているんだけど、前回の方法iPhoneは簡単に取得できる。 Androidも実は、Gears Geolocation APIを使うと案外簡単に位置情報が取得できる。 PCで検証するには、Google Gearがインストールされていないと確認ができないよ。 Geolocation API – Gears API – Google Code を見ると書いているけど、gears_init.jsを置いて、以下のように記述すると <pre><pre><script type="text/javascript" src="gears_ini
オブジェクトの重なり順を制御できないかと思っていろいろと調べてみた。 ActionScript3のオブジェクトの重なり順の考え方とAS2の重なり順の考え方が違うみたい。 AS3は、表示順。つまりaddChildされた新しいオブジェクトは、一番上に表示されて、前にaddChildされたものは、後ろに配置されてしまう。 AS2には、深度という考え方があったためにスクリプト深度を調整するみたい。 こんな感じで考え方が違うので、長くFlashをやる人は覚えてたほうがいいかもしれない。 AS3上で制御するには・・・ オブジェクトをaddChildする際に順番を考える。動的なものだったら、なるべく制御はシンプルにしたほうがいいし、できるならこっちで制御したほうがいいかも。 それとスクリプトで制御するパターンがあるみたい。 addChildしたあとで、以下のようなスクリプトを実行するみたい。
JavaScript IE6でpngを対応させる（ filter:progid:DXImageTransform.Microsoft.AlphaImageLoader） IE6は、ブラウザとしては一番古いのにまだシェアとしてまだまだ高い。無視してもいいんだけど、放置しておくのもいかがのものかと思う。 IE6でPngを対応させる方法して *html #logo a{ background-image: none; filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src="images/common/logo.png", sizingMethod="crop"); } これが一番てっとり早い方法だと思う。対応させたい画像のパスだけど、これはHTML上を基準にして考えているようだ。それと「sizingMethod」は、画像を
JavaScriptやActionScript3でも外部から読み込んだ画像の縦横比を維持して拡大・縮小をしたもの。今までこれにずっとつまずいていた。今、作っているものもちょっと、この縦横比を維持して縮小をしたかった。いろいろ調べてみたら、考え方が書いてあったので紹介したい。 縦横比を求めるには、縦の長さ / 横の長さ で比率が求められる。 これを横をたとえば200pxにしたいとすると・・・縦の長さを横の長さに対して求めればいいと思う。 横の長さを基準にして縦の長さを求めると 横の長さx上で求めた縦横比 = 横を200pxにしたときの縦の長さ 例）ActionScriptで記述すると // 変数 hpw に 「高さ/横幅」 の比を取得 var hpw:Number = photoFrame._height/photoFrame._width; // もし横幅が120より大きい場合 if
Flexでいろいろと遊んでいるとflexを呼び出している最初のプリロード画面があまり好きではない。この画面を見るとFlexで作られているっていうのがハッキリわかってしまう。これを自分のデザインしたプリローダーにしてみようと思っていろいろと調べていた。当然だけど、カスタマイズはできるということで、調べながらやってみた。 カスタマイズするには、IPreloaderDisplay を使って、プリローダー用のクラスファイルを作って、それをMXMLと関連付けするだけ。 <?xml version="1.0" encoding="utf-8"?> <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" xmlns:fc="http://www.adobe.com/2006/fc" layout="absolute" preloader="Pr
Flexは、そのままでも十分すぎるほどデザインの完成度が高い。 だけど、ボタンやタブ・Comboxなど、CSSで変更してもルックアンドフィールが合わないときがある。そんなときにスキンを使う。スクロールバーのカスタマイズ方法やプリロードのカスタマイズ方法は書いてきたけど、ボタンやら他のパーツも変更する方法まとめて書いておこうと思う。 スキンを適用する方法として２つ方法がある。 グラフィカルスキン 埋め込みアセットを指定 Button { overSkin: Embed("../assets/images/orb_over_skin.gif"); upSkin: Embed("../assets/images/orb_up_skin.gif"); downSkin: Embed("../assets/images/orb_down_skin.gif"); } プログラムスキン 描画クラス
twitter APIを利用して何かを作るときに必ず必要となってくるのが、APIの仕様書。 日本語版はないのかと探していたら、結構あったので紹介。 Twitter API 仕様書 (勝手に日本語訳シリーズ) 第十一版 http://watcher.moe-nifty.com/memo/2008/03/twitter_api_c45f.html Twitter API 仕様書 http://watcher.moe-nifty.com/memo/docs/twitterAPI.txt 実は、１時間または１日で何回リクエストを飛ばせるのか調べていた。（twitter APIは、1時間に150回までと回数が決まっていた。）作っていると1時間150回はアッという間に越えてしまう。３回ほど、リクエスト回数制限エラーにひかかった。XMLで返ってくるからメッセージ解析する、スクリプトも組まなくちゃ。
Latest Post Clipプロパティ メモ あとで試してみよう。 clipプロパティ http://www.htmq.com/style/clip.shtml こんなプロパティがあるなんて知らなかった・・・
ウェブ標準やアクセシビリティについていろいろと言われているけど、俺も勉強していろんなプロジェクトで使っていた。 日本と世界となんで提唱されている機関がバラバラなんだろうって思った。日本の場合だとＪＩＳ規格があってそこでアクセシビリティを提唱されている。でも、それって日本や世界で提唱されている機関がバラバラじゃいけないような気がする。誰かがもちろん考えていると思うけど、そもそもウェブは国境もないのに独自規格してもいいのかなと思う。ルールを日本を中心に考えたら、ルールの脆弱性が出ると思う。
このページを最初にブックマークしてみませんか？
『Branberyheag Lab』の新着エントリーを見る
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
