JavaScriptのイベントをたくさん見られるサイト - 開発時に役立つ。JavaScriptのイベント処理を確認 MOONGIFT
JavaScriptでのアプリケーション開発において肝になるのがイベントのハンドリングです。マウスやキーボード操作などによって多様なイベントが呼ばれます。それらの購読、解除によってアプリケーションを構築するのですが、慣れている人であっても複雑で分かりづらいものです。 どんなイベントがあって、どうデータが送られてくるのかを理解するのに便利なのが「JavaScriptのイベントをたくさん見られるサイト」です。 JavaScriptのイベントをたくさん見られるサイトの使い方 イベントの内容は開発者ツールに出てくるのであらかじめ開いておきます。 例えばスクロールやリサイズイベントで呼ばれているのが確認できます。 マウス系イベント。 フォーム系。 メディア系。動画再生時などにイベントが呼ばれます。 アニメーション。 このサイトではクライアントサイドだけで処理ができるイベントを多数確認できます。似たよ
ndm - npmのGUI管理ツール MOONGIFT
MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました nodeで開発する際にはパッケージ管理としてnpmが欠かせません。npmはCLIツールなのでターミナルなりを使って操作します。殆どの開発者にとって、それで特に問題ないでしょう。 しかしnodeが普及する中で開発者でない方たちもnpmを使うようになっています。そこで使ってみたいのがndmです。 ndmの使い方 プロジェクトのディレクトリを指定するとpackage.jsonをパースしてインストールされているライブラリを一覧してくれます。 npm本体のアップデートもできます。 ライブラリのアップデート、インストールを行います。 インストールが終わると通知がきます。 新規でライブラリをインストールする場合はこのようなボックスで指定します。 ndmはnpmをラッピングしていますが、複数プロジ
captionss - スタイルシートだけでここまでできる画像キャプション表示 MOONGIFT
単純に画像を並べただけではそれが何なのかは分かりづらいです。そこで役立つのがキャプションです。今回はそんなキャプションを表示するのに役立つライブラリcaptionssを紹介します。スタイルシートだけで作られているキャプション表示ライブラリです。 使い方 実際に使う時のHTMLは次のようになります。figureとfigcaptionタグを使います。 <figure class="embed hide-smooth dark"> <img src="img/Madres.jpg" alt="The mothers marching at Plaza de Mayo"/> <figcaption> The caption text goes here... </figcaption> </figure> デモ 画像の上に重なってキャプションが表示されています。 画像の上部にキャプションを表示させ
かゆいところに手が届くMac OSX用コマンドユーティリティ·tools-osx MOONGIFT
tools-osxはMac OSX用の便利なコマンド群です。 Mac OSXはUnixベースなので多様なコマンドが用意されていますが、さらに小粒ながらも便利なコマンドを追加してくれるのがtools-osxです。 インストールします。 qlコマンドはQuickLookを立ち上げます。 trashコマンドはrmとは異なりファイルをゴミ箱に入れます。 tools-osxではclipcat（クリップボードの出力）、dict（辞書検索）、eject（ボリュームの取り出し）、ql（QuickLookでの表示）、swuser（ユーザスイッチ）、trash（ゴミ箱に移動）、with（アプリケーションで開く）が用意されています。どれも便利なコマンドになるでしょう。 tools-osxはMac OSX用、MIT Licenseのオープンソース・ソフトウェアです。 MOONGIFTはこう見る ターミナル上で入力
すごいぞ！HTML5で顔認識·HTML5 Face Detection MOONGIFT
HTML5 Face DetectionはHTML5を使って動画から顔をリアルタイム認識します。 HTML5はどこまで行くのか、それを改めて思い起こさせる凄いソフトウェアがHTML5 Face Detectionです。何と動画の顔認識をリアルタイムに行ってしまいます。 デモ動画です。上が動画、下がそれを解析して顔認識しているものです。 顔を動かしても付け目がね＋鼻が追いかけてきます。 筆者トライの図。Glassesをタップすると認識処理が開始されます。 デモ動画 HTML5 Face Detectionは動画のフレームを読み込み、JavaScriptで顔認識をした後、Canvasタグに鼻眼鏡とともにレンダリングしています。はっきり言ってかなり重たいのですが、技術的にはとても面白いソフトウェアです。 HTML5 Face DetectionはHTML5/JavaScript製のソフトウェア（
GoogleドキュメントやFlickr、Picasaなどのデータをローカルと自動同期·Social Folders MOONGIFT
Social Foldersは多数のWebサービスのデータとローカルを同期するソフトウェア＋サービスです。 GoogleドキュメントやFacebook、Flickrなど様々なWebサービスにデータをアップロードしている人に朗報です。Social Foldersを使えばそれらのデータをローカルと同期してくれます。Dropbox風に使えて便利です。 インストーラーです。Windows版とMac OSX版があります。今回はMac OSX版です。 インストール実行中。 完了しました。メニューバーに常駐します。 最初にアカウントを作成します。 アカウント作成が完了しました。 次はWeb側で設定を行います。 対応サービスはこれだけあります。GoogleドキュメントやFlickr、Picasaなどと連携できます。 Facebookアカウントと紐づけます。 接続確認中です。 FacebookとInstag
JavaScriptに便利なメソッドを盛り込んだライブラリ·mofmof.js MOONGIFT
mofmof.jsはJavaScriptを積極的に拡張したライブラリで、Number/Array/Stringに便利なメソッドを追加しています。 JavaScriptは今やWebだけでなく、様々な環境で使われるようになっています。そこで基礎になりえるライブラリとして紹介したいのがmofmof.jsです。かゆい所に手が届く、便利なメソッドがたくさん追加されています。 コード例です。コピーメソッド。 日付周りの拡張も多いです。 Hashを取り扱うメソッドも多数用意されています。 二つのHashをミックスします。 Hashからキーと値を取り出します。 Hashのキーだけを抽出します。 mapメソッドです。 実行するたびにインクリメントされるユニークな値を返します。1秒間に100万回実行したとしても285年間ユニークであり続けます。 一気に配列を生成します。 文字列を置換しつつ生成します。 検索メ
IE6から使えるSVG/VMLを使った高機能JavaScriptグラフライブラリ·Highcharts MOONGIFT
HighchartsはSVG/VMLを使って描画するJavaScript製のグラフライブラリです。 Webサービスにおいてグラフを使うとデータのインパクトが違います。だからこそ使い勝手の良いグラフライブラリを積極的に使っていくべきです。HighchartsはSVGを基本として多様なWebブラウザに対応したグラフライブラリになります。 折れ線グラフです。 Ajaxによるデータロード対応です。 グラデーションをかけることもできます。 滑らかな曲線です。 アイコンを貼付ける例です。 プロットのみで。半透明なドットを使っています。 エリアグラフです。 マイナスの値にも対応しています。 積み上げグラフです。 棒グラフです。 左右比較型の棒グラフです。 複数のデータを並べられます。 棒グラフもマイナス値を出せます。 こんな感じの棒グラフも。 さらにドリルダウン対応です。 HTMLのテーブルからデータを
たった一行のJavaScriptでガラケー向けWebサイトをスマートフォンに最適化·sparrow.js MOONGIFT
sparrow.jsは既存のガラケー向けWebサイトをスマートフォン向けサイトに変換してくれるJavaScriptです。 sparrow.jsを使うと既存のガラケー向けWebサイトをスマートフォン向けサイトに変身させてくれます。それもたった一行のJavaScriptタグを追加するのみです。 ガラケー向けサイトをiPhoneで表示したところです。いわゆる普通の携帯電話向けサイトとしての表示です。テンプレートは「携帯専用無料テンプレート配布中 ： フリースタイル 携帯無料レンタルサーバー」よりお借りしました。 sparrow.jsを適用した表示です。デフォルトではフォントサイズや画像の表示が最適化されるのみとなっています。 sparrow.jsではその他、Viewportの自動挿入、スマートフォン向けのCSS定義、半角仮名を全角に変換、ページ内リンクをアニメーションに、絵文字を絵文字画像に変換
これがあればWebアプリケーションのデザインがすいすいできる·Bootstrap MOONGIFT
Bootstrapは今風のWebアプリケーションを開発するのに最適なデザインパーツを提供するCSSテンプレート。 BootstrapはCSS製のオープンソース・ソフトウェア。ITエンジニアが苦手にするのがWebデザインだ。作るのは良いが、それを奇麗に配置していくのがとても難しい。Webサービスが流行るか否かに技術が及ぼす影響は良くて半分だろう。残りの半分以上は見た目にかかっている。 グリッド それもあって奇麗な画像を生成したり、何かのサービスを模したデザインに人気が集まったりする。Appleの作るデザインのような、今風なWebサイトを作る際にはBootstrapが便利そうだ。 BootstrapはTwitterの開発チームが作成したWebデザインテンプレートだ。単なるHTMLのみならず、色々な機能がおり混ざっている。複数カラムのグリッド、高さの揃った複数カラムのレイアウト、基本的なHTML
Gitを使っているWebデザイナー必見。DreamweaverからGitを使える·GITWeaver MOONGIFT
GITWeaverはDreamweaverとTortoiseGitを連携させるDreamweaver機能拡張。Gitコマンドが使えるようになる。 GITWeaverはWindows/Dreamweaver用のオープンソース・ソフトウェア。企業ではまだまだSubversionがメインのリポジトリ管理システムになっているようだが、個人を中心にGitを使うケースが増えている。プログラマーが使っているケースが多いが、デザイナーの方も使い始めている。 メニュー そんなGitとWindowsを組み合わせて使う際にはTortoiseGitが便利だが、さらにDreamweaverを使ってデザインをしているならお勧めなのがGITWeaverだ。 GITWeaverはTortoiseGit必須のDreamweaver拡張なのでWindows版向けのソフトウェアになる（筆者はMac OSX版しかないためスクリー
スマートフォン対策。HTML5+JavaScriptでQRコードを動的に生成·JS HTML5 QRCode Generator MOONGIFT
JS HTML5 QRCode GeneratorはCanvasタグを使ってQRコードを生成するJavaScriptライブラリ。 JS HTML5 QRCode GeneratorはHTML5/JavaScript製のオープンソース・ソフトウェア。スマートフォン向けのコンテンツが増えたこともあって、Web上でQRコードを見かけることが多くなった。Androidアプリの配布の際には大抵QRコードが表示されている。 かなり大型なQRコード QRコードには様々な情報が載せられるので、URLやコンタクト情報、ツイートしてほしい内容なども載せられる。手軽に生成できるようになれば、色々な使い方が考えられるだろう。そこで紹介したいのがJS HTML5 QRCode Generatorだ。 JS HTML5 QRCode Generatorはその名の通り、HTML5+JavaScriptでQRコードを生成
Google Chart APIを使えない場合に。Canvasタグで互換グラフを描く·Yokul MOONGIFT
YokulはCanvasタグを使ってGoogle Chart API互換のグラフを描くJavaScriptライブラリ。 YokulはJavaScript/HTML5製のオープンソース・ソフトウェア。Webサービスで工数がかかりやすいのがグラフの表示だ。システムから得られるデータを使って動的に変化させるため作るのが大変だ。そんな中、よく使われるのがGoogle Chart APIだ。 サンプル Google Chart APIを使えば画像ベースのグラフが簡単に作成することができる。しかし場合によっては外部にデータを渡すために利用できないかもしれない。そんな時に使えるのがYokulだ。 YokulはGoogle Chart API互換のグラフライブラリだ。さらに面白いのがサーバサイドの仕組みを用いないことだ。つまりCanvasタグを使ってJavaScriptだけでグラフを描くのだ。使い方も簡単
これは凄いぞ！スマートフォン向けHTML5生成プログラミング言語「mobl」 | MOONGIFT | オープンソース・ソフトウェア紹介を中心としたITエンジニア/Webデザイナー向けブログ
moblはEclipse上で開発し、HTML5/CSS/JavaScript/画像を生成するスマートフォン向けプログラミング言語。 moblはJava製のオープンソース・ソフトウェア。スマートフォンの人気がとても高い。特にWebKitのモバイル版を組み込んでいるものが殆どで（iOS/Android/Palm Pre/Blackberryなど）HTML5の恩恵にあずかりやすいのが良い。 開発環境はEclipse そんなHTML5のパワーを使えば、まるでネイティブアプリのような動作をさせることも可能になっている。そのためのスマートフォン向けライブラリは数多くあれど、moblは一味も二味も違う。完全に専用言語でスマートフォン向けWebアプリケーションを開発できる。 moblはEclipse用のプラグインを配布しており、それをインストールした後プロジェクトを作成する。使うのはmoblという拡張子の
スマートフォン最適化サイトの本命か·jQuery Mobile MOONGIFT
jQuery MobileはjQuery公式が開発したスマートフォン向けサイト開発用ライブラリ。 MOONGIFTはこう見る jQuery Mobileは数ヶ月前に開発が発表され、ついに1.0α版が登場した待ちに待たれたライブラリ。既に幾つかこの手のライブラリはあるが、本家が打ち出してくる以上、人気は集まるだろう。既に機能も多いので、大抵のスマートフォンサイトならこなせそうだ。 jQTouchは不具合とは言わないまでも、利用に際してはコツを掴む必要があった。jQuery Mobileはぜひそのテツは踏まず、PC向けライブラリ同様の使い勝手を維持してほしいと願ってしまう。 jQuery MobileはJavaScript/jQuery製のオープンソース・ソフトウェア。iOS、特にiPhone/iPad用のWebサイトを作るための専用ライブラリは数多い。最適化され、iPhoneなどで見やすい画
携帯電話からのアクセスを真似する·Moxy MOONGIFT
MoxyはPerl製のオープンソース・ソフトウェア。日本において携帯電話サイトの需要は大きい。スマートフォンの活況もあって、PC向けと同時に携帯電話向けをリリースすることも多くなっている。また将来的にはPCよりもモバイルのシェアが大きくなると言われている。 携帯電話からのアクセスを模倣できる そんな携帯電話向けサイトの開発を行う場合、PCからアクセスを偽装してテストを行う必要がある。専用のソフトウェアの他、FirefoxのMobileSimulatorも使えるが、ここではWebブラウザベースのMoxyを紹介しよう。 MoxyはPerl製のソフトウェアで、専用のWebサーバとしてサービスが立ち上がる。ブラウザからアクセスすると、URLを指定して外部のWebサービスにアクセスできる。その際にはUserID、ユーザエージェント、HTTPヘッダーを任意に入れ替えてアクセスも可能だ。 Googleへ
JavaScriptを使わずにmixiアプリを作る！·mist.js MOONGIFT
mist.jsはJavaScript製/jQueryを使ったオープンソース・ソフトウェア。OpenSocialによってSNS上で実行できるアプリケーション環境が増えてきた。日本ではmixiやGooが有名なプレーヤになるだろう。実際に作ってみたいと考えている企業、個人も多いはずだ。 サンプルより。マイミクを取得する アイディアはあっても、プログラミングが苦手で参加を躊躇してしまっている…という人がいるかも知れない。そんな方はまずはmist.jsからはじめてみてはいかがだろう。mist.jsはなんとJavaScriptすら使わずにmixiアプリが開発できるフレームワークだ。 タネを言えばJavaScriptの代わりにmist.jsが定義する方式に則って記述することで、データの取得周りを隠蔽できるということだ。とはいえ取れるデータは多い。OWNER/VIEWER、マイミク、IDで指定してユーザ情
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
