タグ

ブックマーク / www.moongift.jp (205)

  • Bootstrapベースの管理画面用テンプレート·Charisma MOONGIFT

    CharismaはHTML5/JavaScript製のオープンソース・ソフトウェア(Apache Licnese 2.0)です。 Webシステム開発において意外と不遇なのが管理画面です。内部の人が使うものなので適当に作られるケースが多くなります。そこで使ってみたいのがCharismaです。リッチな管理画面をBoostrapをベースに作り上げる事ができます。 ウィジェットがついた、リッチな管理画面です。ここまで恵まれているケースは早々ないでしょう。 ドラッグ&ドロップによる配置変更もサポート。 折り畳んで隠す事もできます。 グリッドは細かくサポートされています。 カレンダー。システム内部のデータをマッピングすると見通しが良くなりそうです。 メンバー一覧。検索やラベルもあって便利そうです。 ギャラリー。サムネイル写真をきれいに並べています。 タイポグラフィ。様々なタグをサポートしているので奇麗

    Bootstrapベースの管理画面用テンプレート·Charisma MOONGIFT
  • 簡単に自分のローカルサーバをオンラインに公開·ngrok MOONGIFT

    ngrokはWindows/Mac OSX/Linux用のオープンソース・ソフトウェア(Apache License 2.0)です。 自分のローカルで作っているサイトを誰かに見せたいと思ったことはないでしょうか。社内であればLANを使ってアクセスもできるでしょうが、ルータ越しではそう簡単ではありません。しかしngrokを使えばとても簡単に一時的な公開が実現できます。 実行しました。引数として何番のポートを見せたいか指定します。例えば3000や8080、80などです。そうするとインターネットからアクセスするためのURLが生成されます。 管理画面にアクセスすると指定したポートへアクセスした結果が表示されます。 外部からアクセスするとログがリアルタイムに流れていきます。 ヘッダーなども閲覧できます。 サーバにもログが出ています。 仕組みとしてはngrokが提供するWebサーバ(ngrok.com

    簡単に自分のローカルサーバをオンラインに公開·ngrok MOONGIFT
    ko-ya-ma
    ko-ya-ma 2013/07/14
    お手軽で便利そう。怖くて仕事じゃ使わないけど
  • 管理画面もあるPHP製の認証システム·AuthManager MOONGIFT

    AuthManagerは認証およびユーザ管理を提供するシステムです。 Webサイトを作っていて認証はよく必要になります。しかしその度に作っていては面倒に感じることでしょう。そこでAuthManagerを組み入れてみましょう。認証とユーザ管理を一手に引き受けてくれる便利なソフトウェアです。 登録画面です。 ログイン画面です。 ログインしました!アイコンも表示されています。 こちらは管理向け。ユーザ管理画面です。 設定です。 reCAPTCHAの設定です。 AuthManagerの主な機能は指定されたコードを埋め込むことでコンテンツへのアクセスを制限できるようにする、管理画面を使ったユーザ管理、reCAPTCHA対応、Facebookコネクト、メールテンプレート、アクセスログ、Google Analyticsサポートとなっています。 AuthManagerはPHP製のソフトウェア(ソースコード

    管理画面もあるPHP製の認証システム·AuthManager MOONGIFT
    ko-ya-ma
    ko-ya-ma 2012/10/01
    コンテンツへのアクセス制限、管理画面を使ったユーザ管理、reCAPTCHA対応、Facebookコネクト、メールテンプレート、アクセスログ、Google Analyticsサポート
  • これは凄い。JavaScriptで作られたPHP VM·php.js MOONGIFT

    php.jsはJavaScriptで作られたPHP VMです。PHPコードをJavaScriptに変換して実行します。 世の中には色々変わったことを考える人がいます。Webブラウザでデフォルトで実行できるプログラミング言語がJavaScriptだけなんて許しがたい、そう考えたPHPプログラマーが生み出したのがphp.jsです。その名の通り、PHPの実行エンジンをJavaScriptに実装したというとんでもないソフトウェアになります。 確かに実行できています。PHPのコードからJavaScriptに変換を行っているようです。 配列、クラスさらにvar_dumpまで実装されているのが興味深いです。 かなり突っ込んだPHPの処理もできている模様です。これは面白い。 ダブルクオートの中に変数を入れて普通に出力できているのが興味深いです。 php.jsではPHPのコードがそのまま実行できます(もちろ

    ko-ya-ma
    ko-ya-ma 2012/08/13
    PHPの実行エンジンをJavaScriptに実装。Webブラウザ上でPHPが動く
  • これを使えば簡単。入力可能なPDFをGUIで作成·PDF Forms Designer MOONGIFT

    PDF Forms Designerは入力対応のPDFを作成するソフトウェアです。 PDFのあまり使われていない機能の一つ(失礼!)にフォーム入力があります。個人的には国や自治体関係くらいでしか見た事のない機能な気がしますが、その原因は作るためのソフトウェアが限られるという問題があるかと思います。そこでPDFフォームを作ってみたい方はPDF Forms Designerを使って無料でフォームを作りましょう。 メイン画面です。 ボタンやテキストボックスを配置します。 日語が表示されないのが残念ですが、テキストボックスの値を書き換えられます。 画像を貼付ける事もできます。 オブジェクトにアクションをつける事もできます。 PDF Forms Designerでは様々な入力コンポーネントを配置して、フォームを作成します。利用者は入力や選択をした後、印刷するような仕組みです。 PDF Forms

  • Facebookアプリを作るノウハウの詰まったライブラリ·crocos-js MOONGIFT

    crocos-jsはFacebookアプリを作るのに必要な技術を盛り込んだライブラリです。 Facebookの成長を牽引した要因の一つはアプリでしょう。ゲームが中心ではありますが、Facebookページに埋め込むタイプのアプリも多数あります。そんなFacebookアプリを作るのに便利なライブラリがcrocos-jsです。 こちらは普通にHTMLを表示したところ。html.self-frameが定義されています。 こちらはiframeの中に表示したところ。html.in-frameが定義されています。これは良い! fbxを使った表示にも対応しています。数字の6という部分がそうです。 crocos-jsはCrocosが自社のFacebookアプリを開発してきた中で培われてきたノウハウを盛り込んだライブラリです。iframeか否か判断する、FBオブジェクトが初期化された後に任意のコードを実行する

  • まるで魔法。GitリポジトリをHerokuに直接デプロイ·Heroku Installer MOONGIFT

    Heroku InstallerはGitリポジトリを指定してHerokuへの新規インスタンス立ち上げからデプロイまで自動化してくれるソフトウェアです。 ローカルで動作するソフトウェアはバイナリの配布ができるのでダウンロードしてすぐに試せます。Webアプリケーションの場合、サーバのセットアップからアップロードなど様々な手順を踏まなければなりません。しかしHeroku Installerを使えば魔法のように簡単にサーバのセットアップが完了してしまいます。 メイン画面です。アプリケーション名とHerokuAPIキーを設定します。 自動的にダウンロードやデプロイが行われます。 完了しました!バックグラウンドでタブが開いています。 おおー。見事に立ち上がりました。 Heroku InstallerはHerokuAPIを使い、指定したGitリポジトリからソースコードを取り込み、Heroku上に新し

    まるで魔法。GitリポジトリをHerokuに直接デプロイ·Heroku Installer MOONGIFT
  • Web上で録音、再生を可能にする小さなJavaScript/Flashライブラリ·WAMI recorder MOONGIFT

    WAMI recorderはJavaScriptから操作可能なFlash製の音声録音、再生ライブラリです。 HTML5が浸透しつつありますが、逆にJavaScriptでは出来ないもどかしい部分も明確になってきています。その一つにマイクロフォンへのアクセスがあります。しかしそんな時こそFlashと連携させれば良いのです。WAMI recorderを使えばオンラインの録音、再生環境が容易に実現します。 アクセス許可を求めるダイアログが出ます。 左側が録音、右側が再生ボタンになります。 WAMI recorderはごくシンプルなUIでボタンを押して録音、再生ができます。JavaScript向けのAPIも提供されていますのでWeb上で録音、再生環境が実現できるでしょう。WAMI recorderは録音したデータをPOSTで指定したURLに飛ばせるようになっています。その音声データを使えば面白いサー

    ko-ya-ma
    ko-ya-ma 2012/07/16
    Flashと連携させ、マイクを通じた録音をする
  • WebベースのMongoDB管理インタフェース·mViewer MOONGIFT

    mViewerはWebベースのシンプルなMongoDB管理インタフェースです。 最近はNoSQLを運用の一部に使うことが増えてきました。そうなると必要になるのが管理ツールです。すぐに使えて手軽なものが良ければmViewerを使ってみましょう。起動コマンドも用意されていて簡単です。 トップページです。ログインします。 ログインしました。左側にデータベースが並んでいます。 データベースを選択するとコレクションが表示されます。 コレクションはツリーテーブルで表示もできます。 サーバの状況表示。 データベースの状況表示。 ツリーを開いてさらに内部の値を確認できます。 Flashベースの利用状況モニタリング。 新しいデータベースの作成もできます。 コンテクストメニュー。 デモ動画です。 mViewerはデータベースの作成や削除、コレクションの作成、更新と削除、GridFSファイルの追加、表示、ダウン

  • こんな手が…。Dropbox上で動的システムを動かす「Drapache」 - MOONGIFT|オープンソース・ソフトウェア紹介を軸としたITエンジニア、Webデザイナー向けブログ

    DrapacheはDropbox内のファイルを読み込んで動的に動かすWebサーバです。 DropboxではPublicに入れたファイルをHTTPを通じて読み込めるようにしています。この機能を使って静的なWebサイトを提供している人もいます。しかしそれで十分ではありません。時代は動的システム、Dropbox内のファイルを動的システムに対応させるソフトウェアがDrapacheです。 まずドメインを取ります。 次にDropboxをコネクトします。 接続を許可します。 完了です。そうするとアプリフォルダの中にDrapacheフォルダができあがります。 ファイル構成はこんな感じです。 サンプルのスクリプトです。確かに動的ファイルが動いています。 動的です。もちろん修正すれば若干のタイムラグはあれど反映されます。 Drapacheの仕組みとしては登録したユーザのデータを読み込み、DrapacheがWe

    こんな手が…。Dropbox上で動的システムを動かす「Drapache」 - MOONGIFT|オープンソース・ソフトウェア紹介を軸としたITエンジニア、Webデザイナー向けブログ
    ko-ya-ma
    ko-ya-ma 2012/06/08
    ローカルでサーバを動かすことも可能。MITライセンス
  • 多彩なフレームワークに対応したPHP向け認証ライブラリ·Opauth MOONGIFT

    OpauthはPHP向けの認証ライブラリです。抽象化することで多様なプロバイダーに容易に対応できます。 Webサービスで認証を用意すると言っても今は多様な技術が存在します。単なるID/パスワードに限らず、OpenIDやOAuthもあります。サービスプロバイダーごとに実装も若干変わったりします。そうした認証技術を統合して使えるのがOpauthです。 デモです。 Facebook認証です。 問題なく認証できました。各種データも取得できているのが分かります。 こちらはGoogle認証です。 こちらもユーザプロフィール含めて取得できています。 最後はTwitterです。 はい、問題ありません! OpauthはRubyの認証ライブラリOmniauthにインスパイアされて作られており、認証部分を抽象化することでプロバイダーを切り替えて容易に様々なサービスに対応できるようになっています。技術的にはOpe

    ko-ya-ma
    ko-ya-ma 2012/06/04
    これはイイ
  • ワンクリックでMac OSX上にRuby on Rails開発環境を構築·Rails One Click MOONGIFT

    Rails One ClickはMac OSXRuby on Rails開発環境をボタン一つで整えてくれるソフトウェアです。 Mac OSXにおけるRuby on Rails開発環境を一気に整えてくれるのがRails One Clickです。ウィザード方式でボタンクリックだけでRuby on Railsが開発できるようになります。 メイン画面です。ボタンを押すとインストールが開始します。予めXcodeがインストールされている必要があります。 ダウンロードやコンパイルも同時なのでちょっと時間がかかります。 ログです。 完了しました。 この画面が表示されていれば完了です。 デモ動画です。 Rails One ClickはDocuments以下に一通りの環境をインストールするので、ルート権限不要で使えるのが便利です。 Rails One ClickはMac OSX用のオープンソース・ソフトウェ

  • 1,000のサーバでも監視できるnode.js製死活チェッカー·uptime MOONGIFT

    uptimeはnode.jsで作られたWebサーバ死活チェッカーです。 Webサーバがきちんと正常に動き続けているかどうか一番簡単にチェックするのは定期的にアクセスしてレスポンスタイムを見ることです。そんなWebサービスの死活チェックに使えるのがuptimeです。 サーバを立ち上げました。最初に監視するWebサーバを設定します。 URLと監視する間隔を指定するくらいです。 監視を開始しました。グラフは自動更新されないのでご注意ください。 イベントがあればこちらに出力されます。 グラフではなく一覧で結果を確認できます。 徐々にグラフが更新されていきます。 uptimeは1000以上のWebサーバを一括で監視できるパフォーマンスを持っています。またダウンしている際にはWebアラートを表示できます。エラーがあった際にはHTTPステータスやその内容を記録してくれます。サーバはタグを使ってグループ管

  • これは格好いい。Windows 8のMetro UIをHTML5で再現·Metro UI CSS MOONGIFT

    Metro UI CSSWindows 8のMetro UIHTML5/CSS3で再現したソフトウェアです。 次期WindowsWindows 8ではMetro UIと呼ばれる新しいインタフェースが利用されています。そんなMetro UICSSで再現したのがMetro UI CSSになります。 デスクトップで見たイメージです。アイコンが並んでいます。 選択できる画像リストです。 選択できるリストです。画像も埋め込めます。 チャットなどで使えそうなリストです。吹き出しもついています。 アプリケーションリストです。 時計などのウィジェットです。 iPadでの表示です。タブレットの方が最適化されています。 左右の移動もできます。 デモ動画です。動きはスムーズです。 動きはかなりスムーズで格好いいです。パネルを押すとちょっとへこんだり、ボタンも多数用意されています。リストをタップして選択し

    これは格好いい。Windows 8のMetro UIをHTML5で再現·Metro UI CSS MOONGIFT
  • すげえ!WebブラウザからTitaniumアプリを開発、試せる·TiShadow MOONGIFT

    TiShadowはWebブラウザからインタラクティブにTitaniumアプリケーションを開発できるソフトウェアです。 JavaScriptでiOS/Androidアプリを開発できるTitanium。そんなTitaniumを使ってインタラクティブにWebブラウザからアプリを開発できてしまうのがTiShadowです。 こちらはデスクトップのWebブラウザです。 次にアプリからサーバに接続します。これで準備完了です。 最初の表示です。何もありません。 こんな感じのコードを実行します。 アラートが出ました。 次に複雑なUIを実行します。 おお、ちゃんと描画されました。 デモ動画です。 TiShadowはrequireなどは使えないのでシンプルなアプリに限定されると思いますが、サーバに接続しているデバイス全てにデータが送信できるので複数をデバイスをまとめて試すと言ったこともできます。 TiShado

    ko-ya-ma
    ko-ya-ma 2012/03/30
    複雑なアプリはだめだが、ブラウザ上で開発できる。また、サーバに接続されている全てのデバイスにデータ送信可能。
  • プロジェクト管理に使ってみたい。jQuery製のガントチャートライブラリ·jQuery.ganttView MOONGIFT

    jQuery.ganttViewはjQuery製のガントチャート表示ライブラリです。 jQueryを使ってガントチャートを表示するライブラリがjQuery.ganttViewです。表示だけでなくデータのメンテナンスもできるようになっています。 いい感じにガントチャートが表示されています。 ドラッグでタスクを左右に移動させられます。 期間の変更は枠の端をドラッグします。 データはJSONで与えるだけです。 jQuery.ganttViewは表示系のライブラリなのでデータベースに蓄積された内容をガントチャートにして表示すると言った使い方が便利そうです。なお表示はタスクごとに横に表示される形で、複数のタスクを同一線上に表示することはできないようです。 jQuery.ganttViewはjQuery/JavaScript製のオープンソース・ソフトウェア(MIT License)です。 MOONGI

    ko-ya-ma
    ko-ya-ma 2012/03/26
    ガント表示ライブラリ。データはJSONで与える。MITライセンス
  • 小規模なWebサイトにぴったり。PHP製のメールフォーム·TransmitMail MOONGIFT

    TransmitMailは日製の汎用型メールフォールソフトウェアです。 Webサイトにメールフォームの設置というのはよくあることです。そんな時に使える日語対応のメールフォームソフトウェアがTransmitMailです。 デモです。多数の入力項目、入力チェックに対応しています。 必須チェックのエラーです。画面上と項目の横と二つ表示されます。 メールアドレスフォーマットのチェックもできます。 半角英数などの文字種チェックもあります。 入力の後、確認画面が表示されます。 完了ページです。 確認メールも送信されて、入力内容の確認ができます。 TransmitMailはPHP5.2以上で動作します。また、マークアップエンジニアが開発したとのことで、Dreamweaverやマークアップエンジニアにとって優しい作りになっています。セッションによって重複送信を防ぐ仕組みがあります。静的サイトにメールフ

    小規模なWebサイトにぴったり。PHP製のメールフォーム·TransmitMail MOONGIFT
    ko-ya-ma
    ko-ya-ma 2012/03/19
    Dreamweaverやマークアップエンジニアにとって優しい作りになっています
  • Webプログラマ必見。HTML5のセキュリティチートシート·HTML5 Security Cheatsheet MOONGIFT

    HTML5 Security CheatsheetはHTML5のセキュリティに関するチートシートです。問題点と対象Webブラウザ、対処法が一覧になっています。 HTML5 Security CheatsheetはHTML5におけるセキュリティホールになりえる問題点をコードを通じて広めていこうというプロジェクトです。Webプログラマ必見と言えるでしょう。 トップページです。様々な項目が並んでいます。 左側は各セキュリティチェックすべき項目で、対象になるWebブラウザとそのバージョンが並んでいます。問題点の提示とともに、その回避策についても書かれていますのでとても参考になります。 まだ日語化されていない部分もあります。 ほぼ全てのWebブラウザが対象になる部分もあるようです。 項目は非常に多いですが、セキュリティを重視するためにもチェックしておくべきです。 HTML5ではありますがIE6など

  • 開発時に。送信内容が確認できるダミーのSMTPサーバ·smtp4dev MOONGIFT

    smtp4devはWindowsローカル上に立てるダミーのSMTPサーバです。 システム開発においてメール送信を行う時はよくあります。SMTPサーバを立てたとして、間違って送信してしまうと大変な事態につながるかも知れません。そこで使ってみたいのがローカルで使えるダミーのSMTPサーバ、smtp4devです。 起動しました。まずはセキュリティ警告が出ます。 メイン画面です。この時点でポートは開いています。 オプションです。UIに関する設定です。 サーバ設定です。ポート番号はデフォルトで25です。 アップデートチェッカーもあります。 こんな感じで常駐します。 こんな感じでPHPからメールを送ってみます。 送信しました。すぐに反映されます。 さらに日語件名のメールを送ってみました。文字化けせずに送信されています。 メーラーでメールの内容を確認できます。 さらに詳細を確認できます。 メッセージソ

    開発時に。送信内容が確認できるダミーのSMTPサーバ·smtp4dev MOONGIFT
  • 多彩な表現をご覧あれ。JavaScriptによるデータビジュアル化ライブラリ·JavaScript InfoVis Toolkit(JIT) MOONGIFT

    JITJavaScriptを使ったデータビジュアル化ライブラリです。 JavaScriptを使ってWeb上でデータを多彩にビジュアル化するライブラリがJavaScript InfoVis Toolkit(JIT)です。その多彩な表現をご覧ください。 積み上げのエリアグラフです。表示の際にはアニメーションが実行されます。 実際のコードです。 棒の積み上げグラフです。 横向き、2Dのグラフです。 関連グラフです。マウスで動かせます。 マウスオーバーで説明が表示されます。 こんなグラフもあります。 星形。格好いいです。 カスタマイズにも多様に対応しています。 容量の表示などによく利用されるツリーマップです。 こちらもパターンが色々用意されています。 グラフを組み合わせたパターンです。 こんな表現も可能です。 派生していくアニメーションが格好いいです。 円グラフです。アニメーションやマウス操作に

    ko-ya-ma
    ko-ya-ma 2011/12/22
    JavaScriptを使ってWeb上でデータを多彩にビジュアル化するライブラリ。カッコイイ!