ツンデレ・幼なじみ・メイド・妹のボイスが入った「∞(むげん)プチプチ ぷち萌え」 - GIGAZINE
ウェブブラウザ「Google Chrome」の最新安定版であるバージョン123.0.6312.58(Linux)／123.0.6312.59(Windows、Mac)がリリースされました。CSSやWeb APIに様々な機能が追加されており、従来よりさらにウェブコンテンツの表現力が豊かになっています。 Chrome Releases: Stable Channel Update for Desktop New in Chrome 123: light-dark function, Service Worker Routing API, and more! - YouTube ◆CSS関数light-dark() CSSの色関数として、新たにlight-dark()が追加されます。この関数は引数として2つの色を指定することができ、下記の状況に応じていずれか一方を返します。 ・ウェブ開発者が明色
GIGAZINE - 画像を使わず、角にアンチエイリアスをかけて丸くする「curvyCorners」
「curvyCorners」はフリーのJavaScriptで、角が丸いコーナーをDIV要素で簡単に作ることが可能。特徴は画像を使ったのと同じくらい角がなめらかに丸くなる点と、いたって利用が簡単な点。 どれぐらい丸くなるのかという実例とコードのダウンロード、設置方法は以下を参照。 例その1、3ピクセルの白いボーダーを使い、角は半径20ピクセルで丸くなってます 例その2、固定幅と高さで画像を固定し、角は半径20ピクセルで丸くしている例 ダウンロードはこちらから 使い方は以下を参照 http://www.curvycorners.net/ ほとんどのメジャーなブラウザをサポートしているので汎用性も高く、使い勝手もいい感じです。
JSコード内からPHPコードを実行して連携できる「php.js」:phpspot開発日誌
php.js - PHP VM with JavaScript JSコード内からPHPコードを実行して連携できる「php.js」 VM上でPHPコードを実行した結果を受け取れるというモノ。 以前、phpの関数をJavaScriptに移植したphp.jsというものをご紹介しましたが、今回は実行結果をJS側で受け取るというものになります。 GitHubにてコードが公開されています。 まだテスト段階ということでこんなものがあるんだ、程度の認知にとどまりますが、JSで、ちょっとした時に、あのPHPコードが実行したいってことがあったりするので、なかなか面白く、正式に動けば実用的かもしれませんね 関連エントリ PHPで使える便利関数をJavaScriptでも使えるようにする「php.js」
Googleマップをもっと簡単に使おう·gmaps.js MOONGIFT
gmaps.jsはGoogleマップを使いやすくするJavaScriptライブラリです。 GoogleマップではJavaScriptのAPIも提供されていますが、使い勝手が良いとは言えません。活用していくならばもっと使いやすいgmaps.jsを利用しましょう。 まず普通の表示。GMapsに位置情報を渡すだけです。超簡単。 イベントも取れます。クリックやドラッグなど様々なイベントが使えます。 マーカーの追加も分かりやすいです。マーカーにイベントをつけるのも簡単。 HTMLコンテンツを表示するのも手軽です。 HTML5の位置情報取得にも対応しています。 住所を検索してジオコーディング。 ドローです。指定は大変ですが。 オーバーレイ表示です。 ルート検索です。二つの位置情報を渡すだけです。 ルート検索をさらにポイントごとに表示していくこともできます。 こちらは静的なマップ。画像として表示できます
node.js + RedisによるWebチャット·Socket.io MOONGIFT
Balloons.IOはnode.js+Redisで作られたWebチャットサーバです。 node.jsを使ったWebアプリケーションとしてよく取り上げられるのがWebチャットではないでしょうか。WebSocketsとノンブロッキングなnode.jsの特徴を引き出したサービスです。そんなWebチャットを自分でも立ててみたいと思ったらBalloons.IOを使ってみましょう。 トップページです。認証はTwitterを利用します。 ログインしました。ついで部屋を作成します。 チャット画面です。 アイコンが表示されていませんが会話は出来ます。 日本語も特に問題なく使えます。 Balloons.IOはnode.js + Socket.io + Redisの組み合わせで実装されています。さらにTwitterによるOAuth認証も使われており、WebフレームワークにExpressを利用するなど今時の技術
JavaScriptだけで作られた分かち書き·TinySegmenter MOONGIFT
TinySegmenterはJavaScriptで作られた分かち書きライブラリです。 日本語から情報を得る際に使われる技術が分かち書きです。そんな分かち書きでは辞書を使って解析を行うのが一般的ですが、JavaScriptのような言語では大量の辞書を扱うのには不向きです。そこで自動的に判定するTinySegmenterを使ってみましょう。 分かち書きのサンプルです。機械的分類ですが、精度は高いように見えます。 2と5、9と5などの連続する数値が分かれてしまっているのが無念。しかし凄いです。 TinySegmenterでは解析は全てクライアントサイドで行われます。ライブラリは僅か25KBです。機械学習型であり、n-gramや文字種を組み合わせつつ分類を行っています。そのため新聞のような文字種が様々に組み合わさったある程度の長さを持った文章に対して強い反面、チャットや短いメッセージ、平仮名のみと
どこまでも自由に情報をまとめる·Meshcraft MOONGIFT
Meshcraftは自由度の高いコンセプトマップエディターです。 Webはとても自由度が高いです。しかしHTMLという枠の中で行動を迫られます（FlashやJavaアプレットもありますが）。しかしそうした枠を超えてとにかく自由に情報を蓄積していけるソフトウェアがMeshcraftです。 トップページです。色々な枠やテキストが浮かんでいます。これらは自由に動かしたり編集したりできます。マウスで全体の視点を動かすこともできます。 登録フォームです。下の部分が大きくなるのはなかなか気持ちいい感覚です。 こんな感じで情報を結びつけることもできます。 新しい項目を追加します。左クリックで追加されます。 項目を追加した後、ドラッグで線を引きます。これでリレーションができます。 互いの関係性を明記します。 枠付きの他、ラベルも追加できます。 Meshcraftはコンセプトマップエディターという名称になっ
これは面白い。JavaScriptやDOM指定が使えるサイトキャプチャ·capturejs MOONGIFT
capturejsはnode.jsを使ったWebサイトのスクリーンショット取得ツールです。JavaScriptを使って一部の変更ができます。 Webサイトのキャプチャツールは人気がありますが、capturejsはとても面白いツールです。まるごと画像化するだけでなく、DOMセレクタを使ったりJavaScriptを使ってコンテンツを改変した上で画像化できます。 まずセレクタを使った例です。 ヘッダー部分だけ画像化できています。 次はロゴをhiddenにした場合。確かに画像が消えています。 オプションとしてユーザエージェントを指定したり、Cookieファイルの指定、タイムアウト時間の指定、ViewPortの設定もできるようになっています。コンテンツの一部だけを画像化したいといったニーズにぴったりなソフトウェアです。 capturejsはnode.js/JavaScript製、MIT Licens
使い勝手の悪いドロップダウンを華麗に変身·Chosen MOONGIFT
ChosenはHTMLのドロップダウンメニューをフィルタリング対応の快適なコンポーネントに変身させるjQuery/Prototype.jsプラグインです。 HTMLの貧弱なコンポーネントには毎度がっかりさせられます。例えばタイムゾーンや国を選ぶドロップダウンです。あれほど長いリストから一つを選ぶのは大きなストレスです。そこで使ってみてほしいのがChosenです。 変更前。普通の使い勝手の悪いドロップダウンです。 それがこんなに！フィルタリングまでできる高性能なドロップダウンに！ 複数選択もできます。 選択済アイテムをハイライト表示にもできます。 既に選択されているアイテムは非表示にもできます。 選択されているアイテムの横に×を出して非選択にできます。 Chosenでは一つを選ぶ、または複数を選ぶドロップダウンのどちらも最適な表示に変身させます。これならば自分が選びたいものだけを素早く選択で
スマートフォン、タブレット向けWebアプリ用フレームワーク·Mobello MOONGIFT
MobelloはiOSやAndroidに対応したモバイルWebアプリフレームワークです。 スマートフォンやタブレット向けのサービスを提供する際にはネイティブアプリとして開発するか、Webアプリとして開発するかと言った選択肢があります。今回紹介するMobelloはWebアプリ側のフレームワークですが、これまでにないほどネイティブに近い機能を提供しています。 デモアプリです。まるでiOSのホーム画面のようです。まずはホーム画面にアイコンを追加します。 こちらがホーム画面から立ち上げたところ。 セッティングアプリです。 テーマを変更できます。 リポジトリ。いわゆるApp Storeのようなアプリになっています。 インストールします。Webアプリなのでダウンロードは不要です。 インストールされました。 こちらはウィジェットのデモです。 ローディングアイコンのデモ。 ツールバーのデモ。 各種ボタン。
jQueryに足りない機能を色々追加·jQuery++ MOONGIFT
jQuery++は標準のjQueryにはない機能を幾つも追加するプラグインです。 jQueryはとても優秀なJavaScriptライブラリです。プラグインも多数作られており、それを使えば様々なことができます。そうした多彩な機能をまとめて提供してくれるのがjQuery++です。 ブロックの大きさを自動計算します。ブラウザごとの誤差も吸収してくれるようです。 フォームの各項目を操作するのに便利なメソッドです。 選択している文字、場所を取得できます。 マウスの場所やその時のDOM要素が取得できます。 ドラッグアクションです。 ドロップアクションです。 リサイズです。 jQuery++ではこれ以外にもアニメーション、クッキー、キーボード入力でBackspaceやタブ、エンターキー、ファンクションキーの入力を判定したりできます。全てのライブラリを一括でインストールする必要はなく、必要な機能だけをピッ
様々なグラフを描画できるJavaScriptライブラリ「NVD3.js」:phpspot開発日誌
NVD3.js :: re-usable charts for d3.js 様々なグラフを描画できるJavaScriptライブラリ「NVD3.js」 d3.jsという以前紹介したライブラリをベースに利用しているみたい。 グラフ描画のライブラリは色々ありますが、こちらのライブラリで描画するグラフのデザインもなかなかいい感じですね マウスとのインタラクティブなグラフ実装が可能で拡張も容易みたい サンプルページにはソースがついているので参考に組めば抵抗なくグラフが描けそうです 関連エントリ 見た目がクールなグラフ描画用jQueryプラグイン「Morris.js」 HTML5で綺麗でインタラクティブなグラフが描けるライブラリ「Flotr2」 様々な時系列グラフを描画できるJavaScriptライブラリ「Rickshaw」 クールなドアノブ風の％グラフを描画できるjQuery Knob
JavaScriptだけで複数のファイルをまとめて画像化·PNGDrive MOONGIFT
PNGDriveはファイルを画像化してサイズを小さくするソフトウェアです。 ファイルを相互に別形式に変換するというソフトウェアは多いですが、PNGDriveはちょっと一風変わっています。任意のファイルを画像化し、デコードできるソフトウェアになります。 メイン画面です。 ドロップしました。Zipファイルの場合、サイズが大きくなってしまいました。ファイルは複数ドロップできます。 テキストの場合は54%まで縮まっています。 面白いのはやはりサーバサイドの仕組みを使わずに画像だけで行っているということでしょうか。画像化されたデータは特に意味がない、砂嵐のようになっていますが、可逆変換なのもユニークです。 PNGDriveはJavaScript製、Apache License 2.0のオープンソース・ソフトウェアです。 MOONGIFTはこう見る インターネット上の圧縮技術としては現在Gzipがメイ
こんなことまで。HTML5による動画チャットや通話を可能にする·sipML5 MOONGIFT
sipML5はHTML5で実装されたSIPクライアントです。 インターネット電話というとSkypeやLINEが有名ですが、IP電話もまたインターネットを使った電話システムです。そこで使われているSIPをHTML5でサポートしたのがsipML5です。 コネクトしました。 が、対話しようとしてもできませんでした…。 利用に際してはMediaStream（WebRTC）を有効にする必要があります。 デモ動画（iPadで会話する図） デモ動画（Androidで会話する図） sipML5は任意のSIPサーバに接続し、動画や音声通話が楽しめるようになります。これまで同様の機能を実現するにはFlashの力を使わざるを得なかったのですが…すごい時代になったものです。 sipML5はHTML5/JavaScript製、GPL v3のオープンソース・ソフトウェアです。 MOONGIFTはこう見る sipML5
JavaScriptオブジェクト用問い合わせ言語·SpahQL MOONGIFT
SpahQLはJavaScriptオブジェクトのデータ抽出に使えるクエリライブラリです。 WebアプリケーションではデータをJSONで利用するのが一般的です。データが大量にあるのであれば、そこから欲しいデータだけを抽出する仕組みが必要になるでしょう。JavaScriptでそれを可能にするのがSpahQLです。 例です。hash1というキーに対応したデータを取り出しています。 ネストして調べられます。 配列、ハッシュどちらにも使えます。 配列の場合は0などとキー指定もできます。 配列でサイズが1以上のものをピックアップしています。 データは抽出するだけでなく、プロパティを使ってサイズやデータの種別を調べることもできます。さらに正規表現を絡めてマッチするか否かをチェックするといった機能もあります。node.js、Webブラウザどちらでも使えるライブラリになっています。 SpahQLはJavaS
ゲームに使える。オブジェクトと光源によって生まれる影を描画·Illuminated.js MOONGIFT
Illuminated.jsは光とオブジェクトの影を自動計算するJavaScriptライブラリです。RPGゲームやアクションゲームで効果的です。 光があるところには必ず影がある、どこかの大魔王もそういってやられていきました。ということでJavaScriptを使ってオブジェクトと光、そして影を計算するライブラリIlluminated.jsを紹介します。 デモです。オブジェクトやライトを配置していきます。 まずライトを配置してみました。 次にオブジェクトを配置します。ライトとオブジェクトの配置によって光と影が変化しています。 別な光源を配置しました。さらに複雑な計算になっているはずです。 オブジェクトを動かすと自動で影が変化します。 色を変更した場合です。光源の強さも変更できます。 Illuminated.jsではオブジェクトや光源をドラッグで移動すると、それに合わせて影も自動的に変化します。
ストレス無しでGoogleマップを使ったサイトが作れる「gmaps.js」:phpspot開発日誌
gmaps.js ? the easiest way to use Google Maps ストレス無しでGoogleマップを使ったサイトが作れる「gmaps.js」 Googleマップのサイトへの実装が本当に簡単で、かつ多機能なライブラリのご紹介です 簡単なマップを出すのに必要なコードは以下。 表示させるdivと緯度経度を指定するだけです 出来ることリストは以下 マップのクリック、ドラッグ時のイベントハンドラ実装 マーカー付与 ジオロケーション・ジオコーディング マップオーバーレイ マップ上のコンテキストメニュー実装 地図上の区画指定 目的地までのルート描画 静的な画像をマップ表示 などなど超多機能。 Googleマップ使うかもしれない場合は覚えておいて損はありません 関連エントリ Googleマップ関連のjQueryプラグインとチュートリアル集 スマホやタブレットでGoogleマップ風
ノブ型UIで直感的な入力を·jQuery Knob MOONGIFT
jQuery Knobはノブを使って値の設定を行うコンポーネントです。スクロールで値をスムーズに変化させられます。 Webで標準で使えるコンポーネントはパターンがとても少なく、表現力が乏しいのが欠点です。今回紹介するjQuery Knobはノブ型のコンポーネントでスクロールを使って値を設定するタイプの新しいコンポーネントになっています。 デモです。サークルの中でスクロールすると値がスムーズに変化します。 大きさや数字を非表示にしたりできます。 表示のみに設定もできます。 アクションで表示を行うこともできます。 iPodのホイール風表示です。マックスを設けずに表示もできます。 デモ動画です。 jQuery KnobのデザインはCanvasを使って描かれており、画像を用意する必要はありません。また、タッチやマウスホイール、キーボードによる入力に対応したイベントが取れるようになっています。テキス
レガシーなブラウザにも高度なグラフィックを。JavaScriptによるOpenGL実装·JSGL MOONGIFT
JSGLはJavaScriptによるOpenGL実装です。 HTML5の新機能の一つにWebGLがあります。しかしまだまだ最近のWebブラウザでしか実装されていない機能になります。そこでWebGLに対応していないWebブラウザに対して3Dモデリングを行うライブラリがJSGLです。JavaScriptを使ってOpenGLを実装しています。 デモです。オブジェクトが回転しています。FPSはかなり高い数値が出ています。 実装サンプルです。コードはかなり分かりやすいのではないでしょうか。 JSGLには多彩なAPIが作られており、細かくモデリングができるようになっています。元々はJSOS向けのグラフィックスAPIとして開発されているとのことです。 JSGLはJavaScript製、MIT Licenseのオープンソース・ソフトウェアになります。 MOONGIFTはこう見る JSGLのAPIはWebG
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
| FreeWebDev.jp