docker-lambda - Dockerを使ったAWS Lambdaクローン
MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました AWS Lambdaを使えばちょっとしたコードを実行して即座に終わるといった処理が簡単に作れるようになります。Webサービスのように恒常的に使うものではないけれども（API Gatewayを合わせればできますが）、コールしたらすぐに実行できるという手軽さがウリです。 そんなLambdaの開発時に使えるソフトウェアがdocker-lambdaです。Lambda風に実行できるDockerコンテナです。 docker-lambdaの使い方 例えばこんな感じのコードを書きます。 // Just a test lambda, run with: // docker run -v "$PWD":/var/task lambci/lambda exports.handler = function
React Desktop - Reactを使ってMac OSX/Windowsアプリを開発 MOONGIFT
Reactへの注目がどんどん高まっています。Webのビューライブラリという枠を越えて、React Nativeによってスマートフォンアプリ開発にも使えるようになっています。特にコンセプトであるLearn once, run everywhere（一度覚えればどこでも動く）が素晴らしい考えと言えます。 そんなReactを次のターゲットとしてデスクトップでも動くようにしたのがReact Desktopです。Mac OSX/Windowsに対応しています。 React Desktopの使い方 React Desktopのデモです。Webでも表示できるのがすごいです。 コントロールもちゃんと動きます。 そしてWindows 10でも使えます。 フォームもまさにWindows 10といった感じです。 メニューを隠すこともできます。 ElectronはHTML5を使ってデスクトップアプリを作ることがで
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版
Dynamics.js - 物理系アニメーションライブラリ MOONGIFT
アニメーションは何の意味もなく動かしても面白くありません。一回転させたり、ひっくり返ったりと現実世界を投影するような動きは目を引きやすく、表現としても分かりやすいです。 そこで使ってみたいのがDynamics.jsです。物理系の動きを再現するJavaScript/CSSアニメーションライブラリになります。 Dynamics.jsの使い方 Dynamics.jsには多数のパターンで動きが作られています。 スプリングという名前のアニメーションです。 バウンド。 強い重力。 この他にもいくつものパターンでアニメーションが作られています。さらにパラメータを変更することで動きを調整できるようになっています。Dynamics.jsを使ってリアルな物体感を感じさせるアニメーションを実現してください。 Dynamics.jsはJavaScript製、MIT Licenseのオープンソース・ソフトウェアです
Gentallela·多くのデザインパターンに対応したBootstrap製の管理画面テンプレート MOONGIFT
Bootstrapを使った管理画面テンプレートはたくさんあります。今回もその一つ、Gentallelaを紹介したいと思います。多くのテンプレートをもち、多数のチャートライブラリとも連携するようになっています。 スクリーンショット多めで紹介します。ぜひご覧ください。 Gentallelaの使い方 ダッシュボード。グラフが多数使われています。 別版。こちらは折れ線グラフです。 こちらは曲線。 フォーム。 さらに拡張版フォーム。 カレンダーやスライダー。 画像の切り抜きなんて機能も。 フォームバリデーション。 ウィザード。 画像アップロードフォーム。ドラッグ&ドロップ対応です。 フォームボタン。 基本的な要素。 ギャラリー。 タイポグラフィ。 アイコン。Font Awesomeです。 こちらはGlyphiconsです。 その他のウィジェット。 請求書。 メーラーっぽい形。 カレンダー。 テーブル
Primer - GitHub製。みんなで使えるデザインフレームワーク MOONGIFT
企業やプロジェクトによってデザインガイドラインは自ずと必要になってきます。それが社で働くデザイナーの共通認識になる訳ですが、例えばFacebookアプリを作る際にはボタンやデザインをFacebookっぽくしたくなるのではないでしょうか。つまりデザインガイドラインは社内だけでなく社外の人にとっても有益なのです。 そこで登場したのがPrimerです。PrimerはGitHubが作り、使っているデザインガイドラインになります。 Primerの使い方 スクリーンショットを多めで紹介します。まずはグリッド。 ヘッダー。h1〜6まで対応。 テキスト。若干小さめ？ インラインテキストの装飾。 ボタン。ここはGitHubっぽいですね。 ボタングループ。こういうのもGitHubで使われていますよね。 フォーム。シンプルです。 フォームグループ。縦に並べる時に使えます。 メニュー。アイコンはオプションです。
MUI·HTMLメールにも対応した軽量マテリアルデザインテンプレート MOONGIFT
マテリアルデザインを実践していきたいと思っても、デザインとアニメーションを理路整然と実装するというのはとても難しいことです。そのためお勧めの方法としては既に幾つかあるフレームワークを導入することです。 デザインはもちろん、アニメーションが自分の好き好きに合うか、これはフレームワークを選定する上で大きな要素になってきそうです。今回紹介するMUIについてはどうでしょうか。 MUIの使い方 ボタン。 大きさや浮かび上がり方を指定できます。 フォーム。 グリッドシステム。 タイポグラフィ。 テキストを白くした場合。 アクセントテキスト。 ドロップダウン。 アプリバー。アプリのviewportに合わせて幅を自動調整してくれます。 テーブル。 分割表示。 素のHTMLでセマンティックな表示も。addr/emなどが使えます。 リスト。 レスポンシブについて。1200/992/768で分かれています。 M
DevOOPS - 多数のパターンを用意したBootstrap管理画面
デザインでシステムの品質が決まるわけではありません。しかし、それでも全くデザインされていないシステムよりも見た目が整っている方が安心して使えるでしょう。それは管理画面でも同様です。 通常、管理画面は利用者が限定的なため、デザインが適当になってしまいます。そんな寂しい管理画面もDevOOPSを使えば一気に見た目が向上するでしょう。 DevOOPSの使い方 DevOOPSには多くのテンプレートが用意されています。これらを組み合わせるだけで格好良い管理画面ができあがりそうです。Bootstrapベースなので、カスタマイズもそれほど難しくはないと思います。 DevOOPSはHTML5/JavaScript製、GPL v3のオープンソース・ソフトウェアです。 devoopsme/devoops
Knowledge - 社内で使えるナレッジベース
MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました 社内のナレッジを蓄積するにはどこかに書きためる場所を用意しなければなりません。従来、この手の試みは悉く失敗しており、例えば掲示板であったりWikiであったり、Q&Aなどなかなか動かないと言った問題がありました。 もっとカジュアルにさくさく書ける仕組みが必要なのかも知れません。そこで使ってみたいのがKnowledge、その名の通り、知識を共有するシステムです。 Knowledgeの使い方 Knowledgeの特徴としては、記法にMarkdownを利用、記事のタイトル、本文を全文検索できる、添付ファイル（検索対応）、公開範囲の設定があります。社内で立てて、個々人が好きな時にナレッジを共有したり、議事録を登録したりと言った使い方が便利そうです。 KnowledgeはJava製、Apach
TouchstoneJS·ハイブリッドアプリ開発に使いたいUIフレームワーク MOONGIFT
WebブラウザでネイティブライクなUIを作成するフレームワークはデザインのトレンドに合わせて年々変わってきています。テーマで最新のUIに対応できる場合もありますが、HTML5/JavaScript/CSS3の進化も考えると、常にトレンドに乗っておくのが良さそうです。 TouchstoneJSは最新のUIフレームワークで、ハイブリッドアプリを作るのに最適なフレームワークとなっています。ハイブリッドアプリ開発にぜひ使ってください。 TouchstoneJSの使い方 TouchstoneJSはまだベータ版で全機能は提供されていません。なので執筆時点での機能を紹介します。 一覧。グループリストです。 ヘッダーバーの色変更。 検索付きのリスト。 アラートバー。 フッターバー。 シンプルリスト。 詳細表示。 サムネイル付きリスト。 トグル。 フォーム。 パスコード入力。 入力したパスコードが表示できま
Materialize - マテリアルデザインのためのCSSフレームワーク MOONGIFT
レスポンシブでWebデザインを組むのは当たり前、今のトレンドはマテリアルデザインにあるという時代になってきました。フラットUIを踏襲しつつ、アニメーションを効果的に使うことでさらにユーザビリティ高いデザインを可能にします。 主にモバイルアプリ用に使われていますが、Webデザインにおいても十分利用が可能です。今回はマテリアルデザインを実現するスタイルシートフレームワーク、Materializeを紹介します。 Materializeの使い方 今回はスクリーンショット多めに紹介します。 Materializeはレスポンシブかつマテリアルデザインのフレームワークになっています。開発の高速化、ユーザ体験重視、ドキュメントとサンプルを多めにして学習コストを低くするといった特徴があります。 MaterializeはHTML5/JavaScript/CSS3製のオープンソース・ソフトウェア（MIT Lic
Alasql.js - オンメモリで動作するJavaScriptデータベース MOONGIFT
JavaScriptを活用したWebアプリケーションを開発している際に、一時的に保存したいデータをどのように扱うかは大きな問題です。何となく変数や配列、ハッシュに保存してしまいがちですが、そのデータの取り出しや更新が面倒だったりします。 そこで使ってみたいのがAlasql.jsです。JavaScriptだけで作られたクライアントサイド向けのSQLデータベースになります。 Alasql.jsの使い方 使い方の例。データを配列で放り込んで、SQLで取り出せます。 デーブルの作成を含めてSQLが書けます。 データはlocalStrageに保存することもできるので、再読込時に復元も可能です。 Alasql.jsはHTML5仕様の中で検討されていたWeb SQLとは異なる実装で、オンメモリで動きます。高速で動作し、かつデータはlocalStrageに保存しておくこともできるので容量は小さいながらも永
Timesheet.js - ガントチャートにも使えそうなHTML5/CSS3製のタイムシートグラフ MOONGIFT
世の中の大抵の物事は時間軸に沿って進められます。歴史はもちろんのこと、プロジェクト管理においてもガントチャートのような時間軸のグラフを使って表現されます。過去の振り返りも未来の予測も時間がキーになってきます。 そういったデータを表現できるライブラリがTimesheet.jsです。特徴的なのはCSS3で作成されている点にあるでしょう。 Timesheet.jsの使い方 こちらが表示例になります。細いバーでスタイリッシュですよね。 JavaScriptは次のようになります。 new Timesheet('timesheet', 2002, 2013, [ ['2002', '09/2002', 'A freaking awesome time', 'lorem'], ['06/2002', '09/2003', 'Some great memories', 'ipsum'], : ['09/2
Famo.us·WebGL/Canvasを使って高度な表現を可能にするJavaScriptフレームワーク MOONGIFT
スマートフォンにおいてWebかネイティブかと言った議論は常にされています。ネイティブアプリは高度なUI/UXを提供する一方、インストールの手間が否めません。Webは速度やUXにおいて見劣りがします。 しかしWeb（HTML5）の進化は止まりません。ついにここまで！というフレームワークがFamo.usです。3Dを備えたレンダーを行うJavaScriptフレームワークになります。 Famo.usの使い方 たくさんのデモが登録されていますので見ていきましょう。 写真と画像の組み合わせ。左右から表示されるアニメーションもあります。 スクロールパララックスエフェクトのデモ。 アニメーションのデモ。 カレンダーの日付を選択するとスケジュールが開きます。アニメーションがスムーズです。 スライドして表示される写真のデモです。 ページ送りのデモ。 天気アプリデモ。ベクター調の表示がいいですね。 タスク管理。
multiscroll.js - パララックスとはまた違うスクロールエフェクト MOONGIFT
パララックスエフェクトに代表されるようにスクロールで新しい視覚効果を生み出す試みがされています。単純な上下のスクロールでは得られない大きなインパクトを訪問者に与えることができます。 その新しい手法として紹介したいのがmultiscroll.jsです。スクロールによって起こる新しいエフェクトを楽しんでください。 multiscroll.jsの使い方 何はともあれ動画を見るのが一番分かりやすいかと思います。 いかがでしょう。スクロールすると上下から画像がスクロールしてきて合体します。パララックスとはまた違うインパクトがありますよね。 最初の表示はこんな感じ。 スクロールするとコンテンツが上下から表示されてきます。 視覚効果は慣れてしまうと思ったインパクトを与えづらくなります。パララックスイフェクトも最近では印象が残りづらくなっているかも知れません。そこで新しい視覚効果を考えてみるのは面白いと思
Webアプリケーションの画面をさくさく作ろう。UIフレームワーク特集 MOONGIFT
今回はWebアプリケーションの画面作成に関する話です。かつて業務システムというのはエンジニア自身が画面を作ってロジックを実装して提供していました。UIがただコンポーネントを貼付ける程度だったからです。 しかしWebアプリケーションの時代になって、UIの制作が難しくなってきています。デザインの自由度が高いためです。しかし今後さらにWebアプリケーションが活用されていく中ではエンジニアもそれなりの画面を素早く開発できるようになっていかないといけない時代になっています。 そこで今回はUIフレームワーク、多彩なコンポーネントを備えたデザインフレームワークをまとめて紹介します。 iPhone/Android/Windows Phone対応のモバイルWebアプリフレームワーク「ChocolateChip」 モバイルWebサイトをネイティブ風にするUIライブラリは昔から多数存在しますが、今回はその最新版
AdminLTE·ここまで多ければ何でもできそう。多機能なBootstrapベースの管理画面テンプレート MOONGIFT
これで十分でしょ！ Bootstrapで作る管理画面は相当増えてきているようです。確かに一般ユーザ向けに提供するとBootstrap臭が出てしまいますが、管理画面であれば問題はないですよね。 ということで今回は新しいBootstrap製の管理画面テンプレートAdminLTEを紹介します。高度なウィジェットが数多く提供されていますので使い勝手良さそうですよ。 AdminLTEの画面 今回もスクリーンショット多めで紹介します。 ダッシュボード。この時点でかなりリッチ。 ボックス。これだけ多彩なパターンがあると言うのも凄いですね。 左端にはちょっとした設定を表示させています。 背景色を変えるだけでも随分印象が違います。 グラフ。 こちらもグラフ。 外部ライブラリもそつなく使いこなしています。 スパークラインも！ アラート。ちょっと飛び出しているのがいい感じです。 アイコン。 ボタン。フラット系で
Server Monitoring Dashboard - サーバ管理画面に使えるBootstrapテンプレート
MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました サーバ管理者と言えばコンソールを叩いてサーバのステータスをチェックして…というのは過去の話なのかも知れません。何台ものサーバ、常時モニタリングを考えたならばサーバ管理用ダッシュボードの存在は重要です。 そこで自作のダッシュボードを作成する際にテンプレートにできそうなのがServer Monitoring Dashboardです。すっきりとしたUIで見やすいサーバの状況管理ができそうです。 1つのデータ表示、テーブルでの一覧表示、各ステータス別のリフレッシュボタン、ページネーションなど概ね必要そうな機能が揃っています。後はデータを蓄積できればグラフにしても良さそうです。 このテンプレートはサーバ用ですが、多少変更すればサービス向けの独自ステータス監視にも使えるかと思います。テンプレー
シンプルで美しいnode製のブログエンジン·Ghost MOONGIFT
Ghostはnode/JavaScript製のオープンソース・ソフトウェア（MIT License）です。 今はソーシャルの時代であえてブログを書く人は少なくなっています。確かにソーシャルに投稿するのに比べると幾分面倒な感じがします。しかしシンプルなブログであればきっと使いたくなるはずです。それがGhostです。 最初にサインアップします。 管理画面です。投稿が一覧表示されています。 編集画面です。Markdownで記述します。右側にライブプレビューが表示されます。 コンテンツは自由に追加できます。 日本語も問題ありません。 設定画面です。 プロフィール画面。こちらもすっきりとしたデザインで格好いいですね。 公開画面。デザインはかなりシンプルです。Tumblrのようですね。 記事詳細。こちらもとてもシンプルです。 GhostはKickstarterのキャンペーンで見事に目標を達成して開発さ
Bootstrapベースの管理画面用テンプレート·Charisma MOONGIFT
CharismaはHTML5/JavaScript製のオープンソース・ソフトウェア（Apache Licnese 2.0）です。 Webシステム開発において意外と不遇なのが管理画面です。内部の人が使うものなので適当に作られるケースが多くなります。そこで使ってみたいのがCharismaです。リッチな管理画面をBoostrapをベースに作り上げる事ができます。 ウィジェットがついた、リッチな管理画面です。ここまで恵まれているケースは早々ないでしょう。 ドラッグ&ドロップによる配置変更もサポート。 折り畳んで隠す事もできます。 グリッドは細かくサポートされています。 カレンダー。システム内部のデータをマッピングすると見通しが良くなりそうです。 メンバー一覧。検索やラベルもあって便利そうです。 ギャラリー。サムネイル写真をきれいに並べています。 タイポグラフィ。様々なタグをサポートしているので奇麗
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
