UI Tiles·Webサイト全体の画面遷移設計に使えるデザイン集 MOONGIFT
Webサイトを開発する際に使われるのが画面遷移を表現するフローチャートです。例えばコマースであればトップページから商品一覧、カテゴリ一覧や商品のピックアップなどの遷移が考えられます。 深くなってしまう場所がないか確認したり、ユーザ動線が正しく描けているかどうか確認するのに便利です。UI Tilesはそんなフローチャートを作成するのに便利なデザイン集です。 UI Tilesの使い方 UI TilesはPNGの他、PhotoshopやIllustrator形式でファイルが配布されています。 PNG版。画面のモックがたくさんあります。 それぞれ小さいながらも特徴があります。 動画プレーヤ、ポートフォリオページもあります。 PSDはデモも用意されています。 デザイン一覧。 Illustratorも同様です。 UI Tilesを使うと、これまでは単なる四角い枠に対してトップページなどとラベルを貼って
Suave UI – AngularJSと組み合わせて使いたいUIフレームワーク
JavaScriptを活用したWebアプリケーション開発の流れが広まっています。JavaScriptアプリケーションが大型化すれば、自然とフレームワークを欲するようになります。AngularJS、Ember、Backboneあたりが有名でしょうか。 今回はAngularJSをターゲットにしたプロダクト、Suave UIを紹介します。AngularJSと組み合わせて使うと便利なUIフレームワークになります。 Suave UIの使い方 Suave UIはAngularJSに対応した部分において、su-*というプリフィックスを持っています。スタイルシートについてもsu-*をつけて使います。UI周りで従来のライブラリを使うと、そこだけAngularJSと違う書き方になって浮いてしまうことがあります。Suave UIを使ってUIとスクリプトが親和性高い状態を維持しましょう。 Suave UIはJav
Materialize - マテリアルデザインのためのCSSフレームワーク MOONGIFT
レスポンシブでWebデザインを組むのは当たり前、今のトレンドはマテリアルデザインにあるという時代になってきました。フラットUIを踏襲しつつ、アニメーションを効果的に使うことでさらにユーザビリティ高いデザインを可能にします。 主にモバイルアプリ用に使われていますが、Webデザインにおいても十分利用が可能です。今回はマテリアルデザインを実現するスタイルシートフレームワーク、Materializeを紹介します。 Materializeの使い方 今回はスクリーンショット多めに紹介します。 Materializeはレスポンシブかつマテリアルデザインのフレームワークになっています。開発の高速化、ユーザ体験重視、ドキュメントとサンプルを多めにして学習コストを低くするといった特徴があります。 MaterializeはHTML5/JavaScript/CSS3製のオープンソース・ソフトウェア（MIT Lic
Sensei Grid - キーボード移動/インライン編集を可能にするテーブルライブラリ MOONGIFT
業務システムを開発していると度々持ち上がってくるのがデータグリッドのリッチ化です。様々なソフトウェアがあり、Excel並にリッチなUIを提供するものもありますが、今回はちょっと変わったライブラリを紹介します。 Sensei Gridが提供するのはリッチなフォーカス移動、そしてその場での編集機能になります。これもまた使いどころの多そうな便利なライブラリです。 Sensei Gridの使い方 例えばグリッドがこのように表示されています。 この時、矢印キーでのセル移動はもちろんのこと、タブキーでの横移動、Ctrl + Enterでの下への移動が行えます。まさにExcel的な操作性です。 エンターキーで編集モードです。ドロップダウンのような選択式の表示もサポートされています。 テキストの編集も可能です。 Sensei Gridはマスタメンテナンスのように一覧表の中からデータを探して編集するというの
Responsive Dashboard - Bootstrapベース、レスポンシブな管理画面テンプレート MOONGIFT
Bootstrapの良いところは使い手（主にエンジニア）の気持ちを理解し、その利用シーンが想定されていることでしょう。こだわったデザインにすることだってできますが、それでは応用がききません。その汎用性と見栄えのバランスを上手に保っています。 今回紹介するResponsive Dashboardもその応用例と言えます。いわゆる管理画面系のダッシュボードですが、AngularJSとjQueryに対応し、カスタマイズして利用するのが容易になっています。 Responsive Dashboardの使い方 こちらがメイン画面です。管理系で良くありがちなウィジェットがたくさんあります。メニューは左側です。 デスクトップもメニューを折り畳めます。 タブレットサイズになると自動でメニューの文字が折り畳まれます。 スマホサイズ。カラムが1列になります。 Responsive DashboardはBootst
InvoicePlane - PHP製の請求書管理システム
MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました システムを提案するシステム会社の基幹システムが大したことないなんてのは良く聞く話です。システム開発の場合、請求書の量もそう多くないので手作業で作るというケースも少なくありません。 しかしそれではやはり問題があるでしょう。ということでフリーランスからでも使えそうな請求書管理システムがInvoicePlaneです。 InvoicePlaneの使い方 InvoicePlaneは見積書から請求書、クライアント管理などバックオフィスの機能を最低限備えています。レポート機能は集計くらいなので、より高度な分析は自分でカスタマイズしていくのがいいのではないでしょうか。そこがオープンソースの魅力とも言えるでしょう。 InvoicePlaneはPHP製、MIT Licenseのオープンソース・ソフトウ
WonderCMS - 大きなCMSに辟易しているなら試して欲しいDBいらずのCMS MOONGIFT
Webサイトを作る際、殆どの場合CMSが欲しくなりますよね。かといって大型なものは入れるとデザインを変更するのも大変ですし、運用も面倒です。もっとシンプルに扱えるものが欲しいと思うのではないでしょうか。 そこで試して欲しいのがWonderCMS、ごくごく小さなPHP製のCMSです。データベース不要で、手軽に使えそうです。 WonderCMSの使い方 ログインした後の画面です。ログインする前とはSettingsのバーがあるかないかくらいの違いしかありません。 Settingsをクリックすると設定メニューが表示されます。テーマの変更やサイトタイトルなどが変更できます。 ナビゲーションも動的に追加できます。 右上にTestというリンクが追加されました。クリックしてみます。 自動的にページが生成されます。この辺りはWikiっぽいですね。後はコンテンツエリアをクリックすると編集モードになります。 編
Kendo UI Core·企業向けHTML5 UIフレームワークのコア部分がオープンソース化 MOONGIFT
HTML5を使ったWebアプリケーションを構築するのに使えるUIフレームワークとしてKendo UIが知られています。ビジネス向けに有償提供されていましたが、先日よりコア部分をオープンソース化しました。 有償版は継続ですが、その7割近くをオープンソースとして使えるようになっています。この機会にKendo UIの便利さを知ってみてはいかがでしょう。 Kendo UI Coreの使い方 こんな感じにサジェスト付き検索ボックスを実装したりできます。 カレンダーUI。温度計や小さな時刻も表示されています。 カレンダーは日付選択時にも使えます。 時刻ピッカーなるものも。 ドロップダウンもちょっとカスタマイズされています。 サムネイルの画像一覧。高さがちゃんと揃っていますね。 メニュー付き。結構複雑なUIです。 通知表示。 スプリッター。この辺りは業務システムでは必須ですよね。 ソートできるリスト。
Hierapolis – フラットUIを活かしたBootstrap管理画面テーマ
管理画面であれば社内の人くらいしか使いませんので、あまりデザインにこだわる必要がないのでベタなBootstrapを使ってもそんなに嫌がられることはないでしょう。とは言えちょっとは格好よく見せたい場合もありますよね。 そんな時に使ってみたいBootstrapテーマがHierapolisです。フラットなデザインで格好いい管理画面用テーマとなっています。 Hierapolisの使い方 Hierapolisはサイドバーがついていて、一覧性がある管理画面が作れます。デザインはフラットだけにシンプルで、各機能に素早くアクセスできるのが特徴です。使い勝手が良いのではないでしょうか。 HierapolisはHTML5/JavaScript製のオープンソース・ソフトウェア（MIT License）です。 Sign in lab2023/hierapolis
Bootstrap Admin Theme - Bootstrap3に対応した管理画面テンプレート
これは知っておいて損はないでしょう！ Bootstrapの便利な使いどころとして管理画面があります。管理画面は限られた関係者しか使いませんのでBootstrap臭がしても気にすることはありません。それなりの表示がすぐに実現できるのは使い勝手を向上します。 しかしそんな適当な範囲を超えて実用性のある管理画面を実現できるBootstrapテンプレートがBootstrap Admin Themeです。Bootstarp 3系に対応していますので最新のウィジェットもばりばり使えるでしょう。 Bootstrap Admin Themeの主なページとしては、 ログイン ダッシュボード カレンダー グラフ ボタン/アイコン WYSIWYGエディタ フォーム/ウィザード テーブル その他ウィジェット が用意されています。これだけあれば後は組み合わせるだけで（Bootstrap本来の機能も使いつつ）リッチな
Cockpit - コンテンツ管理“だけ”を提供する小さなCMS MOONGIFT
CMS（コンテンツ・マネジメント・システム）を導入すると、どうしてもシステムにサイト全体のテイストが引っ張られてしまいます。カスタマイズ前提のCMSもありますが、それでも機能面などはシステムが提供するもの以上が提供できないでしょう。 そんな多機能なものではなく、運用担当者が必要なコンテンツを手軽に差し替えられる程度のCMSが欲しい…そう考える方に使ってみて欲しいのがCockpitです。ごくごく小さなCMSです。 使い方 まずはインストールです。といっても単に設置する程度で終わります。 インストールが終わったら、デフォルトのadmin/adminでログインします。 ログイン後の画面、いわゆるダッシュボードです。提供される機能はコレクション、リージョン、メディアマネージャとなっています。 メニューもあります。アドオンを使って機能拡張もできます。 例えばリージョンの一つ。これはフォームを作ってい
appserver - PHP製のマルチスレッド・アプリケーションサーバ MOONGIFT
おお、これは面白いチャレンジ！ Javaはエンタープライズ系の開発で多く利用されています。スクリプト言語もシェアを広げていますが、それでもまだまだJavaには劣っているのが実情でしょう。 そんな中、PHPをエンタープライズレベルで使えるようにすべく開発されているのがappserverです。サーブレットエンジンを備えたPHPのためのPHPで書かれたマルチスレッド・アプリケーションサーバです。 現時点で対応しているOSはDebianまたはMac OSX 10.7以降となっています。 Mac OSXであればインストーラーが付属しているので容易にインストールできます。 インストールが終わったら[http://127.0.0.1:8586/demo]にアクセスしてみましょう。 デモアプリが表示されます。 こちらはアプリケーションサーバのソース。確かにPHPで作られています。 デモアプリのソースコード
モバイルファーストがコンセプトのデザインフレームワーク·Cardinal MOONGIFT
CardinalはCSS3製のオープンソース・ソフトウェア（MIT License）です。 Webデザインフレームワークが多数登場しています。それぞれに特徴がありますが、今回紹介するCardinalはWebアプリケーション開発に使えそうなフレームワークになります。 説明ページがそのままデモになっています。左側にメニュー、右側にコンテンツが表示される形になっています。 まずはグリッド。区切りの幅も指定できるようになっており、細かな制御が出来ます。 もちろんレスポンシブです。この場合でもグリッドは保たれたまま。 レスポンシブなグリッドもあります。こちらはウィンドウ幅によってグリッドの表示が変わります。 ボタン系。四角と角丸があります。 さらに丸みを帯びたタイプも用意されています。 ボタンもスマートフォンサイズに縮めた場合もきれいに表示されます。 テーブル。多様な表現が用意されています。 スマー
Vagrantを設定ファイルをWeb上で作成·PuPHPet MOONGIFT
PuPHPetはPHP製、MIT Licenseのオープンソース・ソフトウェアです。 Vagrantが注目を集めています。簡単に仮想サーバを立ち上げられますが、設定ファイルを書けばさらにコマンド一つで環境まで整ってしまいます。そんなVagrantの設定ファイルを設定を行うだけで生成してくれるのがPuPHPetです。 最初にディストリビューションを決めます。 次に最初にインストールするパッケージや設定を決めます。 HTTPサーバです。Apacheまたはnginxから選択します。 PuPHPetなのでPHPメインです。バージョンも5.3/5.4/5.5から選択できます。 PHPのモジュールです。入力補完がついているので簡単に選択できます。 PEARを組み合わせることもできます。 データベースです。MySQLまたはPostgreSQLが使えます。 後は設定ファイルをダウンロードするだけです。Zi
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とな
簡単に自分のローカルサーバをオンラインに公開·ngrok MOONGIFT
ngrokはWindows/Mac OSX/Linux用のオープンソース・ソフトウェア（Apache License 2.0）です。 自分のローカルで作っているサイトを誰かに見せたいと思ったことはないでしょうか。社内であればLANを使ってアクセスもできるでしょうが、ルータ越しではそう簡単ではありません。しかしngrokを使えばとても簡単に一時的な公開が実現できます。 実行しました。引数として何番のポートを見せたいか指定します。例えば3000や8080、80などです。そうするとインターネットからアクセスするためのURLが生成されます。 管理画面にアクセスすると指定したポートへアクセスした結果が表示されます。 外部からアクセスするとログがリアルタイムに流れていきます。 ヘッダーなども閲覧できます。 サーバにもログが出ています。 仕組みとしてはngrokが提供するWebサーバ（ngrok.com
Windows上でLinuxコマンドを動かす·Atratus MOONGIFT
AtratusはWindows用のオープンソース・ソフトウェア（LGPL）です。 Windows環境でLinuxのコマンドやソフトウェアを使いたいという要望は昔からあります。古くはCygwinがありましたが、今回はAtratusを紹介します。Atratusの目標はLinuxのバイナリをそのままWindows上で実行できるようにすることにあります。 コマンドプロンプトです。lsコマンドを打つとちゃんとリストが返ってきます。 別なアスキーベースのゲーム（？）です。 テトリスもあります。 ちゃんと遊べます。十字キーだけで動きます。 スネークゲーム。アスキーなゲームですが意外と面白いです。 コマンド群です。Windows側では特にコンパイルなどはしていません。 Atratusではソースからコンパイルして、といった面倒な作業がないのでインストールすればすぐに使い始められます。提供されているコマンドの
BootsrapをGoogle+風に·Bootplus MOONGIFT
BootplusはHTML5/JavaScript/CSS製のオープンソース・ソフトウェア（Apache License 2.0）です。 最近のWebデザインはフラットなスタイルが人気です。そのデザインはGoogleのサービスでも広く取り入れられています。そんなUIを自分のWebサービスでも実現したい、そう考える人に使ってみて欲しいのがBootplusです。 Bootstrapがベースになっていますが、デザインは白色系をベースにしたフラットになっています。 かなり思い切って色をカットしています。 こちらは黒地部分が大きく目立ちます。 メニューなどのウィジェットはもちろんBootstrapをベースにして構築されています。 カード形式のウィジェット。 プロフィールなどの表示に便利そうな表示です。 何となくGoogle+っぽい感じです。 ベースはBootstrapなので多彩なウィジェットやコンポ
ステップバイステップでより深いJavaScriptの学習ができる·new2JS MOONGIFT
new2JSはWebベースのJavaScriptレクチャーソフトウェアです。 プログラミングは実際に手を動かしてみないと覚えられるものではありません。それをコードを使ってレクチャーしてくれるのがnew2JSです。JavaScriptを覚えたい方におすすめです。 最初のページです。まずRunボタンを押します。 説明文と、その下に実行結果が表示されます。後はnextボタンを押していきます。 数値の型が出ています。 文字列、真偽値の型など。 入力を行った判定もできます。 他にも色々なレクチャーが受けられます。 new2JSはJavaScriptを一歩一歩覚えていくというよりもある程度JavaScriptを把握しているユーザがより深くJavaScriptを習得していくのに便利なサービスと言えます。なぜこんな仕様なのか、そう思ってしまう所もきっとあるでしょう。 new2JSはJavaScript製の
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
