Mattermost - Go製のSlack代替サーバ MOONGIFT
MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました Slackが急成長しています。多くの企業でSlackが使われており、遠隔地（または社内であっても）のコミュニケーションに役立てられています。しかし企業によってはセキュリティ上の理由などで導入できないこともあります。 そんな企業が使ってみたいのはSlackクローンになるでしょう。今回はDockerを使って簡単に導入できるMattermostを紹介します。 Mattermostの使い方 既にDockerが入っているならば、以下のコマンドを実行するだけです。 docker run --name mattermost-dev -d --publish 8065:80 mattermost/platform:helium 後はサーバにアクセスするだけですが、サブドメインを使うのでhostsな
Shop.js - Eコマース用のUIコンポーネント MOONGIFT
Webデザインフレームワークは多数ありますが、多機能なものほど縛りが強く、自分の思うようにデザインできないことがあります。そんな中、最近ではWeb Componentという概念によって、一つのコンポーネント単位でのUIも出てきています。 今回紹介するShop.jsはECサイトで使われる要素を小さなUIコンポーネントとしてまとめたライブラリになります。 Shop.jsの使い方 cartというタグがこのように表示されます。 洋服の数量を変えれば金額もアップデートされます。 checkoutタグで決済UIが出ます。 横から出てくるタイプのカート。 モーダル型の決済UI。 Shop.jsを使うことで商品一覧やカート、決済機能だけを手軽に組み込めるようになります。大量の商品がある中では利用が難しそうですが、数点の商品だけを厳選して扱うショップであれば良さそうです。 Shop.jsはHTML5/Jav
Gixy - nginxの設定ファイルを静的解析して改善提案
MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました HTTPサーバとしてnginxを使っているケースは多いかと思います。しかし設定に関する情報はまだまだ多くはなく、動くように設定はしても、それがベストなのかどうか判断できない方も多いのではないでしょうか。 そんな方にお勧めなのがGixyです。nginxの設定ファイルを解析して改善案を提示してくれます。 Gixyの使い方 Gixyのインストールは pip でできます。 pip install gixy 後はnginxの設定ファイルを指定するだけです。 $ gixy /path/to/nginx.conf ==================== Results =================== Problem: [host_spoofing] The proxied Host h
Dropbox Paper - DropboxとGitを組み合わせた運用フローに
MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました 同名のDropboxが提供するサービスがあるのでご注意を。 Dropboxは便利な仕組みですが、企業によっては導入できないという話も聞かれます。自分が使っているのに上司が使ってくれないというケースもあるでしょう。自分だけでもバックアップ目的でDropboxを使いたいと考えている人は多いはずです。 そんな方に使ってみて欲しいのがDropbox Paperです。GitとDropboxを組み合わせたワークフローを簡単に実現します。 Dropbox Paperの使い方 最初に初期化をします。これはローカルのディレクトリをDropboxの中にコピーしてくれます。なお、ディレクトリ自体があらかじめGit管理されている必要があります。 dropbox-paper init ~/Dropbox/C
RSS Bridge - 各種WebサービスをRSS/Atom/JSONに変換 MOONGIFT
ブログをはじめ、多くのWebサイトでRSS/Atomフィードを提供しています。しかし時代の流れからなのか、新しいサイトではそもそも提供していないというケースもあるようです。これでは購読はもちろん、マッシュアップ的な面白さもありません。 そこで使ってみたいのがRSS Bridgeです。各種WebサイトをAtom/JSON化してくれるソフトウェアです。 RSS Bridgeの使い方 メイン画面です。対応サービスが表示されています。 例えばYouTubeの場合。ユーザ名や検索などの結果を変換して表示できます。 JSON化した例です。 Googleの検索結果も。 Twitterの検索結果をHTMLに。 RSS Bridgeは多数のサービスに対応していますが、よく使いそうなものとしてはGoogle検索、Google+、Facebook、Twitter、YouTubeになるでしょうか。これらのデータを
Hyperform - Webフォームの入力チェックライブラリ
MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました Webフォームにおける入力検証の仕組みは大事です。一度サーバに送信してからエラーを返す方式はユーザのストレスも大きくお勧めしません。サーバ側での入力チェックは必要ですが、ユーザビリティのためにWebブラウザ側でも入力チェックをしましょう。 今回はそんな入力チェックを提供するJavaScriptライブラリ、Hyperformを紹介します。 Hyperformの使い方 利用例です。エラーメッセージをテキストボックスの下に表示します。 パスワードのように二つの入力欄に応じたケースもサポートしています。 チェックボックスが有効な場合だけ入力チェックが行われます。 URLやメールアドレス、時間などのフォーマットに合わせた入力チェックもできます。 エラーメッセージはフォームの上に出すこともでき
Pure CSS modal - CSSオンリーなモーダル
MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました モーダルウィンドウを表示するWebサービスは多々あります。そうした時にはJavaScriptでイベントをフックして、モーダルコンテンツを表示するというものが多いかと思います。つまりJavaScriptがオフになると使えない機能です。 そこで使ってみたいのがPure CSS modalです。なんとスタイルシートだけで実現されているモーダルウィンドウです。 Pure CSS modalの使い方 モーダル表示の一例です。 フルスクリーン表示もできます。 実行例です。表示される際のアニメーションもサポートされています。 スタイルシートだけ、ということを聞けばピンと来るでしょうが、実体はチェックボックスやラジオボタンです。そのchecked指定によってモーダルの表示と非表示を切り替えています
excel2js - ExcelシートをWeb化
MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました 日本にはExcel職人と呼ばれる人たちがたくさんいます。彼らにかかればどんなドキュメントであってもExcelで作られ、多くの業務システムがExcel VBAを駆使して作られます。 今回はその最高峰とも言える、Excelで作るWebアプリケーションを紹介します。それがexcel2jsです。 excel2jsの使い方 excel2jsはExcelで作られたシートをHTML/JavaScriptにしてくれるソフトウェアです。下の画像は元ファイルになるExcelファイルです。式も埋め込まれています。 それがこんな感じにWebブラウザ上で動くようになります。 Excelで動くものになりますので、サーバサイドと連携するなどというのは難しいでしょう。しかしちょっとした計算処理を行うものであればe
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を使ってデスクトップアプリを作ることがで
UI Tiles·Webサイト全体の画面遷移設計に使えるデザイン集 MOONGIFT
Webサイトを開発する際に使われるのが画面遷移を表現するフローチャートです。例えばコマースであればトップページから商品一覧、カテゴリ一覧や商品のピックアップなどの遷移が考えられます。 深くなってしまう場所がないか確認したり、ユーザ動線が正しく描けているかどうか確認するのに便利です。UI Tilesはそんなフローチャートを作成するのに便利なデザイン集です。 UI Tilesの使い方 UI TilesはPNGの他、PhotoshopやIllustrator形式でファイルが配布されています。 PNG版。画面のモックがたくさんあります。 それぞれ小さいながらも特徴があります。 動画プレーヤ、ポートフォリオページもあります。 PSDはデモも用意されています。 デザイン一覧。 Illustratorも同様です。 UI Tilesを使うと、これまでは単なる四角い枠に対してトップページなどとラベルを貼って
Slate - Web APIのドキュメントを書く際にどうぞ！ MOONGIFT
Webサービスを提供していたり、スマートフォンアプリと連携するサーバを開発していたりすると必要になるのがWeb APIのドキュメントです。HTTPメソッド、パラメータ、返却値などが分かりやすく書かれている必要があります。 どういったドキュメントが読みやすいかは悩みどころですが、Slateは3ペインの構成になっていて見やすいのではないかと思います。ぜひご覧ください。 Slateの使い方 こちらがデモです。左が機能の一覧、中央が説明、右が実際のコードになります。 コードはShell、Ruby、Pythonで書かれています。 エラー時の内容も細かく書かれています。 Slateは一つのMarkdownファイルから生成されています。そのため単純なHTMLとして可読可能で、それをSlateを使って3ペインのより可読性高い形式にした訳です。Markdownで書く際に予めSlateの記法に沿って書いておく
HTML5-Packer – HTML5アプリケーションを1ファイルにパッキング
MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました Webアプリケーションはブラウザさえあればどの環境でも動かせる便利な仕組みですが、大きな欠点としてはネットワークがないといけないというのがあります。オフラインでも対応しようと思うとダウンロードと設定がとても面倒です。 その点、バイナリの実行ファイルはダウンロードしてすぐに実行できます。同じような仕組みをWebアプリケーションでも可能にするのがHTML5-Packerです。 HTML5-Packerのインストール まずはインストールします。npmでインストールできます。 $ npm install html5-packer --save-dev これで準備は完了です。 HTML5-Packerの使い方 ローカルにあるWebアプリケーションをパッキングします。この時、gruntと組み合
Pretty Diff - Gitの差分表示をGitHub調にして見やすく整形
MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました これはGitを使っているならぜひ入れておきたいツールです。 GitHubのコード差分表示はとても見やすくて、一旦あれに慣れてしまうとターミナルで出力されるDiffが非常に見づらく感じるようになります。しかしプロジェクトによってはGitHubを使えないというケースもあるでしょう。 そこで使ってみたいのがPretty Diffです。任意のGitリポジトリでGitHub風の差分表示を実現してくれるライブラリです。 Pretty Diffのインストール インストールはnpmを使って行えます。 $ npm install -g pretty-diff これで準備は完了です。 Pretty Diffの使い方 使っているGitリポジトリに移動します。例えば最後のコミットとの比較はこんな感じです。
Bootstrap Admin Theme - Bootstrap3に対応した管理画面テンプレート
これは知っておいて損はないでしょう！ Bootstrapの便利な使いどころとして管理画面があります。管理画面は限られた関係者しか使いませんのでBootstrap臭がしても気にすることはありません。それなりの表示がすぐに実現できるのは使い勝手を向上します。 しかしそんな適当な範囲を超えて実用性のある管理画面を実現できるBootstrapテンプレートがBootstrap Admin Themeです。Bootstarp 3系に対応していますので最新のウィジェットもばりばり使えるでしょう。 Bootstrap Admin Themeの主なページとしては、 ログイン ダッシュボード カレンダー グラフ ボタン/アイコン WYSIWYGエディタ フォーム/ウィザード テーブル その他ウィジェット が用意されています。これだけあれば後は組み合わせるだけで（Bootstrap本来の機能も使いつつ）リッチな
gdata-backup - コマンドラインでGoogle Driveバックアップ！ MOONGIFT
ストレージとしてのGoogle Driveは使っていなくともGoogleドキュメントやスプレッドシートは使っているという人は多いのではないかと思います（筆者もそうです）。しかしそうなるとGoogle上にあるデータが時にバックアップしたくなります。 そこで今回はGoogle Driveのデータをバックアップしてくれるgdata-backupを紹介します。コマンドラインで使えるのでCronで定期実行しても良いかも知れません。 gdata-backupは認証としてimap-backupを使っているとのことで、まずはそちらで設定を行います。 $ imap-backup setup ちなみに2段階認証を有効にしている場合はアプリケーション固有のパスワードを生成する必要があります。 設定処理を行うとこんな感じになります。 設定が終われば後はgdata-backupを実行するだけです。 $ gdata-
IFTTTで使っているiOS用キーフレームアニメーションライブラリ·Jazz Hands MOONGIFT
Jazz HandsはiOS用、MIT Licenseのオープンソース・ソフトウェアです。 iOSアプリの中でシンプルなアニメーションを実現したいと思ったらチェックして欲しいのがJazz Handsです。IFTTTで実際に使われているキーフレームベースのアニメーションライブラリです。 最初の場面。 スワイプ操作でアニメーションしていきます。 デモ動画です。パーツごとにアニメーションしているのが分かるかと思います。 Jazz Handsではアニメーションさせたいビューを作成し、後はキーフレームを追加していけば良いだけです。変化させるフレーム数も指定できますので、二つを異なる動きで表現したりするとよりダイナミックな感じが出て格好いいと思います。 ユーザ操作イベントによるアニメーション実行はもちろんのこと、チュートリアルで自動で動いていくアニメーションとして使っても面白いと思います。スマートフォ
Gumby - Bootstrapの強力なライバルになるか！？シンプルかつ強力なCSS3フレームワーク MOONGIFT
CSS3フレームワークは数多くなってきたのでその特徴をちゃんと掴んでおかないといけないですね。 GumbyはSassを使ったCSS3フレームワークです。他のフレームワークと同じようにレスポンシブ、モバイルフレンドリーになっています。その特徴を見ていきましょう。 まずデスクトップからです。 ヘッダーバー。フラットだったり、幅が固定だったりと色々な形式が想定されています。 タイポグラフィ。可読性高いです。 リストだけでも黒丸、白丸、ドット、数字など多数用意されています。さらに定義リストまで！ ボタン。サイズ、色、形が様々です。片方だけ丸い、なんて便利そうですね。 インジケーターやラベル、アラート。こういうのもよく使いますよね。 フォーム。基本的にplaceholderを使った表示になっているようです。 テーブル。角丸サポートです。 タブ。幅が設定できます。 縦のタブもあります。 ドロワー。クリ
iOS 7アプリを開発するのに必携のワイヤーフレーム·iOS 7 Wireframe Kit MOONGIFT
iOS 7 Wireframe KitはCreative Commonsのオープンソース・ソフトウェアです。 iOS 7の正式リリースは間もなくと思われますが、既に新しいアプリ開発においてはiOS 7のUIを模して行われていると思われます。そんな中で必要なのがUIを決める素材集です。今回はIllustratorベースのiOS 7 Wireframe Kitを紹介します。 こちらがファイル一覧。Illustrator、PDF、PNG、Omni Graffle、Sketch用のファイルとなっています。 その内容。iOS 7らしい雰囲気のコンポーネントが多数作成されています。 こちらはIllustrator版。 iOS 7 Wireframe Kitではデフォルトのオブジェクトをデザインしていますので、そういったパーツを組み合わせて作るアプリに対しては有効ではないでしょうか。細かくカスタマイズす
JSONを見やすく整形、加工·HULK MOONGIFT
HULKはHTML/JavaScript製、MIT Licenseのオープンソース・ソフトウェアです。 JSONを使ってWebアプリケーションを開発する事が増えてきましたが、そのデータは一行にまとめられる場合が多く、人の眼では確認しづらいのが難点です。そこで使ってみたいのがHULK、WebベースのJSONエディターです。 上にあるのがデモのJSONです。大抵はこれが一行で出力されるでしょう。下にあるのがHULKを使った表示です。 データがテキストボックスなどを使って表示されているのが分かるでしょうか。長文は自動的にテキストエリアになっています。 項目が多いとデフォルトでは折り畳まれた状態になります。ボタンを押して伸張できます。 新しい項目を追加すると、上に表示されているJSONが自動的に更新されます。 全て折り畳むとこのようにコンパクトになります。 HULKはあくまでもサンプルなので、任意
iOSアプリのデザインをスタイルシートで行う凄い技術·Pixate MOONGIFT
PixateはMac OSX用のソフトウェアです。 iOSアプリのデザインはXcodeを使って行うのが一般的です。しかしWebデザイナーや開発者にとっては思い通りにいかなくてやきもきするときがあるかも知れません。そこで注目したいのがPixateです。何とスタイルシートと同じ記述で画面を作成できます。増資し、フリーになりました。 ボタンのデザイン。確かにスタイルシート調です。 記述を変えればダイナミックに描画が変わるのも特徴です。 SVGの表示も行えます。 さらにタップすると線だけに。 こちらはプレイグラウンド。様々な表示例があります。 ラベル。テキストエリアの部分は変更できます。 こんな感じにダイナミックに文字サイズを変更できます。 地図のポインター部分の大きさを変更。 本当に数多くのデモがあります。 検索ボックス。 セクション付きのテーブルビュー。 様々なテキストビュー。 Pixateは
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
