タグ

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

  • Ory - 段組まで変えられる高いカスタマイズ性を持ったWYSIWYGエディタ MOONGIFT

    一昔前のCMSというとユーザの見る画面と管理画面がはっきりと分かれていました。セキュリティ上はやりやすいかも知れませんが、管理者としてはユーザがどう見えているかを逐一確認する必要があって不便でした。 最近ではユーザの見ている画面上でそのまま編集できるものが増えています。その最新作と言えるのがOryです。 Oryの使い方 こちらがエディタの画面。右側にアイコンが並んでいます。 編集中です。文字を選ぶとフローティングで装飾メニューが出ます。 日語も入力できます。 さらにコンテンツをドラッグして配置変更も。 しかも段組まで変えられます! 三段だってできます。 新しいコンテンツを追加する場合は右側から。 Oryはコンテンツのカスタマイズできる幅が大きく、かつ編集内容がそのままユーザの見ている画面になるので非常に分かりやすく編集できます。操作性も直感的なので使い勝手は良いでしょう。 OryはJav

    Ory - 段組まで変えられる高いカスタマイズ性を持ったWYSIWYGエディタ MOONGIFT
  • excel2js - ExcelシートをWeb化

    MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました 日にはExcel職人と呼ばれる人たちがたくさんいます。彼らにかかればどんなドキュメントであってもExcelで作られ、多くの業務システムがExcel VBAを駆使して作られます。 今回はその最高峰とも言える、Excelで作るWebアプリケーションを紹介します。それがexcel2jsです。 excel2jsの使い方 excel2jsはExcelで作られたシートをHTML/JavaScriptにしてくれるソフトウェアです。下の画像は元ファイルになるExcelファイルです。式も埋め込まれています。 それがこんな感じにWebブラウザ上で動くようになります。 Excelで動くものになりますので、サーバサイドと連携するなどというのは難しいでしょう。しかしちょっとした計算処理を行うものであればe

    excel2js - ExcelシートをWeb化
  • highlight.js - 100種類の以上の言語に対応したコードハイライター MOONGIFT

    ブログやWebサイトでプログラミングコードを載せる際に必要になるのがハイライト処理です。単純にコードをそのまま載せても可読性はとても低いです。ハイライトライブラリを使って、見やすくすべきです。 個人的にはGoogleが作っているgoogle-code-prettifyをよく使っていたのですが、highlight.jsも使いやすそうです。 highlight.jsの使い方 左側のコードが表示例。テーマも用意されています。 Apacheの設定ファイルも対応しています。 CoffeeScriptにももちろん対応。 Diff。 HTTPヘッダー、iniファイルにも使えます。 Apacheがあればnginxももちろんあります。 highlight.jsは112言語、49のテーマが用意されています。HTML/JavaScript/スタイルシートのようにマルチ言語に対応したハイライトが行えます。言語も自

    highlight.js - 100種類の以上の言語に対応したコードハイライター MOONGIFT
  • Intense Images·クリックで写真拡大、マウスで動かすビューワー MOONGIFT

    スマートフォンが流行るのにともなって写真コンテンツが爆発的に増えています。そして次に求められるのは何かと言えば、写真のビューワーに他なりません。たくさんのコンテンツをいかに見せるかが大事になってきます。 今回はその一つ、Intense Imageを紹介します。写真をフルスクリーンで拡大してみせる、そんなビューワーになります。 Intense Imageの使い方 こちらがデモです。写真が3つ並んでいます。 クリックするとブラウザウィンドウ全体に写真が広がります。 マウスを動かすと写真を動かせるようになっています。 こちらの写真は上下に動かせます。 Intense Imagesは拡大表示するだけでなく、マウスで上下または左右に視点を動かせるのがポイントです。拡大した時には文字が表示されていますが、これは固定されています。拡大した写真はクリックで元の状態に戻ります。 Intense Images

    Intense Images·クリックで写真拡大、マウスで動かすビューワー MOONGIFT
  • PHP専用のデバッグツールバー·DebugBar MOONGIFT

    DebugBarはPHP製のオープンソース・ソフトウェア(MIT License)です。 PHPのデバッグと言えばvar_dumpが最も良く知られていると思いますが、画面上にメッセージが出てデザインが狂いますし、連想配列などは見づらくなります。そこでもっとスマートにデバッグできるDebugBarを紹介します。 画面下に出ているバーがDebugBarです。 クリックすると内容が表示されます。これはメッセージです。 配列を見やすく整形もできます。 リクエストの内容も確認できます。 ある処理における経過時間をグラフ化しています。 エラーがあればその捕捉もできます。 最後に実行されたSQLについてです。こちらもエラーがあればその内容が表示されます。 こちらはデモのコード。 DebugBarの使い方は簡単で、AddMessageで出力したいメッセージを追加していきます。そして最後にHTMLに専用のス

    PHP専用のデバッグツールバー·DebugBar MOONGIFT
  • JavaScriptによる自動振仮名入力·autokana MOONGIFT

    autokanaはjQuery/JavaScript製のオープンソース・ソフトウェア(MIT License)です。 フォーム入力というのはユーザにとって相当なストレスになります。ちょっとでも面倒だと思うと諦めてしまいます。そこでなるべくユーザのストレスを減らして入力できるライブラリを用意すべきです。今回はフリガナ入力補助ライブラリautokanaを紹介します。 “な”と入力すると、ふりがなの欄に“ナ”と自動入力されます。 続けて入力して変換。ナカツガワときちんと入力されました。 例えばミスしてバックスペースを押せば、フリガナもその部分が削除されます。 振仮名ではひらがな、片仮名の両方が利用できます。KeyDownのイベントを使っていますので、コピー&ペーストされた文字列に対しては動作しません。また、現時点ではローマ字には非対応とのことです。 MOONGIFTはこう見る 入力フォームは総じ

    JavaScriptによる自動振仮名入力·autokana MOONGIFT
  • Web SQL Databaseと一緒に使いたいライブラリ·WebSQL.js MOONGIFT

    WebSQL.jsはWeb SQL Databaseを使いやすくするJavaScriptライブラリです。 惜しくもHTML5の仕様からはもれていますが、新しいWebブラウザの機能にWeb SQL Databaseがあります。そんなWeb SQL Databaseをより使いやすくしてくれるライブラリがWebSQL.jsです。 デモです。データを追加したり、削除したりできます。 さらに追加しました。再読み込みしても再現します。 WebSQL.jsはデータベースの作成、テーブルの作成、データのCRUD操作、テーブルの削除が行えます。さらにトランザクションやSQLの実行も可能です。各メソッドはチェーンでつないで実行させることも可能になっています。 WebSQL.jsはJavaScript製、MIT Licenseのオープンソース・ソフトウェアです。 MOONGIFTはこう見る Web SQL Da

    Web SQL Databaseと一緒に使いたいライブラリ·WebSQL.js MOONGIFT
  • これは凄い。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のコードがそのまま実行できます(もちろ

  • オープンソースで作れるランディングページ·Desant MOONGIFT

    Desantはランディングページの申込者を管理するシステムです。 Webサイト、iOSアプリ、キャンペーン…何らかのサービスを開始しようと思ったら欲しいのがサービスの紹介ページです。まだリリースされていない場合にはそこでユーザに先行登録を促す事もできます。その結果を集約するサービスがDesantです。 ログイン画面です。 ログインしました。登録したユーザが一覧表示されています。 こちらはリファラーです。 登録してくれたユーザのIPアドレスから参照できる場所が地図上にマッピングされています。 都市ごとにすることもできます。 日からの登録もあるようです。 Desantは言わばランディングページを管理するソフトウェアになります。結果としてはメールアドレスを登録して完了となります。メールマガジンの登録を促したり、メールを使ったアップデート通知に使えるでしょう。 DesantはRuby製、GNU

  • JavaScript製の高度なアニメーションライブラリ·tween.js MOONGIFT

    tween.jsはActionScriptのTweenクラスを真似たJavaScriptアニメーションライブラリです。 かつてオンラインでアニメーションを表現しようと思ったならばFlashかGIFアニメーションを使うのが一般的でした。しかし今後JavaScriptの採用が増えていく中では別な作法を学ばなければなりません。そこで今回はJavaScript製のアニメーションライブラリtween.jsを紹介します。 デモ1。四角のエレメントが左右に動き回ります。 1,000のバーが左右に動きます。 4096個のセルが徐々に色を変化させます。 グラフです。様々な描き方に対応しています。 動画の再生に合わせて右に動いていくデモです。同期されているのがポイントです。 デモ動画です。当はもっと速く動きます。 tween.jsはActionScriptのTweenクラスを模して作られているとの事です。

  • アプリ開発者必見。リアルタイムアプリ利用解析·Countly MOONGIFT

    Countlyはモバイルアプリの利用解析ソフトウェアです。 Webサイトにはアクセス解析ソフトウェアを導入するのが当たり前になっています。同様にモバイルアプリについてもその利用について解析が必要な段階にきているのではないでしょうか。今回紹介するCountlyはまさにそのためのソフトウェア、モバイルアプリ解析サービスになります。 ログイン画面です。 ダッシュボードです。 個々のウィジェットにマウスオーバーなどが仕掛けてあってインタラクティブなっています。 グラフをドラッグして範囲指定すれば表示範囲が絞り込めます。 イベント関係のログです。 ユーザごとのログです。 ユーザロイヤリティです。 キャリア分析です。 アプリのマネジメント画面です。 Countlyはリアルタイム解析、MongoDBを使った高速さ、スタイリッシュな画面、高い拡張性、イベント駆動対応、セッションやキャリアなど様々な情報との

  • 多彩なフレームワークに対応したPHP向け認証ライブラリ·Opauth MOONGIFT

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

  • Pythonを愛する人のためのPython製プログラミングエディタ·UliPad MOONGIFT

    UliPadPythonで作られたプログラミングエディターです。実に多くの機能が搭載されています。 Pythonで作られたPythonプログラマーのためのプログラミングエディタがUliPadです。 インストールします。ウィザードに沿って進めるだけです。 完了しました。起動します。 起動しました。タブで複数ファイルを開けます。 Pythonファイルを開きました。ハイライトに対応し、メソッドごとに折りたたみできます。 折り畳むと可読性があがります。 TODOなどと書いておくとコメントが出せます。 シェル機能があります。 ちょっとしたメモを残しておけます。 スクリプトで自動処理もできます。ショートカットもつけられます。 クラスブラウザもあります。選択してジャンプできます。 入力補完、コードスにペットもあります。 FTPを登録してリモートファイルを編集できます。 Pythonの他、多数の言語ハイ

  • HP製のJavaScriptフレームワーク·Enyo MOONGIFT

    EnyoはHPがリリースしたWebアプリケーションフレームワークです。モバイル、デスクトップ双方で動作します。 EnyoはHPがwebOSのオープンソース化ロードマップとともに発表されたHTML5のWebアプリケーションフレームワークになります。特にスマートフォンに適したオブジェクト指向のフレームワークになります。 サンプルです。左側がコード、右側がその実行結果です。 ボタンを押すとテキストが追加されます。 同様に色が変わるサンプルです。 消したり表示したりします。 ボタンを追加していくサンプルです。 Flickr画像検索&ビューワーのデモです。 こちらはYouTubeの検索&ビューワーです。 ボールが落下するデモです。 WebKitに最適化されたモックです。 頭文字ごとにグループ化されたリストです。 ボタンです。 日付ピッカーです。 サンプルゲームです。同じ動物を縦横に3つ並べると消えま

  • 無茶しやがる…JavaScriptだけでZipファイルを生成、ダウンロード·JSZip MOONGIFT

    JSZipはWebブラウザ上、クライアントサイドだけでJavaScriptを使ってZipファイルを生成するソフトウェアです。 JavaScriptでできることがどんどん増えています。そんな中、注目したいのがJSZipです。なんとJavaScriptだけでZipファイルを作ってしまうというとんでもないソフトウェアです。 デモページです。コードを見て分かる通り、テキストファイルと画像をZip圧縮しています。 実際ダウンロードされたZipファイルを解凍すると確かにフォルダやファイルが入っています。テキストの内容を変えればダウンロードされたファイルの中身も変わっていました。 JSZipが面白いのは動的にZipファイルを作成できることではないでしょうか。ユーザにコンテンツをダウンロードさせたいという時にその場の内容をそのまま圧縮して送れるようになります。アイディア次第で色々な使い方ができそうなソフト

  • 手軽に使える!解凍するだけでnginx+PHPの開発環境を準備·wnp MOONGIFT

    wnpはnginx + PHPの環境を解凍するだけで使えるWindows用開発環境です。 最近のWebシステムではApacheではなくnginxを採用するケースも増えています。もし番環境がnginx + PHPであったら開発環境としてセットアップしたいのがwnpです。 解凍直後のファイル構成です。wnp.exeを実行します。 タスクトレイに常駐します。PHPnginxを別々にリスタートできます。 localhostへアクセスした時の表示です。 PHPの情報です。色々な拡張が入った状態です。FastCGIで、バージョンは5.2.12となっています。 Webルートのファイル構成です。ここにPHPファイルを作成すれば動作します。 MOONGIFTはこう見る 数年前であればLinux + Apache + PHP + MySQLという組み合わせはLAMPスタックと呼ばれ、Webアプリケーション

  • 企業で使えそう!PHP製、WebベースのGitリポジトリ管理·Git Manager MOONGIFT

    Git ManagerはPHPで作られたGitリポジトリ管理システムです。ユーザ単位のアクセス制限に対応しています。 Gitのサーバを立てようと思うとなかなか面倒なイメージがありますが、Web上で管理できるととても手軽になりそうです。PHP製のGit Managerを紹介します。 ログインした後の画面です。ログインはhtpasswdまたはLDAPを利用できます。 リポジトリ追加のダイアログです。 リポジトリを追加しました。 ユーザごとのアクセス権限を設定できます。 グループ単位の設定も可能です。 リポジトリを作るとこのようにGitのファイル構成が作成されます。 認証の仕組みでhtpasswdを使ったり、LDAPが使える点がとても便利ではないでしょうか。またWebDAVを使うことでWebベースでリポジトリを触れるのも便利です。筆者環境ではcloneできなかったのですが、HTTPベースでpus

  • 試そう!PHPコードを解析して修正点を指摘·phpca MOONGIFT

    phpcaはPHPを静的に解析して小さなミスやコードの修正点を指摘してくれるソフトウェアです。 PHPを書く際にどう書けば小さなミスによるバグの発生を防げるでしょうか。一定の基準に沿って記述することで整然としたコードを実現し、可読性をあげることでバグの混入を防ぐことができます。そこで使いたいのがphpcaです。静的にPHPファイル(ディレクトリ単位も可)を解析し、修正すべき場所を指摘してくれます。 解析処理を実行しています。PHPのパスと、解析したいファイルやディレクトリ名を指定して実行します。解析処理中は随時メッセージが出力されます。 メッセージ例です。タブの利用や行の使い方に関してなどメッセージが表示されます。 ?>がない場合もメッセージが出ます。これはPHPの書き方としては逆かも知れません(確かない方が良いという話なので)。 PHPを書く上でありがちなミスやバグにつながりそうな指摘を

  • これでVisioを使ったネットワーク図作成からおさらば?運用まで管理できる·Prime MOONGIFT

    Primeはハードウェア構成やソフトウェアも含めたネットワーク図を作成するソフトウェア。 PrimeはJava製のオープンソース・ソフトウェア。システム開発を行う際にデスクトップやルータ、サーバ等の配置を図に起こす時は多い。そういう時にドローソフトウェアとしてMS Visioを使うケースが多いのではないだろうか。他にも類似ソフトウェアはあるが、アイコンがどうも好きではなく結局Visioを使っていた。 描画中 しかしネットワーク図を描くためだけにMS Visioを購入するのではあまりにも勿体ない。デザインに優れたソフトウェアがあればそれを使えるはずだ。そこでネットワーク図を描く際にお勧めしたいのがPrimeだ。 Primeはデスクトップやサーバ、ネットワーク機器を配置してそれらを線で結んでネットワーク図を作成するソフトウェアだ。端末間の接続法をRJ45またはUSBから選べるなど芸が細かい。さ

  • Android/iOSの両プラットフォームに対応した軽量2Dゲームフレームワーク·emo framework MOONGIFT

    emo frameworkはAndroid/iOSの両方に対応した2Dゲームフレームワーク。 emo frameworkはAndroid/iOS用のオープンソース・ソフトウェア。一つのゲームを作るまでには様々な技術を知らなければならない。その最も有名なものとしては物理エンジンだろう。もちろん使わないゲームもできるが、他にも様々なゲーム特有の技術が存在する。 機能一覧 それらの習得は大変だ。だがスマートフォン向けにアプリを作るならばゲームが最もお勧めだ。しかも一から開発することなく、emo frameworkを使えば大幅に工数が減らせることだろう。 emo frameworkはAndroidにはC/C++、加えてiOSにはObjective-Cで2Dゲームフレームワークを提供する。物が落下した時に他に影響を与える物理エンジン、テキストが分かれる仕組み、マップをタイル上に並べて表示し、スクロー