Webアプリケーションの画面をさくさく作ろう。UIフレームワーク特集 MOONGIFT
今回はWebアプリケーションの画面作成に関する話です。かつて業務システムというのはエンジニア自身が画面を作ってロジックを実装して提供していました。UIがただコンポーネントを貼付ける程度だったからです。 しかしWebアプリケーションの時代になって、UIの制作が難しくなってきています。デザインの自由度が高いためです。しかし今後さらにWebアプリケーションが活用されていく中ではエンジニアもそれなりの画面を素早く開発できるようになっていかないといけない時代になっています。 そこで今回はUIフレームワーク、多彩なコンポーネントを備えたデザインフレームワークをまとめて紹介します。 iPhone/Android/Windows Phone対応のモバイルWebアプリフレームワーク「ChocolateChip」 モバイルWebサイトをネイティブ風にするUIライブラリは昔から多数存在しますが、今回はその最新版
PryNotes – 会社みんなで使えるWebベースのメモ環境
MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました WYSIWYGなエディタは使い勝手が良さそうです。 Webベースのノート環境は幾つか存在しますが、利用の決め手になるのは機能よりも自分にとって手に馴染むがどうかが大きなポイントになるようです。その意味でwri.peはプログラマにとって手に馴染む人が多いようです。 今回はもう少し高機能なノートWebアプリケーションPryNotesを紹介します。ノート環境としてだけでなく、Webブラウジングのお供にぴったりなソフトウェアになります。 PryNotesの使い方 組織で使える 暗号化 どこからでもアクセスできる ファイルキャビネット プライバシー クラウド といった項目になります。 PryNotesは任意のWebサイトをコピーしてノート上に貼付けられる機能があります。スクラップを残しておく
AdminLTE·ここまで多ければ何でもできそう。多機能なBootstrapベースの管理画面テンプレート MOONGIFT
これで十分でしょ！ Bootstrapで作る管理画面は相当増えてきているようです。確かに一般ユーザ向けに提供するとBootstrap臭が出てしまいますが、管理画面であれば問題はないですよね。 ということで今回は新しいBootstrap製の管理画面テンプレートAdminLTEを紹介します。高度なウィジェットが数多く提供されていますので使い勝手良さそうですよ。 AdminLTEの画面 今回もスクリーンショット多めで紹介します。 ダッシュボード。この時点でかなりリッチ。 ボックス。これだけ多彩なパターンがあると言うのも凄いですね。 左端にはちょっとした設定を表示させています。 背景色を変えるだけでも随分印象が違います。 グラフ。 こちらもグラフ。 外部ライブラリもそつなく使いこなしています。 スパークラインも！ アラート。ちょっと飛び出しているのがいい感じです。 アイコン。 ボタン。フラット系で
Redmine Desktop Client - 常時手元においておきたいデスクトップRedmineクライアント MOONGIFT
Redmineをプロジェクト管理に使っている企業は多いです。アジャイル開発のみならず必要十分な管理項目があることで従来のプロジェクト管理においても活躍します。 しかしWebブラウザからアクセスするのに対して若干の不便さを感じることもあります。もっと素早くアクセスできれば良いのに…そう思う方はRedmine Desktop Clientを使ってみましょう。 Redmine Desktop ClientはオリジナルのRedmineClientからフォークし、REST APIを使うようにしたソフトウェアです。 接続設定です。RedmineのURLとID/パスワードを入力します。Redmineのバージョンも指定する必要があります。 タイムトラッキング機能があります。タスクを選んでトラッキングを開始します。 タスクの編集や追加もここからできます。 RedmineのWeb UIから操作するよりもRed
ownCloud·クラウドが使えない職場、なら自前で立てるのはいかが？ MOONGIFT
うお、もの凄い勢いで進化しています！ 今はクラウド全盛の時代です。Dropboxでローカルデータをクラウド上に保存し、Google Appsでメールやスケジュールを管理し、さらにiCloudでスマートフォンやタブレットのデータをバックアップする。そんな中心配になるのは自分のデータがちゃんとセキュアに保存されているのかということでしょう。 企業においてはセキュリティ基準からクラウドサービスを安易に導入できないケースもあります。そこで使ってみたいのが自前で立てられるクラウドサーバ、ownCloudです。 元々ファイルストレージがメイン機能だった覚えがあるのですがバージョン6になって実に多彩な機能を備えるようになっています。順番に見ていきましょう。 ファイル管理 まずはファイル管理。ここではローカルのファイルを同期してクラウド上からの閲覧、ダウンロードできるようになっています。 写真はownCl
WebサイトにもiPhone風の通知を実現·HTML iOS Notifications MOONGIFT
HTML iOS NotificationsはHTML/JavaScritp製のソフトウェア（ソースコードは公開されていますがライセンスは明記されていません）です。 iOSやAndroidなどのモバイルでは通知機能が便利に使われています。それはアプリに限らず便利に使えるはずです。そこで使ってみたいのがHTML iOS Notificationsです。 デスクトップ版。画面上部に通知が表示されています。しばらく経つと消えます。 複数出すこともできます。 レスポンシブに対応しています。 iPhoneで出す場合は画面幅いっぱいに広がるようです。 Webなので画像やメッセージ、クリックした時のアクションなどは自由に操作できます。スマートフォンに最適化されたWebサイトで使うとまるで本物のネイティブ風になるのではないでしょうか。 MOONGIFTはこう見る HTML iOS Notification
JSONを見やすく整形、加工·HULK MOONGIFT
HULKはHTML/JavaScript製、MIT Licenseのオープンソース・ソフトウェアです。 JSONを使ってWebアプリケーションを開発する事が増えてきましたが、そのデータは一行にまとめられる場合が多く、人の眼では確認しづらいのが難点です。そこで使ってみたいのがHULK、WebベースのJSONエディターです。 上にあるのがデモのJSONです。大抵はこれが一行で出力されるでしょう。下にあるのがHULKを使った表示です。 データがテキストボックスなどを使って表示されているのが分かるでしょうか。長文は自動的にテキストエリアになっています。 項目が多いとデフォルトでは折り畳まれた状態になります。ボタンを押して伸張できます。 新しい項目を追加すると、上に表示されているJSONが自動的に更新されます。 全て折り畳むとこのようにコンパクトになります。 HULKはあくまでもサンプルなので、任意
Bootstrapベースの管理画面用テンプレート·Charisma MOONGIFT
CharismaはHTML5/JavaScript製のオープンソース・ソフトウェア（Apache Licnese 2.0）です。 Webシステム開発において意外と不遇なのが管理画面です。内部の人が使うものなので適当に作られるケースが多くなります。そこで使ってみたいのがCharismaです。リッチな管理画面をBoostrapをベースに作り上げる事ができます。 ウィジェットがついた、リッチな管理画面です。ここまで恵まれているケースは早々ないでしょう。 ドラッグ&ドロップによる配置変更もサポート。 折り畳んで隠す事もできます。 グリッドは細かくサポートされています。 カレンダー。システム内部のデータをマッピングすると見通しが良くなりそうです。 メンバー一覧。検索やラベルもあって便利そうです。 ギャラリー。サムネイル写真をきれいに並べています。 タイポグラフィ。様々なタグをサポートしているので奇麗
様々なニーズを満たす多機能Webベース表計算ライブラリ·SlickGrid MOONGIFT
SlickGridはWebベースで動作する多機能なグリッド、表計算ライブラリです。 Webベースで業務系システムを作っていると必ず要望に挙がるのがリッチな表計算（グリッド）表示ライブラリです。 こちらは通常の表示。縦横スクロール対応。 表示形式も色々指定できます。 スライダーでの入力。 カレンダー。 チェックボックス。 長い場合はフローティング。 縦スクロールをなくすこともできます。 Ajaxでデータの取得も可能です。 途中の集計も可能。 行を選択式にすることもできます。 入力方式の設定や、行を選択してといった機能はExcelにもないので便利ではないでしょうか。また、プラグインによってExcelとコピー&ペーストでデータの授受もできるようになっています。 SlickGridはJavaScript製、MIT Licenseのオープンソース・ソフトウェアです。 MOONGIFTはこう見る グリ
iOSアプリのデザインをスタイルシートで行う凄い技術·Pixate MOONGIFT
PixateはMac OSX用のソフトウェアです。 iOSアプリのデザインはXcodeを使って行うのが一般的です。しかしWebデザイナーや開発者にとっては思い通りにいかなくてやきもきするときがあるかも知れません。そこで注目したいのがPixateです。何とスタイルシートと同じ記述で画面を作成できます。増資し、フリーになりました。 ボタンのデザイン。確かにスタイルシート調です。 記述を変えればダイナミックに描画が変わるのも特徴です。 SVGの表示も行えます。 さらにタップすると線だけに。 こちらはプレイグラウンド。様々な表示例があります。 ラベル。テキストエリアの部分は変更できます。 こんな感じにダイナミックに文字サイズを変更できます。 地図のポインター部分の大きさを変更。 本当に数多くのデモがあります。 検索ボックス。 セクション付きのテーブルビュー。 様々なテキストビュー。 Pixateは
データベース無し、Markdownでコンテンツを作成するCMS·Pico MOONGIFT
PicoはPHP製、MIT Licenseのオープンソース・ソフトウェアです。 CMS（コンテンツマネジメントシステム）と言えばデータベースにコンテンツを入れて、システムがそれを一覧にしたり詳細ページを作ったりします。運営担当者が自由にできるところは限られるものです。しかしPicoであればカスタマイズが容易でかつ高速なCMSが手に入ります。 フォルダを配置するだけで準備は完了です。インストールの手間もありません。 ファイル構成です。contentディレクトリの下にMarkdownで書かれたコンテンツがあります。 テーマ、プラグインがサポートされています。テンプレートエンジンはtwigになります。 Markdownファイルを修正すれば、それが自動的にコンテンツに反映されます。 テンプレート。見ても分かる通り簡単な作りです。 Picoはシンプルであり、データベースも不要で使える手軽なCMSとな
MOONGIFT: ごくシンプルなWebベースの勤怠管理「kumquat」:オープンソースを毎日紹介:
勤怠管理に求める機能は何だろうか。それは出社時間と退社時間が記録できることだ。それ以外の機能はいらない。もし色々なリンクがあって、複雑になってしまったら入力に手間取っているうちに時間が過ぎてしまうかも知れない。 入力フォーム シンプル・イズ・ザ・ベストを地でいく勤怠管理システムがこれだ。 今回紹介するオープンソース・ソフトウェアはkumquat、Webベースの勤怠管理システムだ。 こういうアプリケーションは大好きだ。ログインすると、まさに勤怠管理の機能しかない。時間は予め表示されており、後は理由を入れてボタンを押せば良いだけだ。確認画面があるのが一点、注意が必要だ。 勤怠管理表 退社時間も同様で、入社していれば次の時刻入力は自動的に退社時刻の入力になる。理由を入れてボタンを押せば良いだけ、ごくごくシンプルなインタフェースだ。入力されてたまったデータは次ごとに一覧表示され、累積時刻が表示され
社内でも立てられるGitHubクローン·GitLab MOONGIFT
GitLabはRuby/Ruby on Railsで作られたGitHubクローンです。 GitHubは有料でプライベートリポジトリが持てますが、それでもセキュリティ上の理由でリポジトリを外だしできないケースはあるかと思います。そんなときに使ってみたいのがGitLab、GitHubクローンです。 ログイン必須になります。 ログインした後の画面です。登録済のプロジェクトが一覧表示されます。 一つのプロジェクトを閲覧しています。ソースツリーが出ます。ソースツリーは右へ右へスライドして表示されます。GitHubに似ています。 ソースコードハイライターも内蔵されています。rawでファイルをダウンロードできます。 タグやブランチを切り替えることもできます。 コミット履歴一覧です。 コミット詳細ではDiffが確認できます。 コミットに対するコメントも確認できます。 チーム設定です。複数人でのコラボレーシ
jQueryで作られた本格的表計算ソフトウェア「jQuery.sheet」 - MOONGIFT|オープンソース・ソフトウェア紹介を軸としたITエンジニア、Webデザイナー向けブログ
jQuery.sheetはjQueryで作られたWebベースの表計算ソフトウェアです。 業務システムなどではWeb上にテーブルを表示するというケースがよくあります。さらに一歩進んで表計算のように集計したり並び替えたりしたいという無茶な要望が出るかも知れません。そんな時に使ってみたいのがjQuery.sheetです。jQuery製の表計算ソフトウェアです。 カラムはもちろん、グラフの表示までできてしまう本格的な表計算ソフトウェアです。 最大化表示。セルの値を参照することもできます。 テキストだけではなくラジオボタン等も使えます。 関数も多彩に用意されています。 編集しているところ。 文字装飾を変更します。メニューから選択できます。 HYPERLINKはその名の通りリンクを埋め込みます。 データにはHTML/XML/JSONが使えます。エクスポートも各フォーマット向けに可能です。 JavaSc
これを待っていた。マインドマップ＋GTD·MindOnTrack MOONGIFT
MindOnTrackはマインドマップとタスク管理（GTD）が一つになったソフトウェア。 MindOnTrackはWindows/Linux用のフリーウェア（Mac OSX向けもリリース予定）。日々の業務やプライベートな予定など、うまく順番にやりくりするためにはTodo管理が欠かせない。そしてタスクというのは総じて自分の周囲を整理した時にも現れやすい。 タスク 単純に割り当てられているタスク以外にも、プロジェクトや業務に関して見直してみると新しいすべきことが見つかったりするのはよくあることだ。そこで考えをまとめつつタスクに落とし込めるソフトウェアとしてMindOnTrackを紹介しよう。 MindOnTrackはマインドマップとタスク管理が一緒になったソフトウェアだ。言わば作業を分類ごとにドリルダウンしながらまとめ、それに日付をつけてタスク化していくのだ。さらにGTDにも則っているので、プ
これでVisioを使ったネットワーク図作成からおさらば？運用まで管理できる·Prime MOONGIFT
Primeはハードウェア構成やソフトウェアも含めたネットワーク図を作成するソフトウェア。 PrimeはJava製のオープンソース・ソフトウェア。システム開発を行う際にデスクトップやルータ、サーバ等の配置を図に起こす時は多い。そういう時にドローソフトウェアとしてMS Visioを使うケースが多いのではないだろうか。他にも類似ソフトウェアはあるが、アイコンがどうも好きではなく結局Visioを使っていた。 描画中 しかしネットワーク図を描くためだけにMS Visioを購入するのではあまりにも勿体ない。デザインに優れたソフトウェアがあればそれを使えるはずだ。そこでネットワーク図を描く際にお勧めしたいのがPrimeだ。 Primeはデスクトップやサーバ、ネットワーク機器を配置してそれらを線で結んでネットワーク図を作成するソフトウェアだ。端末間の接続法をRJ45またはUSBから選べるなど芸が細かい。さ
高価なソフトウェアを買う前に。フローチャートやUMLクラス図などを描くのに使えるドローソフトウェア·Diagram Designer MOONGIFT
Diagram DesignerはフローチャートやUMLのクラス図を描くのに使えるドローソフトウェア。 Diagram DesignerはWindows用のオープンソース・ソフトウェア。システムの設計をする時には必ず図が必要になる。フローチャートを書いたり、UMLを書いたりネットワーク図、ER図を書いたりする。その時には何らかのドローソフトウェアが必要だ。 描いている所 最も有名なものとしてはMS Visioがある。だが高い。ちょっとした図を書くならもっと安価なツールが良いと思ってしまう。Diaもあるが、なかなかパーツがうまく使えなかったりする。そこで今回紹介するのはDiagram Designerだ。 Diagram DesignerはWindows用のソフトウェアで、名前の通りダイアグラムを作成するためのソフトウェアだ。左側に図、右側にパーツが並ぶ。フローチャート向けの図が殆どだが、う
あなたのWebアプリケーションは安全か。Google製のセキュリティチェッカー·Skipfish MOONGIFT
SkipfishはSQLインジェクションをはじめWeb向けの脆弱性を発見するソフトウェア。 SkipfishはGoogle製のオープンソース・ソフトウェア。2011年になってセキュリティインシデント関係の話題が飛び交っている。特に大きいのはソニーだろう。あそこまでの規模は相当珍しいが、何も対岸の火事という訳ではない。 オプション セキュリティホールを狙うのは人間に限らない。日々クローラーがWebサイトにアクセスしてセキュリティホールを狙っているのだ。狙われる前にSkipfishを使って自主的にチェックしてみよう。 SkipfishはGoogleが開発したセキュリティチェックソフトウェアだ。ターミナルで動作するソフトウェアで、指定したURLに対してSQLインジェクションやXSSなどWebアプリケーションが狙われやすい脆弱性をついてくる。結果はHTMLベースのレポートとして出力される。 結果は
これは便利！ExcelやWordのツールバーからTortoiseSVNを使う·msofficesvn MOONGIFT
msofficesvnはMS OfficeとTortoiseSVNを連携させるソフトウェア。 msofficesvnはWindows/MS Office用のオープンソース・ソフトウェア。プログラマーやWebデザイナーならばSubversionをはじめとするバージョン管理システムに一度でも触れるとその便利さで手放せなくなるはずだ。バージョンを戻したり、比較したりというのはとても便利だ。 Excel そんなバージョン管理システムを他のソフトウェアでも使いたいと思ったことはないだろうか。特にオフィスで活躍するMS Officeだ。そのためのソフトウェアがmsofficesvnだ。 msofficesvnはMS Office 97〜2007で使える。メニューに常駐するソフトウェアで、ExcelまたはWordで利用できる。インストールするとメニューにSubversionという項目が追加される。これで
触れる価値あり。Google Chromeをプログラミングエディタ化する·SourceKit MOONGIFT
SourceKitはGoogle Chrome内で動作するテキストエディタ。Dropbox APIを使っている。 SourceKitはGoogle Chrome向けのフリーウェア（ソースコードは公開されている）。なかなかWebアプリケーション化しないものの筆頭として考えられてきたのがテキストエディタだ。特にプログラマ向けのエディタになると手になじんでいるかどうかの問題が大きく、なかなか本格化しなかった。 まさにエディタ 確かにWebベースで開発するということに大きなメリットは感じられなかったのは確かだ。だがSourceKitを見たら、その考えが変わってしまいそうだ。 SourceKitはGoogle Chromeの機能拡張として提供される。左側にファイルツリー、右側に編集画面が表示される。開発者向きに各言語向けのハイライトに対応している。さらにテーマも幾つも用意されており自分好みの配色を選
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
