Web Design and Development Tutorials - Design Articles - SEO TipsWe use cookies to analyze how you use our site and show ads related to your preferences. By continuing to use our site, you agree our use of cookies, terms of use and privacy policy.
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」
ごくごく小さなJavaScriptインタプリタ·TinyJS MOONGIFT
TinyJSはC++で作られた小さなJavaScriptインタプリタです。 mrubyというプロジェクトに注目が集まっています。Rubyの軽量版で、組み込み系に適した実行環境です。ごく小さな実行環境は組み込み系へ適用したり、スマートフォンでも軽快に動作するなど使い道が多いと思われます。そこで紹介したいのがTinyJS、C++で作られた小さなJavaScriptインタプリタです。 インタプリタを起動しました。printを使って結果を出力できます。 trueは1として出力されています。 undefinedもきちんとあります。 TinyJSは僅か2000行程度で作られています。JavaScript/EcmaScriptに準拠する形で開発が進められています。現状はVariables、配列、ハッシュ型に対応しており、JSONのパースや出力も可能です。関数も作成できます。さらにJavaScriptから
jQueryに足りない機能を色々追加·jQuery++ MOONGIFT
jQuery++は標準のjQueryにはない機能を幾つも追加するプラグインです。 jQueryはとても優秀なJavaScriptライブラリです。プラグインも多数作られており、それを使えば様々なことができます。そうした多彩な機能をまとめて提供してくれるのがjQuery++です。 ブロックの大きさを自動計算します。ブラウザごとの誤差も吸収してくれるようです。 フォームの各項目を操作するのに便利なメソッドです。 選択している文字、場所を取得できます。 マウスの場所やその時のDOM要素が取得できます。 ドラッグアクションです。 ドロップアクションです。 リサイズです。 jQuery++ではこれ以外にもアニメーション、クッキー、キーボード入力でBackspaceやタブ、エンターキー、ファンクションキーの入力を判定したりできます。全てのライブラリを一括でインストールする必要はなく、必要な機能だけをピッ
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を利用するなど今時の技術
Googleマップをもっと簡単に使おう·gmaps.js MOONGIFT
gmaps.jsはGoogleマップを使いやすくするJavaScriptライブラリです。 GoogleマップではJavaScriptのAPIも提供されていますが、使い勝手が良いとは言えません。活用していくならばもっと使いやすいgmaps.jsを利用しましょう。 まず普通の表示。GMapsに位置情報を渡すだけです。超簡単。 イベントも取れます。クリックやドラッグなど様々なイベントが使えます。 マーカーの追加も分かりやすいです。マーカーにイベントをつけるのも簡単。 HTMLコンテンツを表示するのも手軽です。 HTML5の位置情報取得にも対応しています。 住所を検索してジオコーディング。 ドローです。指定は大変ですが。 オーバーレイ表示です。 ルート検索です。二つの位置情報を渡すだけです。 ルート検索をさらにポイントごとに表示していくこともできます。 こちらは静的なマップ。画像として表示できます
使い勝手の悪いドロップダウンを華麗に変身·Chosen MOONGIFT
ChosenはHTMLのドロップダウンメニューをフィルタリング対応の快適なコンポーネントに変身させるjQuery/Prototype.jsプラグインです。 HTMLの貧弱なコンポーネントには毎度がっかりさせられます。例えばタイムゾーンや国を選ぶドロップダウンです。あれほど長いリストから一つを選ぶのは大きなストレスです。そこで使ってみてほしいのがChosenです。 変更前。普通の使い勝手の悪いドロップダウンです。 それがこんなに！フィルタリングまでできる高性能なドロップダウンに！ 複数選択もできます。 選択済アイテムをハイライト表示にもできます。 既に選択されているアイテムは非表示にもできます。 選択されているアイテムの横に×を出して非選択にできます。 Chosenでは一つを選ぶ、または複数を選ぶドロップダウンのどちらも最適な表示に変身させます。これならば自分が選びたいものだけを素早く選択で
任意のWebサイトにチャット風フォーラム機能を追加·WebAce MOONGIFT
WebAceは任意のWebサイトにチャットウィンドウを表示するソフトウェアです。 ブログやメディア、ソーシャルサイトなどではコメント機能が当たり前になっています。そうしたコメント機能がないWebサイトにおいても自由に会話が出来るようになる、そんなソフトウェアがWebAceです。 ブックマークレットを実行しました。今見ているページをキーにしたチャットウィンドウが開きます。 普通に文字を入力するだけです。 /helpでヘルプが表示されます。 アバターアイコンを変更しました。 たたんでおくと邪魔になりません。 WebAceは静的なWebサイトにおいてもJavaScriptのリンクをおいておくだけでチャット形式のコメントができるようになります。各個人でブックマークレットを実行しても良いですが、コメントの代替えとして予め設置しておいても便利そうです。 WebAceはPHP製のオープンソース・ソフトウ
クエリの改善に。MySQLのSlow Query Logを可視化する·MySQL slow-query-log Visualizer MOONGIFT
MySQL slow-query-log VisualizerはMySQLの時間のかかるクエリをWeb上で閲覧するソフトウェアです。 MySQLには実行時間の遅いクエリをログファイルに書き出す機能があります。単純にテキストに吐かれるだけなので分析に時間がかかってしまうのではないでしょうか。そこで使ってみたいのがWebブラウザベースの解析ソフトウェアMySQL slow-query-log Visualizerです。 サンプルです。データ量が多くないとあまり面白くないですね。 公式サイトより。曜日ごとに発生回数をグラフ化しています。 クエリログファイルをWebブラウザの画面にドロップするだけで解析処理が行われます。その結果はグラフに描かれる仕組みです。また、クエリは一覧で表示され、任意の文字でフィルタリングすることもできます。曜日と時間によって分析されるので対応すべきポイントが分かりやすくな
これは面白い。JavaScriptやDOM指定が使えるサイトキャプチャ·capturejs MOONGIFT
capturejsはnode.jsを使ったWebサイトのスクリーンショット取得ツールです。JavaScriptを使って一部の変更ができます。 Webサイトのキャプチャツールは人気がありますが、capturejsはとても面白いツールです。まるごと画像化するだけでなく、DOMセレクタを使ったりJavaScriptを使ってコンテンツを改変した上で画像化できます。 まずセレクタを使った例です。 ヘッダー部分だけ画像化できています。 次はロゴをhiddenにした場合。確かに画像が消えています。 オプションとしてユーザエージェントを指定したり、Cookieファイルの指定、タイムアウト時間の指定、ViewPortの設定もできるようになっています。コンテンツの一部だけを画像化したいといったニーズにぴったりなソフトウェアです。 capturejsはnode.js/JavaScript製、MIT Licens
スマートフォン、タブレット向けWebアプリ用フレームワーク·Mobello MOONGIFT
MobelloはiOSやAndroidに対応したモバイルWebアプリフレームワークです。 スマートフォンやタブレット向けのサービスを提供する際にはネイティブアプリとして開発するか、Webアプリとして開発するかと言った選択肢があります。今回紹介するMobelloはWebアプリ側のフレームワークですが、これまでにないほどネイティブに近い機能を提供しています。 デモアプリです。まるでiOSのホーム画面のようです。まずはホーム画面にアイコンを追加します。 こちらがホーム画面から立ち上げたところ。 セッティングアプリです。 テーマを変更できます。 リポジトリ。いわゆるApp Storeのようなアプリになっています。 インストールします。Webアプリなのでダウンロードは不要です。 インストールされました。 こちらはウィジェットのデモです。 ローディングアイコンのデモ。 ツールバーのデモ。 各種ボタン。
どこまでも自由に情報をまとめる·Meshcraft MOONGIFT
Meshcraftは自由度の高いコンセプトマップエディターです。 Webはとても自由度が高いです。しかしHTMLという枠の中で行動を迫られます（FlashやJavaアプレットもありますが）。しかしそうした枠を超えてとにかく自由に情報を蓄積していけるソフトウェアがMeshcraftです。 トップページです。色々な枠やテキストが浮かんでいます。これらは自由に動かしたり編集したりできます。マウスで全体の視点を動かすこともできます。 登録フォームです。下の部分が大きくなるのはなかなか気持ちいい感覚です。 こんな感じで情報を結びつけることもできます。 新しい項目を追加します。左クリックで追加されます。 項目を追加した後、ドラッグで線を引きます。これでリレーションができます。 互いの関係性を明記します。 枠付きの他、ラベルも追加できます。 Meshcraftはコンセプトマップエディターという名称になっ
様々なグラフを描画できる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だけで作られた分かち書き·TinySegmenter MOONGIFT
TinySegmenterはJavaScriptで作られた分かち書きライブラリです。 日本語から情報を得る際に使われる技術が分かち書きです。そんな分かち書きでは辞書を使って解析を行うのが一般的ですが、JavaScriptのような言語では大量の辞書を扱うのには不向きです。そこで自動的に判定するTinySegmenterを使ってみましょう。 分かち書きのサンプルです。機械的分類ですが、精度は高いように見えます。 2と5、9と5などの連続する数値が分かれてしまっているのが無念。しかし凄いです。 TinySegmenterでは解析は全てクライアントサイドで行われます。ライブラリは僅か25KBです。機械学習型であり、n-gramや文字種を組み合わせつつ分類を行っています。そのため新聞のような文字種が様々に組み合わさったある程度の長さを持った文章に対して強い反面、チャットや短いメッセージ、平仮名のみと
お試しを！クールなUIの掲示板·esoTalk MOONGIFT
esoTalkは格好いいUIの掲示板ソフトウェアです。 Webコミュニティの基本と言えば掲示板です。２ちゃんねるからphpBBをはじめ、多数の掲示板ソフトウェアが存在しますが今回紹介するのは最近のスタイルを活かしたesoTalkです。 スレッド一覧です。 スレッド詳細です。 新規登録します。 登録すると既読管理ができるようになります。 タグで絞り込んだりできます。 返信用ボックスです。 esoTalkはスタイリッシュな見栄えに加えて、JavaScriptを使った各種アニメーションが特徴となっています。実際使ってみると、その使い勝手の良さが分かるはずです。 esoTalkはPHP製のオープンソース・ソフトウェア（GPL v2）です。 MOONGIFTはこう見る インターネット上のサービスは流行り廃りがありますが、それでも２ちゃんねるは根強く生き残っています。コミュニティサイトは一度形成される
PDFをPDFのまま差分チェック·DiffPDF MOONGIFT
DiffPDFはPDFファイル同士のテキスト、描画の差分を表示するソフトウェアです。 プログラマーが開発中によく使うのがDiffです。行や単語単位で比較し、どこが違うか分かるので修正したり相違点をチェックしたりするのにとても便利です。そんなDiffをPDFでも使えるようにするのがDiffPDFです。 メイン画面です。 二つのファイルを指定して比較しました。異なるテキスト部分がハイライト表示されています。 こんな感じです。 線の表示の違いも取れます。 こうするとぐっと分かりやすくなります。 この手のソフトウェアとしてPDFをテキスト化して、それを比較するものはありましたが、PDFのまま比較してくれるという点においてDiffPDFは非常に便利です。なお日本語には対応しておらず、PDFとして表示した時点でも内容が抜け落ちてしまっています。 DiffPDFはWindows/Mac OSX/Linu
ストレス無しでGoogleマップを使ったサイトが作れる「gmaps.js」:phpspot開発日誌
gmaps.js ? the easiest way to use Google Maps ストレス無しでGoogleマップを使ったサイトが作れる「gmaps.js」 Googleマップのサイトへの実装が本当に簡単で、かつ多機能なライブラリのご紹介です 簡単なマップを出すのに必要なコードは以下。 表示させるdivと緯度経度を指定するだけです 出来ることリストは以下 マップのクリック、ドラッグ時のイベントハンドラ実装 マーカー付与 ジオロケーション・ジオコーディング マップオーバーレイ マップ上のコンテキストメニュー実装 地図上の区画指定 目的地までのルート描画 静的な画像をマップ表示 などなど超多機能。 Googleマップ使うかもしれない場合は覚えておいて損はありません 関連エントリ Googleマップ関連のjQueryプラグインとチュートリアル集 スマホやタブレットでGoogleマップ風
JavaScriptオブジェクト用問い合わせ言語·SpahQL MOONGIFT
SpahQLはJavaScriptオブジェクトのデータ抽出に使えるクエリライブラリです。 WebアプリケーションではデータをJSONで利用するのが一般的です。データが大量にあるのであれば、そこから欲しいデータだけを抽出する仕組みが必要になるでしょう。JavaScriptでそれを可能にするのがSpahQLです。 例です。hash1というキーに対応したデータを取り出しています。 ネストして調べられます。 配列、ハッシュどちらにも使えます。 配列の場合は0などとキー指定もできます。 配列でサイズが1以上のものをピックアップしています。 データは抽出するだけでなく、プロパティを使ってサイズやデータの種別を調べることもできます。さらに正規表現を絡めてマッチするか否かをチェックするといった機能もあります。node.js、Webブラウザどちらでも使えるライブラリになっています。 SpahQLはJavaS
多彩なフレームワークに対応したPHP向け認証ライブラリ·Opauth MOONGIFT
OpauthはPHP向けの認証ライブラリです。抽象化することで多様なプロバイダーに容易に対応できます。 Webサービスで認証を用意すると言っても今は多様な技術が存在します。単なるID/パスワードに限らず、OpenIDやOAuthもあります。サービスプロバイダーごとに実装も若干変わったりします。そうした認証技術を統合して使えるのがOpauthです。 デモです。 Facebook認証です。 問題なく認証できました。各種データも取得できているのが分かります。 こちらはGoogle認証です。 こちらもユーザプロフィール含めて取得できています。 最後はTwitterです。 はい、問題ありません！ OpauthはRubyの認証ライブラリOmniauthにインスパイアされて作られており、認証部分を抽象化することでプロバイダーを切り替えて容易に様々なサービスに対応できるようになっています。技術的にはOpe
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
GREE Engineering
