AdminLTE·ここまで多ければ何でもできそう。多機能なBootstrapベースの管理画面テンプレート MOONGIFT
これで十分でしょ！ Bootstrapで作る管理画面は相当増えてきているようです。確かに一般ユーザ向けに提供するとBootstrap臭が出てしまいますが、管理画面であれば問題はないですよね。 ということで今回は新しいBootstrap製の管理画面テンプレートAdminLTEを紹介します。高度なウィジェットが数多く提供されていますので使い勝手良さそうですよ。 AdminLTEの画面 今回もスクリーンショット多めで紹介します。 ダッシュボード。この時点でかなりリッチ。 ボックス。これだけ多彩なパターンがあると言うのも凄いですね。 左端にはちょっとした設定を表示させています。 背景色を変えるだけでも随分印象が違います。 グラフ。 こちらもグラフ。 外部ライブラリもそつなく使いこなしています。 スパークラインも！ アラート。ちょっと飛び出しているのがいい感じです。 アイコン。 ボタン。フラット系で
Stylo - 体験必須！Webアプリケーションデザインツール MOONGIFT
デモがありますのでぜひ実際触ってみるべき！ Webのオーサリングツールと言えば長らくDreamweaverが中心でした。それ以外になると一気に手打ちになってしまったりします。最近ではCSSフレームワークを用いることも多いので、それでもさして不便ではありません。 とは言えWebアプリケーションのような複雑なUIを考えた場合、やはりオーサリングツールが欲しいところです。さらに言えばDreamweaverよりも柔軟にデザインができるものが。そんなツールを願っている方に見て欲しいのがStyloです。 これが画面です。Webベースだと思えないほど充実した機能を備えています。 大きさを変えたり、文字を入力したり。 オブジェクトをドラッグした時に隣接するオブジェクトの上辺や中心にスナップする補助線が出てくれるのが格好いいです。 色の変更はピッカーを使って。透明度まで決められるのがいい感じですね。 半透明
Smooth Online Signatures – 滑らかな線に変換するサインライブラリ
MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました この書き心地は良いぞ！ Apple Storeでクレジットカードで購入した人は知っていると思いますが、iPhoneに指先を使ってサインを行うと思います。慣れない書き心地で線が歪んだり、変な文字になってしまってがっかりするのではないでしょうか（筆者はいつもそうですが）。 しかしAppleもSmooth Online Signaturesを導入すればそんなことがなくなるので良いのではないかと思います。というかぜひこの技術を取り入れて欲しい。 Smooth Online Signaturesはアルゴリズムに従って線を滑らかに変換しています。その結果、みすぼらしいカクカクした線ではなく滑らかなサインが可能になっています。 これだけスムーズに書けるとマウスやスマートフォンでの署名がしやすくな
Firepoker·アジャイル開発に。Webブラウザでプランニングポーカー MOONGIFT
Webベースでプランニングポーカーとなると、本当に顔色も分からない状態で楽しめますね。 アジャイル開発の一つにプランニングポーカーというのがあります。簡単にいえば複数人で同じ機能について見積もることで見積もり精度を上げていこうという考えです。 そしてそのプランニングポーカーをWeb上で実現するソフトウェアがFirepokerになります。 では実際に試してみましょう。 トップページです。Start playingを押します。 最初にゲームを作成します。これは題名を決めて、ユーザストーリーは一行一つずつ作成できます。同時にプランニングポーカーで使うカードの単位も選びます。 ゲーム作成画面 登録したらゲームの開始です。各ユーザストーリーについて見積もりを行っていきます。ここのURLをチームメンバーに伝えましょう。 別なブラウザから。同じように自分の見積もりを入力します。 人の見積もりは最初は見ら
IFTTTで使っているiOS用キーフレームアニメーションライブラリ·Jazz Hands MOONGIFT
Jazz HandsはiOS用、MIT Licenseのオープンソース・ソフトウェアです。 iOSアプリの中でシンプルなアニメーションを実現したいと思ったらチェックして欲しいのがJazz Handsです。IFTTTで実際に使われているキーフレームベースのアニメーションライブラリです。 最初の場面。 スワイプ操作でアニメーションしていきます。 デモ動画です。パーツごとにアニメーションしているのが分かるかと思います。 Jazz Handsではアニメーションさせたいビューを作成し、後はキーフレームを追加していけば良いだけです。変化させるフレーム数も指定できますので、二つを異なる動きで表現したりするとよりダイナミックな感じが出て格好いいと思います。 ユーザ操作イベントによるアニメーション実行はもちろんのこと、チュートリアルで自動で動いていくアニメーションとして使っても面白いと思います。スマートフォ
フリーランサー/小規模向けのプロジェクト管理·Solo MOONGIFT
SoloはPHP製のソフトウェアです。 ごく小規模な、そう一人でも使えるプロジェクト管理は意外と使い勝手が良いものはなかったりします。少人数で使うにはちょっと大袈裟な機能がたくさんなので、手に余る感じでした。そこで紹介したいのがSolo、小規模にこだわったプロジェクト管理です。 インストール。ウィザードに沿って進めるだけです。 メイン画面です。プロジェクトが並びます。 プロジェクト作成画面。基本的にこういったモーダルウィンドウで入力を行います。 プロジェクトにはタスクが追加できます。 カレンダー機能があります。タスクの期限に合わせて表示されます。 クライアント。 タスク管理。プロジェクトを横断的にチェックできます。 ファイルの添付もできます。 プロジェクトテンプレート。 タスクはタイムトラッキング機能が備わっています。 Soloは主にフリーランスが集まってプロジェクトをこなすのに合わせた設
Google製。Raspberry PiをWebアプリ開発プラットフォーム化·Coder for Raspberry Pi MOONGIFT
Coder for Raspberry PiはRaspberry Pi用のオープンソース・ソフトウェア（Apache Licnese 2.0）です。 Googleからまた一風変わったプロダクトが生み出されました。最近よく聞くRaspberry PiをWeb開発プラットフォームにしてしまうCoder for Raspberry Piです。 まずSDカードにcoderをインストールします。 インストールしたらcoderを立ち上げて、Webブラウザからアクセスします。最初にパスワードを設定します。 メイン画面で簡易的なチュートリアルが表示されます。 デモのアプリを開きました。これはその結果画面です。 こちらは編集画面。HTML/CSS/JavaScriptそしてNodeの編集ができます。 画像などのメディアをアップロードできます。 2ペインで実行結果の確認もできます。 別なデモ。アステロイドです
WebサイトにもiPhone風の通知を実現·HTML iOS Notifications MOONGIFT
HTML iOS NotificationsはHTML/JavaScritp製のソフトウェア（ソースコードは公開されていますがライセンスは明記されていません）です。 iOSやAndroidなどのモバイルでは通知機能が便利に使われています。それはアプリに限らず便利に使えるはずです。そこで使ってみたいのがHTML iOS Notificationsです。 デスクトップ版。画面上部に通知が表示されています。しばらく経つと消えます。 複数出すこともできます。 レスポンシブに対応しています。 iPhoneで出す場合は画面幅いっぱいに広がるようです。 Webなので画像やメッセージ、クリックした時のアクションなどは自由に操作できます。スマートフォンに最適化されたWebサイトで使うとまるで本物のネイティブ風になるのではないでしょうか。 MOONGIFTはこう見る HTML iOS Notification
既存のHTMLからID/クラスを抜き出してCSSを生成·extractCSS MOONGIFT
extractCSSはJavaScript製のオープンソース・ソフトウェア（MIT License）です。 スタイルシートの記述法は幾つかあります。linkタグで外部ファイル化、styleタグでインラインに表示、そしてstyle要素でタグごとに指定する方法です。styleタグに書き込まれてしまったスタイル設定を一気に書き出してくれるのがextractCSSです。 トップページです。まず右側に現状のHTMLソースを入力します。 そしてExtractボタンを押すとスタイルシートが出力されます。 入れ子向上も適切に処理されています。 extractCSSではID/クラスを自動的にピックアップして生成していますので空っぽの指定が相当数生成されることになると思います。それらを必要に応じてフィルタリングするようにすればスタイルシートのベースとして使えるのではないでしょうか。 MOONGIFTはこう見る
ブロック図表示機能のついたMarkdownエディタ·LiveDiag MOONGIFT
LiveDiagはMac OSX用のオープンソース・ソフトウェア（BSD License）です。 Markdownは普及したテキスト記法になっていますが、物足りないと感じることも多いのではないでしょうか。有志による拡張もされていますが、今回はMarkdownエディタにブロック図生成機能を追加したLiveDiagを紹介します。 メイン画面です。左側がエディタ部、右側がプレビューになります。実際にブロック図を表示するためにはblockdiagなどをインストールする必要があります。 ブロック図の例。波括弧でくくられた部分が変換されています。 シーケンス図。より複雑な描画もできます。 アクティビティ図。システムとユーザの関係性などを表現するのに最適です。 ネットワーク図。ブロックで表される簡単な図ですが、構成を表現するなら十分でしょう。 LiveDiagでは波括弧＋図の種類を指定することで各ソフト
これは凄い！RubyでPhotoshopファイルを解析·PSD.rb MOONGIFT
PSD.rbはRuby製のオープンソース・ソフトウェア（MIT License）です。 Webやアプリのデザインの際にPhotoshopを使う事がよくあります。そんな時に出来上がった画像を分析してコーディングに落とし込んだりします。それの自動化さえできるようになるのではないかというライブラリがPSD.rbです。 インストールはRubygemsで行えます。 適当なPSDファイルを読み込んでparse!を実行します。trueが返ってくれば解析完了です。処理はファイルサイズにもよりますが結構重たいです。 treeで木構造を出力します。こちらもファイルが大きければ膨大になります。 PSD.rbでは構造、サイズ、レイヤー/フォルダサイズと名前、フォントデータ、カラーモード、ベクターマスク、フラットな画像データなどが読み取れます。Photoshopのファイルを使ったサービスが捗りそうです。 MOONG
Bootstrapベースの管理画面用テンプレート·Charisma MOONGIFT
CharismaはHTML5/JavaScript製のオープンソース・ソフトウェア（Apache Licnese 2.0）です。 Webシステム開発において意外と不遇なのが管理画面です。内部の人が使うものなので適当に作られるケースが多くなります。そこで使ってみたいのがCharismaです。リッチな管理画面をBoostrapをベースに作り上げる事ができます。 ウィジェットがついた、リッチな管理画面です。ここまで恵まれているケースは早々ないでしょう。 ドラッグ&ドロップによる配置変更もサポート。 折り畳んで隠す事もできます。 グリッドは細かくサポートされています。 カレンダー。システム内部のデータをマッピングすると見通しが良くなりそうです。 メンバー一覧。検索やラベルもあって便利そうです。 ギャラリー。サムネイル写真をきれいに並べています。 タイポグラフィ。様々なタグをサポートしているので奇麗
データベース無し、Markdownでコンテンツを作成するCMS·Pico MOONGIFT
PicoはPHP製、MIT Licenseのオープンソース・ソフトウェアです。 CMS（コンテンツマネジメントシステム）と言えばデータベースにコンテンツを入れて、システムがそれを一覧にしたり詳細ページを作ったりします。運営担当者が自由にできるところは限られるものです。しかしPicoであればカスタマイズが容易でかつ高速なCMSが手に入ります。 フォルダを配置するだけで準備は完了です。インストールの手間もありません。 ファイル構成です。contentディレクトリの下にMarkdownで書かれたコンテンツがあります。 テーマ、プラグインがサポートされています。テンプレートエンジンはtwigになります。 Markdownファイルを修正すれば、それが自動的にコンテンツに反映されます。 テンプレート。見ても分かる通り簡単な作りです。 Picoはシンプルであり、データベースも不要で使える手軽なCMSとな
セキュアなRuby on Rails環境を実現するセキュリティチェッカー·Hakiri MOONGIFT
HakiriはRuby製、MIT Licenseのオープンソース・ソフトウェアです。 Webサーバのセキュリティは万全でしょうか。できるだけのことはしつつも、それでもバージョンアップが適切に行われていない場合もあります。特に外部に公開されるWebサーバや、そこから接続されるデータベースサーバについては重点的にチェックが必要です。そこで使ってみたいのがHakiriです。 最初にマニフェストを作成します。必要な箇所を修正します。 後はsystem:scanで自動的にシステムのバージョンチェックが実行されます。ローカルということもあってバージョンアップを放置し過ぎていますね…。 セキュリティ情報をリストアップできます。おとなしくバージョンアップするのが良いです。 HakiriはWebサービスとして公開されているHakiri PlatformのCUIクライアントという位置づけです。主にRuby/R
iOSアプリのデザインをスタイルシートで行う凄い技術·Pixate MOONGIFT
PixateはMac OSX用のソフトウェアです。 iOSアプリのデザインはXcodeを使って行うのが一般的です。しかしWebデザイナーや開発者にとっては思い通りにいかなくてやきもきするときがあるかも知れません。そこで注目したいのがPixateです。何とスタイルシートと同じ記述で画面を作成できます。増資し、フリーになりました。 ボタンのデザイン。確かにスタイルシート調です。 記述を変えればダイナミックに描画が変わるのも特徴です。 SVGの表示も行えます。 さらにタップすると線だけに。 こちらはプレイグラウンド。様々な表示例があります。 ラベル。テキストエリアの部分は変更できます。 こんな感じにダイナミックに文字サイズを変更できます。 地図のポインター部分の大きさを変更。 本当に数多くのデモがあります。 検索ボックス。 セクション付きのテーブルビュー。 様々なテキストビュー。 Pixateは
簡単に自分のローカルサーバをオンラインに公開·ngrok MOONGIFT
ngrokはWindows/Mac OSX/Linux用のオープンソース・ソフトウェア（Apache License 2.0）です。 自分のローカルで作っているサイトを誰かに見せたいと思ったことはないでしょうか。社内であればLANを使ってアクセスもできるでしょうが、ルータ越しではそう簡単ではありません。しかしngrokを使えばとても簡単に一時的な公開が実現できます。 実行しました。引数として何番のポートを見せたいか指定します。例えば3000や8080、80などです。そうするとインターネットからアクセスするためのURLが生成されます。 管理画面にアクセスすると指定したポートへアクセスした結果が表示されます。 外部からアクセスするとログがリアルタイムに流れていきます。 ヘッダーなども閲覧できます。 サーバにもログが出ています。 仕組みとしてはngrokが提供するWebサーバ（ngrok.com
これは凄い！iOSアプリ内で動作するPHP·iPHP MOONGIFT
iPHPはObjective-C製のソフトウェア（ソースコードは公開されていますがライセンスは明記されていません）です。 iOS上で動作するプログラミング言語と言えばObjective-CやJavaScriptくらいと思われています（アプリを開発できる言語はもっとありますが）。しかしその壁を打ち破るソフトウェアがiPHPです。名前の通り、PHPの実行エンジンをiOSアプリ内に埋め込んだソフトウェアです。 立ち上げました。さっそくphpinfoを実行します。 見慣れた画面です。PHPのバージョンは5.4.15となっています。 curlも組み込まれています。外部コンテンツを取り込んで…といったこともできるでしょう。 fileinfoやgdもあります。色々な使い方ができそうです。 evalを使って入力したテキストを評価させることができます。 こちらはベンチマークを実行した結果です。 iPHPは思
データの追記読み込みに対応するテーブル·StreamTable.js MOONGIFT
StreamTable.jsはJavaScript製のオープンソース・ソフトウェア（MIT License）です。 業務システムなどではデータの表示の際にテーブル組で表示する事が多々あります。そのような時に一気に表示しようとするとレンダリングに時間がかかります。そこで使ってみたいのがデータを取得しながら表示を行っていくStreamTable.jsです。 テーブルは既に表示されていますが、データは徐々に取得されていきます。例えばこの場合は20%までデータを取っています。 ページネーションもどんどん増えていきます。 検索ボックスを使って予めフィルタリングする事もできます。マッチするデータだけが追加されていきます。 仕組みとしてはAjaxでデータを取得しています。 StreamTable.jsではデータのストリームベースでの取得に加えて、検索によるデータ絞り込みとページネーションに対応しています
多彩なフォーマットに対応したビジュアル化ソフトウェア·Hypercube MOONGIFT
HypercubeはWindows/Mac OSX用のオープンソース・ソフトウェア（GPL）です。 テキストで書かれただけでは分かりづらい情報も、ビジュアル化すると分かりやすくなります。そこで今回は多彩なテキストフォーマットに対応したビジュアル化ソフトウェア、Hypercubeを紹介します。 メイン画面です。こちらはMac OSX版ですがWindowsにも提供されています。 サンプルファイルを読み込んでみました。正確なグラフが描けます。 別なファイルを開きました。タブで管理されます。 線やポイントの色を変更できます。 エッジの色を変更できます。要素間の関係を示すのに便利そうです。 こういった図も描けます。 回転させることもできます。レンダリングするたびに多少描画内容が変わるようです。 対応しているのはDOT、GML、GraphML、GXLとなります。そしてレンダリングした内容はSVGやPo
フォームの入力をもっと快適にする·jq-idealforms MOONGIFT
jq-idealformsはjQuery/JavaScript製、GPL/MIT Licenseのオープンソース・ソフトウェアです。 Webサイトでフォーム入力を行う機会はとても多いです。だからこそ変な作りのフォームでは入力途中で嫌になってしまって閲覧者が逃げてしまいます。そんな勿体ない取りこぼしのようにできるフォームがjq-idealformsです。 レスポンシブWebデザインなフォームです。入力時にリアルタイムチェックしてくれます。 OKだと青くなります。 カレンダーは選択式です。 チェックボックスなどのデザインがカスタマイズされています。 ドロップダウンも色がついています。 jq-idealformsではステップごとに表示を分けたり、キーボードの入力をリアルタイムにサポートしていたりと便利な機能がたくさんついています。ブラウザはIE8以降の他メジャーなブラウザに対応し、Android
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
