Scooter - Dropbox社製のデザインフレームワーク
企業でWebサービスを作る際に、決まったデザインフレームワークがあると全体的に統一感が出て、かつデザインに対する悩みが少なくなるのが利点です。その結果、開発がスムーズに進むことでしょう。 今回はその一つ、Scooterを紹介します。作成したのはDropbox社になります。 Scooterの使い方 ScooterはSCSSで作られているので変数やMixinなどが定義されています。実際のデザインについて紹介します。まずはグリッド。 写真と説明。 リスト。 右寄せ。 アラート。 ボタン。 吹き出し付き。 フローティングカード。 フォーム。 アイコン。 こんな感じで文字だけのアイコンも表現できます。 モーダル。 ツールチップ。 ラベル。アイコン付きなのが良い感じ。 塗りつぶしたラベル。 タブ。 カレンダー。 Scooterはデザインはもちろんのこと、カラーリングにもDropboxっぽさが溢れていま
Photon - ElectronアプリをMac OSX風アプリに仕上げるデザインフレームワーク MOONGIFT
Electronを使えばHTML5/JavaScript/CSSを使ってデスクトップアプリが開発できます。それは知っていても、UIがなんとなくWebっぽい感じを残していると、それはやはりWebアプリケーションをラッピングしただけのものだと感じてしまいます。 そこで使ってみて欲しいのがPhotonです。Mac OSX用のツールであれば、まさにMac OSXっぽいUIに仕上げられるでしょう。 Photonの使い方 コンポーネントは多数用意されています。まずはバー。 アクション付きのバー。 タブ付きのバー。 ナビゲーション。 リスト。 ボタン。 フォーム。 テーブル。 アイコン。 PhotonはまさにMac OSXアプリで必要とされるようなUIコンポーネントを多数用意しており、デスクトップのネイティブUIと殆ど変わらない仕上がりにしてくれるのではないでしょうか。同様にWindowsやLinux版
OpenSlideshare - PHP製のSlideshare/SpeakDeckクローン MOONGIFT
セミナーや勉強会で登壇した際にはスライドをSlideshareにアップロードしています。人によってはSpeakDeckにアップロードしている人もいるでしょう。ポートフォリオとしても役立ちますし、コンテンツマーケティングの一つにも使われています。 そんなスライド共有サイトを自分でも持ちたいと思ったらOpenSlideshareを使ってみてはいかがでしょう。他サービスにアップロードしない分、ブランディングを構築するのに良いかもしれません。 OpenSlideshareの使い方 OpenSlideshareのトップページです。アップロードしたスライドが一覧表示されます。 スライド詳細。スライドの切り替え、ダウンロードなどができます。 埋め込み用コードを取得することができます。 新しくユーザ登録します。 スライドのアップロードができるようになります。 OpenSlideshareが対応しているのは
MegaJS - ロックマンをJavaScriptで再現
ロックマン（英語圏ではMegaman）は今なお色褪せることのない人気のゲームシリーズとなっています。今の高画質、高機能なロックマンも良いですが、やはり初代ファミコン時代のロックマンこそ至高、と思う方も多いのではないでしょうか。 そんな方にお勧めしたいのがMegaJS、HTML5/JavaScriptで再現されたロックマンです。ちゃんと遊べるレベルに仕上がっているのがすごいです。 MegaJSの使い方 操作はASWDで移動、O/Pキーでジャンプとビームです。 今のところ遊べるステージはFlash Manだけのようです。 遊んでいるところ。 MegaJSは時々ステージがなくなってハマったりする可能性がありますので注意してください。しかしJavaScriptでもファミコン時代のアクションゲームが十分に遊べるようになってきているというのはすごいですね。なお著作権上の問題はあるのでご注意ください。
Mycli - ハイライト/自動補完対応のMySQLクライアント MOONGIFT
MySQLクライアントといえば、開発時にはphpMyAdminが使えますが、開発に慣れてくるとCUIのクライアントを使うことが多いかと思います。しかし画面はシンプルですし、機能も多くないのが難点です。 そこで使ってみたいのがMycliです。Python製のMySQLクライアントで、シンタックスハイライトやオートコンプリート機能があります。 Mycliの使い方 MycliはMac OSXであればHomebrewを使ってインストールができます。後はmycliコマンドでMySQLサーバに接続します。こんな感じに自動補完候補が表示されます。 シンタックスハイライトも良い感じです。 色がついている分、使いやすいでしょう。 MycliはMySQLの他、MariaDBやPerconaにも利用できます。普段使っているMySQLクライアントがちょっと寂しいと思ったらMycliを使ってみてください。 Mycl
pdfmake - クライアント/サーバサイド両方に対応したPDFジェネレータ MOONGIFT
Webシステムを作っていて、時々PDFの帳票が必要になることがあります。サーバサイドでPDF出力するツールは幾つかありますが、それらのセットアップは面倒ですし、サーバの負荷も気になるでしょう。 そこで使ってみたいのがpdfmakeです。サーバ、クライアントサイド両方に対応したPDF作成ツールです。 pdfmakeの使い方 pdfmakeではJSONを使ってPDFの形式を定義します。 スタイル設定も可能です。 より複雑なスタイルを使った例です。 段組のサンプル。 テーブルも使えます。 リスト。ネストもできます。 より本格的な形式ですね。 画像も使えます。 pdfmakeの良いところはJavaScriptによる生成なのでサーバサイドの負荷なく、かつ編集した内容をその場で反映して生成し直すこともできるということです。さらにnodeで動かすこともできるのでクライアントサイドのコードを使ってそのまま
markdown-pdf - MarkdownをPDFに変換
MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました Markdownのシェアが増えるのに従って、とりあえずメモはMarkdownでしておくという人も多いでしょう。しかし業務で提出する資料や公開資料などはHTMLではなく、PDFベースでの提出を求められることが多いです。 Webブラウザに出して、それをPDFに変換しても良いですが、それならばmarkdown-pdfを使ってみましょう。markdown-pdfはその名の通り、MarkdownファイルをPDFに変換するソフトウェアです。 markdown-pdfの使い方 markdown-pdfはnpmを使ってインストールできます。 npm install -g markdown-pdf 使い方は以下の通りです。 $ markdown-pdf Usage: markdown-pdf [op
Alasql.js - オンメモリで動作するJavaScriptデータベース MOONGIFT
JavaScriptを活用したWebアプリケーションを開発している際に、一時的に保存したいデータをどのように扱うかは大きな問題です。何となく変数や配列、ハッシュに保存してしまいがちですが、そのデータの取り出しや更新が面倒だったりします。 そこで使ってみたいのがAlasql.jsです。JavaScriptだけで作られたクライアントサイド向けのSQLデータベースになります。 Alasql.jsの使い方 使い方の例。データを配列で放り込んで、SQLで取り出せます。 デーブルの作成を含めてSQLが書けます。 データはlocalStrageに保存することもできるので、再読込時に復元も可能です。 Alasql.jsはHTML5仕様の中で検討されていたWeb SQLとは異なる実装で、オンメモリで動きます。高速で動作し、かつデータはlocalStrageに保存しておくこともできるので容量は小さいながらも永
erd – ER図を作成するコマンドラインツール
MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました データベースのダイアグラム（ER図）を作成する Haskell 製のコマンドラインツールです。テキストエディタで定義ファイルを作成し、コマンドを実行することでダイアグラムとなる画像を作成します。データベースを設計する際、テーブルとその関連付けについて全体像を手早く作成したい、そんな時に便利なソフトウェアです。 erd の主な特徴 1) データベースの全体像の設計に集中できる ダイアグラムにあるテーブル同士の配置など気にすることなく、とにかく全体的な設計を行いたい時に便利です。GUIツールも便利ですが、使い慣れたテキストエディタで、キーボードから手を離すことなく、思うままに設計を進めることができます。 2) er ファイルが必要 er ファイルと呼ぶ定義ファイルを作成します。このer
PHP Fine Diff - 利用場面が多そうなPHP差分表示ライブラリ
MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました あなたが開発者であるならば差分表示にはいつもお世話になっているのではないでしょうか。かく言う筆者も毎日のように使っています。しかしそれの主な利用はプログラミングやHTMLコーディングではないかと思います。 差分表示をもっと色々な場面で使ってみたいと思うならば、自作のWebアプリケーションに組み込んでみると面白そうです。そこで使ってみたいのがPHP Fine Diffです。 PHP Fine Diffの使い方 使い方の例としては次のようなコードになるようです。テキストを二つ与えるだけで使えます。 include 'finediff.php'; $opcodes = FineDiff::getDiffOpcodes($from_text, $to_text); 比較は文字、行、単語単位
Notify.js·HTML5のデスクトップ通知を手軽に実装できるJavaScriptライブラリ MOONGIFT
HTML5の新しい機能の一つにデスクトップ通知があります。ブラウザ上だけでなく、デスクトップに通知が出せるのでメッセージやチャット、お知らせを配信するのにぴったりです。とは言え実装方法が面倒そうで手を出していないという人も多いでしょう。 そこで使ってみたいのがNotify.jsです。各ブラウザのデスクトップ通知をラッピングし、手軽に扱えるようにしたライブラリです。 Notify.jsの使い方 Notify.jsを使っている場合、以下のようなコードを書きます。 var myNotification = new Notify('Yo dawg!', { body: 'This is an awesome notification', notifyShow: onNotifyShow }); function onNotifyShow() { console.log('notification
Gitonomy – PHP製のGit管理サーバ
おお、これは企業で使えそうですよ！ 企業によっては外部にソースコードを預けられないため、自社でGitサーバを構えているところも多いでしょう。しかしそうなると管理画面が欲しくなります。GitHubの管理画面は優秀で、ああいったWebブラウザ上でリポジトリの情報を見たいと思うはずです。 そこで使ってみて欲しいのがGitonomyです。デザインの格好いい、Gitリポジトリマネージャです。 Gitonomyの使い方 GitonomyはPHP + Symfonyの組み合わせで作られていて、Webブラウザ上でGitリポジトリの操作が一通りできるようになっています。ユーザはプロジェクト単位にグループに入り、そこで権限管理される仕組みです。 ソーシャル機能はありませんが、企業ユースであれば十分ではないでしょうか。社内でGitサーバを立てている場合はぜひ導入を検討してみてください。 GitonomyはPHP
Iconion - 素敵なアイコン画像が簡単に作れちゃう！ MOONGIFT
これは素敵すぎる！ アイコン画像の作成は大変です。小さな画像ながら、それを見て内容が理解できないとアイコンとしての意味がありません。最近ではIconfinderのようなサイトもできていますが、色味やサイズがほんの少し合わないと言ったことも多いはずです。 そこで使ってみて欲しいのがIconionです。アイコンのピックアップと設定変更だけで簡単に素敵なアイコン集ができてしまいますよ！ Iconionの使い方 Windows版とMac OSX版がありますのでお好きな方をダウンロードし、起動しましょう。 メイン画面です。これだけでほぼ使い方が分かってしまいますよね。左側にアイコンが並んでいますので好きなものを選択しましょう。 アイコンを選択すると中央のプレビューが変わります。さらにその下にアイコンが登録されます。 色や角丸のサイズなどを自由に変更できます。 さらにスタイルを変更するとまとめて設定が
Bootstrap Admin Theme - Bootstrap3に対応した管理画面テンプレート
これは知っておいて損はないでしょう！ Bootstrapの便利な使いどころとして管理画面があります。管理画面は限られた関係者しか使いませんのでBootstrap臭がしても気にすることはありません。それなりの表示がすぐに実現できるのは使い勝手を向上します。 しかしそんな適当な範囲を超えて実用性のある管理画面を実現できるBootstrapテンプレートがBootstrap Admin Themeです。Bootstarp 3系に対応していますので最新のウィジェットもばりばり使えるでしょう。 Bootstrap Admin Themeの主なページとしては、 ログイン ダッシュボード カレンダー グラフ ボタン/アイコン WYSIWYGエディタ フォーム/ウィザード テーブル その他ウィジェット が用意されています。これだけあれば後は組み合わせるだけで（Bootstrap本来の機能も使いつつ）リッチな
Bootstrapベースの管理画面用テンプレート·Charisma MOONGIFT
CharismaはHTML5/JavaScript製のオープンソース・ソフトウェア（Apache Licnese 2.0）です。 Webシステム開発において意外と不遇なのが管理画面です。内部の人が使うものなので適当に作られるケースが多くなります。そこで使ってみたいのがCharismaです。リッチな管理画面をBoostrapをベースに作り上げる事ができます。 ウィジェットがついた、リッチな管理画面です。ここまで恵まれているケースは早々ないでしょう。 ドラッグ&ドロップによる配置変更もサポート。 折り畳んで隠す事もできます。 グリッドは細かくサポートされています。 カレンダー。システム内部のデータをマッピングすると見通しが良くなりそうです。 メンバー一覧。検索やラベルもあって便利そうです。 ギャラリー。サムネイル写真をきれいに並べています。 タイポグラフィ。様々なタグをサポートしているので奇麗
まるでネイティブのようなUIを実現できる高機能JavaScript UIライブラリ·w2ui MOONGIFT
w2uiはデスクトップ、スマートフォン、タブレットに対応したJavaScript UIライブラリです。 新しいJavaScript UIライブラリの紹介です。名前はw2ui、多数のウィジェットを搭載したUIライブラリとなっています。 レイアウト。 グリッド。 詳細検索対応。 ツールバー。 サイドバー。階層表示に対応しています。 タブ。 フォーム。 ポップアップ。 ツールチップ。 その他ユーティリティ。 w2uiのサイズは37KB（ミニファイ&Gzip）で、これはExtJSの1/12、Kendo UIの1/6となっています。また、jQueryベースという特徴、全てのウィジェットをまとめて提供、IE9、Firefox7、Google Chrome、Safari5に対応となっています。デスクトップはもちろん、タブレットやスマートフォンにも対応しています。 w2uiはJavaScript製、MIT
あなたのWebアプリケーションは安全か。Google製のセキュリティチェッカー·Skipfish MOONGIFT
SkipfishはSQLインジェクションをはじめWeb向けの脆弱性を発見するソフトウェア。 SkipfishはGoogle製のオープンソース・ソフトウェア。2011年になってセキュリティインシデント関係の話題が飛び交っている。特に大きいのはソニーだろう。あそこまでの規模は相当珍しいが、何も対岸の火事という訳ではない。 オプション セキュリティホールを狙うのは人間に限らない。日々クローラーがWebサイトにアクセスしてセキュリティホールを狙っているのだ。狙われる前にSkipfishを使って自主的にチェックしてみよう。 SkipfishはGoogleが開発したセキュリティチェックソフトウェアだ。ターミナルで動作するソフトウェアで、指定したURLに対してSQLインジェクションやXSSなどWebアプリケーションが狙われやすい脆弱性をついてくる。結果はHTMLベースのレポートとして出力される。 結果は
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
