少し前のエントリーでも触れた事があるが、「このままHTML5が普及してくれればスマートフォン向けのアプリの大半はHTML+CSS+Javascriptだけで作れるんじゃないか」と感じ始めている私である。 もちろん、そうなるには「規格がきちんと統一される」「まともな実装をしたスマートフォンが十分に普及する」「iPhoneの一人勝ちにはならない」などの条件が満たされる必要があるため、必ずしもそうなるとは限らないが、少なくとも「そろそろキチンと勉強しておいて損はない」技術であることは確か。
90秒で理解するiPhone JavaScript(マルチタッチ編) Tweet 2008/7/28 月曜日 matsui Posted in iPhone | 10 Comments » 仕事でiPhone向けサイトを作ることになるかもしれず、色々と調査中です。 まずはiPhoneならではの機能ということで、マルチタッチについて調べてみました。 ここまでわかったことをメモ代わりに記載したいと思います。 今回はひとまず座標の取得までです。 ゆくゆくは、こちらのムービーのように凝ったギミックを作りこみたいと思っています。 マルチタッチの座標を取得するのは思ったより簡単で、抑えるポイントは4つだけです。 Safari自体のスクロールや拡大・縮小は動作しないようにした方が無難 タッチのイベントは、リスナーまたは「onTouchXXX」から取得 タッチ数は「event.touches.length
大きい画像を限られた領域内に表示し、Googleマップのようにマウスのクリックとドラッグでその画像をアニメーションでスライドできるスクリプトを紹介します。 SpryMap デモページ [ad#ad-2] スクリプトはjQueryなどの他のライブラリは必要とせず、単独で動作します。 SpryMapの特徴 他のライブラリに依存せずに動作する超軽量(3KB)のスクリプト。 画像を表示する領域はピクセル単位で指定が可能。 画像を最初に表示する座標を設定可能。 スクロールのアニメーションの時間を設定可能。 SpryMapの実装 実装は簡単で、画像にidを指定して使用します。 HTML スクリプトでラッパーとなるdiv要素を追加します。divのclassはオプションで設定できます。 <img id="worldMap" src="map.jpg" alt="A map of the world." /
Make a ‘View Source’ Button | CSS-Tricks 技術サイト等で使えそうなページ内に設置する「ソースを見る」ボタンの実装例。 なんらかのライブラリを配布する際やコードの動作を紹介するデモページなんかに導入しておくと利用者に親切かも。 ボタンクリックでLightBox風にソースを表示させることができ、きちんとハイライトもされた状態になっています。デザインもなかなかいい感じ。 ファイルのダウンロードも可能ですので比較的簡単に実装できますね。 firefoxやChromeでは、view-source:http://〜みたいにするとソースコードを見るページにリンクできますが、そうした方法での実装法も紹介されています。 関連エントリ ブラウザ上で動作するソースコードエディタ『Edit Area』 ブラウザ上でソースコード編集が可能な開発環境を提供「ecoder」
IE6のPNG透過や6、7での 角丸、ドロップシャドウを実装 するjsライブラリのまとめです。 同じ用途でもライブラリによっ て良し悪しだと思いますので、 備忘録的にメモ。 もうIEはいいよとも思いますが、現実そうも行かないのはもどかしいですね。万能では無いですけど、作業工数を減らせるならjsに頼ってもいいと思います。そういう訳で、透過の問題や角丸、ドロップシャドウを実装してくれるjsのメモ。 IE7.js IE6以下でもIE7と同じようなXHTML / CSSの解釈をしてくれます。要DOCTYPE 宣言。 IE6以下をWeb標準に準拠させるライブラリ『IE7.js』 DD_belatedPNG.js IE6でも透過PNGを実装できるライブラリ。class名等を指定します。リピートにも対応。 IE6用透過png対応策、DD_belatedPNGの使用法と注意点 合わせて読みたい:DD_be
Moongiftさんの記事を見て興味が 沸いたので即DLしてみました。 iPhone等のモバイル向けのWeb アプリを構築するHTML5中心の フレームワーク・Sencha Touch。 個人的にはかなり良いオープン ソースでした。 という訳で、Sencha Touchを触ってみましたよ。これ使えば、低スキルの僕にでもアプリ作れそうです。 で、Sencha Touchってどういうもんなの?という方もいらっしゃるかと思いますので、ファイルに含まれているサンプルをご紹介します。 SENCHA かなり素敵なフレームワークでしたよ。HTML5っていうのがいいですね。含まれているサンプルを以下に簡単にご紹介します。サンプルの説明は動作の説明になります。 尚、含まれているファイルは画像ファイルとHTMLファイルとjsファイルのみですのでローカルサーバー等が無くてもサンプルを見る事が出来ますよ。 キャプ
先日行われた Twitter の開発者向けイベント「Chirp」にて、 @Anywhere という新 API が公開されました。自分のサイトに、 JavaScript のみでユーザー情報の表示やつぶやきの投稿、ユーザー認証などの機能を実装できる、とても興味深い API です。 この @Anywhere は使い方も非常に手軽で、こちらのページでサイトを登録すれば、あとは「Getting Started with @Anywhere」にある JavaScript をページに挿入するだけで利用できます。しかし、当然ですが説明は英語ですので、日本人には少しとっつきづらい面もあります。こんな有用な API が日本で普及しないのは大きな損失、ということで前述のページを日本語に翻訳してみました。 勢いで翻訳したので表現はかなり適当ですが、まあ無いよりはましかと思います(笑)。 @Anywhere を利用
Web 制作のことを中心に、ちょっとした Tips などを掲載しています。「自分用メモ」が基本スタンス。 btmup Blog ググっても情報がなぜか少ないので、とりあえずメモ的にアップ。 window.open() なんかで開いたサブウィンドウを、テキストリンクやボタンで閉じるための方法です。 HTML でウィンドウを閉じる HTML ではこんな書き方をするヤツですね。 <a href="javascript:window.close();">このウィンドウを閉じる</a> input タグを使う場合は、こんな感じ。 <input type="button" value="このウィンドウを閉じる" onClick="window.close()" /> Flash でウィンドウを閉じる AS2 であれば、 on (release) { getURL("javascript:window.
これでSafariにも実装できる! スクロールをトリガーにしたアニメーションのポリフィル -Scroll-timeline Polyfill Post on:2023年9月5日 先日の記事で、CSSでの実装が大きく変わる! Scroll-driven Animations スクロールをトリガーにしたアニメーションを実装する方法を紹介しました。Chrome 115から実装された新機能ですが、ネック ...記事の続きを読む JavaScriptの配列メソッド: オブジェクトの配列を扱うときに役立つ便利な配列メソッドを分かりやすく解説 Post on:2023年1月11日 JavaScriptでオブジェクトの配列を操作するためにもっとも有用な配列メソッドとコードを紹介します。 JavaScript Array Methods: A Comprehensive Guide by Luca S ..
Lightboxなどのスクリプトを使用しないで、スタイルシートで実装する画像を拡大するテクニックをCSSplayから紹介します。 画像を拡大表示 拡大画像を消すのは、右上のアイコンです。 仕組みは簡単に説明すると、サムネイル画像と拡大画像(テキスト含む)をインライン要素として配置し、focusとactive時にdisplayやpositionなどを変更しています。 対応ブラウザは、Safari(PC), Google Chromeとのことですが、上記キャプチャはFirefox3.5です。 IE6でも動作するバージョンは「CSS Light Box - Click version」です。 このテクニックは画像ギャラリーだけでなく、商品写真の拡大などにも応用がきくものとなっています。
20 Fresh JavaScript Data Visualization Libraries とても綺麗なグラフ等を描けるフレッシュなJavaScriptライブラリが色々と最近になってもリリースされていますね。 サムネイルだけ見ても、JavaScript でやってるの?というような綺麗なものが多いです。すでに紹介したものもあると思いますがご参考までに。 Highcharts gRaphaël JavaScript InfoVis Toolkit JS Charts Bluff Timeline データをビジュアライズしたい際の参考になりそうですね。 関連エントリ JavaScript用のグラフ描画ライブラリ色々
ブロック要素等をアニメーションで他に切り替えるならコレ「transm.js」。 例えば、ページヘッダーのメイン画像なんかをアニメーションさせながら別の画像に切替えるような際に使えます。 ↓アニメーション↓ これでもか、というぐらい大量のアニメーションが用意されていて、ページ上のデモで動作確認することができます。 Transition で 最初から選択されている、random を選んで「Transition area」をクリックしてアニメーションが確認できます。アニメーションの種類だけでなく、Tweeningによって加速度なんかの設定もできます 少ないスペースで時間によって出し分けたい、そしてアニメーションさせて注目を集めたいというようなシーンでかなり力を発揮してくれそうなライブラリですね。 対応ブラウザとして、Mozilla Firefox 1.5+, Opera 9+, Safari 2
あらすじ 僕は本無しにJavaScriptを覚え、その後も全く本を読まなかったため(今もまだJavaScript関連の本を持っていない)、友人の変態C++プログラマにJavaScriptを覚えるための本を聞かれて、答えることが出来ませんでした。しかし、そんな中、颯爽と助けてくれた某JavaScriptコーダーがおり、そんなことがあって、世間のJavaScriptコーダーってどういう人たちなんだろうと気になって、とある勉強会に参加して、なぜか最後、指名手配されて、いや、僕はそんな知られるほどのことはしていないと思っていたのだけど、まぁ、何かやり遂げてはいたのかもしれないと思ったので、JavaScript界隈の有名人を調べてみることにしました。 まとめ方 多くのJavaScript界隈の有名人はJavaScriptで有名なブログを持っているに違いないという発想の元でTopHatenarのJav
またまた登場!凄くリッチなWEBアプリ作成フレームワーク「Ajax.org Platform」 2009年12月16日- またまた登場!凄くリッチなWEBアプリ作成フレームワーク「Ajax.org Platform」。 Ext.js ばりにきれいなUIと多機能さで今後が期待されるJSフレームワークです。 次のような綺麗でリッチなインターネットアプリケーションが作れます。 デモページには多数のコンポーネントが掲載されていて色々できることがわかります。 GoogleMapや、各種UIパーツの他、3Dグラフなんかも面白いです。 JavaScript でクネクネ動く3Dグラフです。 以下のページを参照してください。 Ajax.org - The real-time collaborative application platform
最近受け持っている案件で使用しているsuzunari.jsというフレームワークをご紹介します。これはFlashで作られたブログパーツを配布するための最も簡単で、かつ高機能なJSフレームワークです。 最小限の手順まずは本体であるsuzunari.jsをダウンロードしましょう。こちらからダウンロードできます。 次にブログパーツとして表示するswfファイルを作成しましょう。作成したファイルはmain.swfというファイル名を付けてください。 そしたら、以上の2ファイルを配布用のサーバへアップロードしてください。suzunari.jsとmain.swfは同じディレクトリへ置いてください。 これだけです!簡単!貼付けタグは以下のようになります。 <script type="text/javascript" src="http://[ファイルをアップロードした場所]/suzunari.js"></sc
TutZoneというサイトで、Webデベロッパーのためのフォトギャラリー作成スクリプトがいろいろと紹介されています。 いくつかご紹介しますね。 Carousel.us MooToolsを使った3DのJavaScriptカルーセル。Firefox 2+, Opera 9+, Safari 3+, IE 6+, Chrome 1でテスト済 Galleriffic フェードイン&アウトしながら表示されるクールなフォトギャラリー Zoomimage クリックでズーム、前後の画像へのナビゲーションもついているギャラリー jQuery Slider II サムネイルつきのクールなフォトギャラリー Space Gallery MacのTimeMachineのようなインターフェースで、クリックすると1枚ずつフェードアウトして消えて、次の写真がズームするギャラリー TimeMachineのとかすごいですね。
2009年11月5日,Googleは自社サービス製品であるGmail,Google Maps,Google Docsなどの開発に使用しているJavaScriptアプリ開発ツール群「Google Closure Tools」を一般公開しました。 "Closure"は一般的に,閉鎖や閉店といった意味で使われます。ツールの命名としては少しネガティブなニュアンスを感じますが,Google Closure Toolsの場合は,終結といった意味で,開発プロジェクトにおける最終ステップの仕上げ用ツール。すなわち“栓”という意味で中身があふれ出さないようにキッチリ閉めておくものといった意味合いから命名されているようです。 Ultimate(究極)に近い意味でGoogleの自信の表れと受け取った方がいいかもしれません。Googleで新規公開になったプロジェクトとしては珍しく,ベータ版の表記もありません(Go
オンラインで綺麗にJavaScriptのコードを整形できる「Online javascript beautifier」。 WEBで拾ったソースコードがインデントされていなかったり、ブックマークレットを読むような場合に使えます。 若干不具合あるようですが、自分でコードを元に戻すのに比べるとはるかに楽ですね。 タブを変換したりも出来るみたいです。 以下のエントリを参照してください。 Online javascript beautifier
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く