)
Formeo - ドラッグ&ドロップでフォームを作成
MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました お問い合わせや申込時に使われるのがフォームです。柔軟性のあるフォームが欲しいと思っても、なかなか作るのは難しいでしょう。都度開発チームに依頼するのが大変で、Googleフォームなどを頼ってしまいがちです。確かに便利ですが、痒いところに手が届かなかったりもします。 そこで使ってみたいのがフォームビルダーです。今回はWebベースで作れるFormeoを紹介します。 Formeoの使い方 右側にパーツが並んでおり、左側にドラッグ&ドロップしてフォームを作成します。 ラジオボタンの選択肢も編集できます。 見出しなど、HTMLも追加できます。 入力欄をグルーピングできます。 入力条件を細かく指定することもできます。 結果はJSONになります。 後はFormeoが生成するJSONを使ってフォーム
)
semaphore - モダンなUIのAnsible管理
MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました サーバ構成を自動化するのに最もよく使われると思われるのがAnsibleです。タスクを登録しておけば、自動的に実行してくれます。しかし、実行結果が問題なかったかどうかは一覧で見られると便利です。 今回紹介するsemaphoreはそんなAnsible用のモダンな管理画面を提供します。 semaphoreの使い方 ダッシュボードです。結果が一覧されています。 実行ログです。 失敗した場合。 タスクのテンプレート。 新しいタスクの登録。 鍵の管理。 プレイブックのリポジトリ。 ユーザ管理。 semaphoreを使えばAnsibleをWeb上で管理でき、結果を素早く確認できます。個人でAnsibleを運用するなら不要かも知れませんが、チーム体制で運用するならば管理画面は必要でしょう。sema
)
Oh My Git! - ゲームで学ぶGitの使い方
今やGitは開発になくてはならない存在です。普段の開発で使う分には問題ありませんが、コンフリクトやオンライン上のプルリクエストなど、込み入った操作になるとオンラインで調べたりすることでしょう。 そんなGitの使い方をゲーム形式で学べるのがOh My Git!です。 Oh My Git!の使い方 開始画面です。 様々なゲームが用意されています。 ゲーム画面です。 編集します。 コミットしてクリア！ コマンドにはサジェストが出ます。 ビジュアル化されると分かりやすいです。 Oh My Git!ではコマンドを使いながらGitの使い方を学べます。ごくごく基本的な使い方からブランチやマージなど、Gitの使い方を細かく学べます。単純なテキストを見ながら学ぶよりも楽しく覚えられるのではないでしょうか。 Oh My Git!はGDScript製のソフトウェア（Blue Oak Model License）
midori - 背景画像を格好よくアニメーション
MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました 画像をただ表示して終わりでは印象に残りづらいです。しかし、JavaScriptやCSSでちょっとアニメーションさせるだけでもインパクトが大きく違います。さらにエフェクトまで行われれば、さらに印象深くなります。 今回紹介するmidoriはまさにそのためのライブラリになります。画像の切り替え時にアニメーションやエフェクトを行ってくれます。 midoriの使い方 サンプルです。画像が切り替わる際にグリッチが行われているのが分かります。 こちらは標準のアニメーション。エフェクトは自分で選択できます。 midoriは主に画像を背景として適用した場合を想定しています。そして画像が切り替わる際にアニメーションしたり、画像に対するエフェクトが指定できます。スタイリッシュな切り替えを指定することで、
AnyGrids - 高機能なテーブル表示ライブラリ
業務システムで最もよく使うのが一覧でのデータ表示ではないでしょうか。多くはテーブルタグを使って構築しますが、ソートや表示するデータの多様さによって、より多機能を求められます。 今回紹介するAnyGridsはビジネスデータの表示に特化したライブラリとなっています。業務システムでのデータ表示に一役買ってくれそうです。 AnyGridsの使い方 デモです。アイコンやグラフを表示しています。 一つの行を複数段で表示できます。 ページネーション、ソートが備わっています。 グラフはマウスオーバーに対応しています。 AnyGridsの主な機能はページネーション、ソート、子供の行サポート、集計行、グラフ連携となっています。データ自体はJSONの配列で設定します。細かな表示部分を作り込まない分、実装が手軽になりそうです。 AnyGridsはJavaScript製のソフトウェア（ライセンスは独自）です。 An
styled-icons - 13,500種を超えるアイコンフォント集
Webサイトを使いやすくしてくれるアイコンフォントは多数存在します。一つですべて済む場合もあれば、幾つも組み合わせたい場合もあるでしょう。足りない時に、都度追加していくのは面倒です。 そこで使ってみたいのがstyled-iconsです。13,500種類以上のアイコンが使えるようになるライブラリです。 styled-iconsの使い方 一部を紹介します。サービス、ブランド系のアイコン。 ツールバーなどに使えるアイコン。 多種多様に揃っているので、これだけあれば大抵のニーズは満たせるでしょう。 styled-iconsはFont Awesomeをはじめ、IoniconsやMaterial Design、Typiconsなど有名なアイコンフォント集を多数集めています。Reactスタイルのコンポーネントとして提供されており、共通した使い勝手で利用できます。Reactで作る際には導入しておきたいライ
Goodwork - ストレスないプロジェクト管理
MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました システム開発に限りませんが、プロジェクト管理の有無が成否を分けるのは間違いありません。ステータスや新しい要望を適切に管理することで、スムーズな開発を実現できます。 今回紹介するのはLaravel製のシンプルなプロジェクト管理、Goodworkです。 Goodworkの使い方 ホーム画面です。並んでいるのはタスクです。 プロジェクト画面です。 タスク詳細です。 ディスカッションです。フォーラム相当の機能です。 メッセージ機能。 ファイル管理。 操作履歴です。 Goodworkは必要なデータを一元的にまとめておけるようになっています。どちらかというと中小規模のプロジェクトに向きそうです。コミュニケーションを円滑にし、健康的に働けるのを目標と掲げているのがユニークです。 Goodwork
AreaMap - 日本/世界のカラム地図 MOONGIFT
情報の表示として、リストを使った一覧が最もよく使われますが、縦長になってしまうのが難点です。横幅がそれほど必要でない場合、タイル表示にするのも一案です。しかしタイル表示の場合、その並べ方に注意しないとどこにあるのか分かりづらくなります。 今回紹介するAreaMapはその一案として面白そうなソフトウェアです。日本や世界の各国を並べて表示するカラム地図となっています。 AreaMapの使い方 都道府県のカラム地図です。北海道が右上、九州が左下に配置され、地方ごとに色分けされています。 担当地域によって色分けやラベルも変わります。 世界の場合。各国を二文字で表現しています。 白黒版もあります。 さらに県ごと。こちらは福井のデモです。 AreaMapは日本の形状に合わせて都道府県を配置しています。さらに色分けもされているので、全体像が掴みやすくなっています。あいうえお順で並ぶよりも分かりやすそうで
Shards - Bootstrap4に対応したデザインテーマ
Bootstrapは有名なUIデザインフレームワークですが、先日バージョン4が正式にリリースされました。その結果、これまで使われてきた多くのテーマが使えなくなっています。3を使い続けても良いですが、徐々に情報は増えていくのでバージョン4を追いかける方が良いでしょう。 ということでテーマも新しいものに乗り換える必要があります。今回はShardsを紹介します。 Shardsの使い方 カラーリングです。 タイポグラフィ。 アイコンはマテリアルアイコンとFont Awesomeに対応しています。 フォーム。 バリデーションにも対応しています。 スライダー。 日付ピッカー。 カード。 ボタン。 プログレスバー。 ツールチップとアラート。 ナビゲーションバー。 作れるサイトのデザインデモです。 こんなスクロール型のサイトにも。 今風なデザインにも使えます。 Shardsを使えばBootstrap4を適
Scooter - Dropbox社製のデザインフレームワーク
企業でWebサービスを作る際に、決まったデザインフレームワークがあると全体的に統一感が出て、かつデザインに対する悩みが少なくなるのが利点です。その結果、開発がスムーズに進むことでしょう。 今回はその一つ、Scooterを紹介します。作成したのはDropbox社になります。 Scooterの使い方 ScooterはSCSSで作られているので変数やMixinなどが定義されています。実際のデザインについて紹介します。まずはグリッド。 写真と説明。 リスト。 右寄せ。 アラート。 ボタン。 吹き出し付き。 フローティングカード。 フォーム。 アイコン。 こんな感じで文字だけのアイコンも表現できます。 モーダル。 ツールチップ。 ラベル。アイコン付きなのが良い感じ。 塗りつぶしたラベル。 タブ。 カレンダー。 Scooterはデザインはもちろんのこと、カラーリングにもDropboxっぽさが溢れていま
jQuery formBuilder - jQueryによる動的フォームが作成
MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました マーケターの人たちはアンケートフォームを数多く作成します。そんな時に一回一回プログラマに依頼して作成してもらうのでは時間もかかりますし面倒です。 そこで使ってみたいのがjQuery formBuilderです。jQuery formBuilderを使えば自由にフォームが作れるので、後はそのデータを保存できるようにすればいいだけです。 jQuery formBuilderの使い方 jQuery formBuilderのデモサイトです。項目は自由にドラッグ&ドロップできます。 編集で細かいところを直せます。 リストなどは項目を設定できます。 実際のレンダリング結果を確認できます。 jQuery formBuilderは汎用的なフォームができますので、後はそのデータをJSONなりでまとめ
jQuery Rowspanizer - 動的にHTMLテーブルのrowspanを設定
これは良いアイディア！ HTMLでテーブルはよく使われます。検索結果やレポーティングなど活躍の幅は広いです。そしてデータを表示する際に、重複した項目はセルを連結して表示するでしょう。しかし、colspan/rowspanをシステムで動的に設定するのは非常に面倒です。 そんな時に使ってみたいのがjQuery Rowspanizerです。指定したテーブルを解析し、重複部分を連結してくれます。 jQuery Rowspanizerの使い方 元の表示です。 このようになります。 JavaScriptで処理を行ってくれるならば、システムはすべての行を出力するだけで良くなります。jQuery Rowspanizerが行ってくれるのはrowspanに限定されますが、同様の仕組みでcolspanに適用するのも難しくなさそうです。 jQuery RowspanizerはjQuery/JavaScript製の
jquery.dgtable - 高パフォーマンスなテーブルライブラリ MOONGIFT
社内システムにおいて、検索結果の一覧表示はよくある機能です。100行程度のデータであれば問題ありませんが、10万行をHTMLで出力するとなれば表示方法を考えなければなりません。レンダリングだけで数分待たされていたら、担当者はストレスを感じることでしょう。 今回は大量のデータ表示を行う場合に使えるjquery.dgtableを紹介します。 jquery.dgtableの使い方 jquery.dgtableは特に表示やスクロールのパフォーマンスに重点を置いています。 複数カラムを指定したソートにも対応しています。 jquery.dgtableは100万行くらいの表示であれば難なくこなします。さらにソート、カラムの移動や幅の変更、マウスオーバーですべてのデータ表示といった機能があります。多機能ではありませんが、大量のデータを表示する際には導入検討したいライブラリです。 jquery.dgtabl
Frappe Charts - GitHub風グラフもあるSVGグラフライブラリ
MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました WebはSVG/CanvasによってWeb標準だけで高度な表現が実現できるようになりました。しかし、それを使いこなすのは大変で、多くの場合ライブラリを使って実現しているでしょう。 今回紹介するFrappe ChartsはSVGを使ってグラフ表示を行うライブラリです。 Frappe Chartsの使い方 棒グラフ。マウスオーバーで情報を追加表示できます。 折れ線グラフ。 複数シリーズ出したパターン。 折れ線グラフにグラデーション。 データを動的に追加、削除できます。 色の塗り方も変えられます。 グラフと写真などのコンテンツを連動させるタイプ。 グラフのデータを選ぶと表示が変わります。 合計の表示、平均値表示を切り替え。 GitHub風のグラフ。 離すことも、くっつけることもできます。
Froala Design Blocks - コーポレートサイトやサービスサイトを作るのに使えるBootstrapコンポーネント集 MOONGIFT
Bootstrapを使ってWebサイトを構築する例は多いですが、凝ったデザインを考えると足りない部品が出ることがあります。また、色やサイズについてもっとこだわりたいと考えることもあるでしょう。 そうした時に使えるのがFroala Design Blocksです。実に170を超えるデザイン要素を提供しています。 Froala Design Blocksの使い方 スクリーンショット多めで紹介します。Call to Action。 コンタクト。 コンテンツ。 機能を並べる画面。 フッター。 フォーム。 ヘッダー。 プライス。 チーム。 表彰。 Froala Design Blocksはコーポレートサイトやサービスサイトを構築するために必要な要素がまるまる提供されています。多数のパターンがあるので、これらを組み合わせるだけで複雑な画面も構築できることでしょう。 Froala Design Bloc
siwapp - Ruby on Rails製の請求書管理
MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました 請求書はビジネスにおける基本的な帳票と言えるでしょう。請求書に応じて入金や支払いもありますので、企業の生命線を握った帳票とさえ言えるかも知れません。だからこそ適切に管理されなければならず、帳票管理サービスが多数あるのも頷けます。 今回紹介するsiwappはオープンソースの請求書管理システムです。 siwappの使い方 請求書の一覧です。 請求書詳細。 未払い請求書の一覧。こういうケースの対応も大事ですね。 顧客一覧。 顧客情報。 税金の設定。 テンプレート。 API操作もできます。 売り上げのグラフも出せます。 siwappは請求書管理に特化しており、請求書の作成とPDFなどでの出力、入金消し込みの機能などがあります。機能自体はシンプルなので、すぐに使いこなせるのではないでしょうか
Feather - SVG製のシンプルなアイコン集
MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました Webサービスやスマートフォンアプリでどういったアイコンを使うかで全体の印象が大きく変わります。フラットデザインやマテリアルデザインのトレンドの中ではシンプルでラインだけで表現されたものが好まれています。 今回紹介するFeatherはその流れを受けた、シンプルなアイコンになります。 Featherの使い方 一覧です。基本のアイコン。 様々な場面で使えそうです。 メディアとコミュニケーション。 場所、天気そして矢印。 ロゴ。 Featherは数が多いので幅広く使えるのではないでしょうか。ファイルはSVGなので、色を変更するのは容易でしょう。大きさを変えても問題ないですし、フォントのように一つのファイルになっていないので必要なものだけをピックアップして使えます。 FeatherはSVG
Ory - 段組まで変えられる高いカスタマイズ性を持ったWYSIWYGエディタ MOONGIFT
一昔前のCMSというとユーザの見る画面と管理画面がはっきりと分かれていました。セキュリティ上はやりやすいかも知れませんが、管理者としてはユーザがどう見えているかを逐一確認する必要があって不便でした。 最近ではユーザの見ている画面上でそのまま編集できるものが増えています。その最新作と言えるのがOryです。 Oryの使い方 こちらがエディタの画面。右側にアイコンが並んでいます。 編集中です。文字を選ぶとフローティングで装飾メニューが出ます。 日本語も入力できます。 さらにコンテンツをドラッグして配置変更も。 しかも段組まで変えられます！ 三段だってできます。 新しいコンテンツを追加する場合は右側から。 Oryはコンテンツのカスタマイズできる幅が大きく、かつ編集内容がそのままユーザの見ている画面になるので非常に分かりやすく編集できます。操作性も直感的なので使い勝手は良いでしょう。 Oryは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
mdpdf - スタイル設定が指定できるMarkdown to PDF
MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました MarkdownはHTMLだけでなく、他のフォーマットに展開する際にも使える便利な記法です。よくあるのはPDFではないでしょうか。しかし殆ど装飾も行われないシンプルなPDFなので、業務や報告書で使うのはちょっと躊躇してしまいます。 そこで使ってみたいのがmdpdfです。スタイル設定などが可能なMarkdownからPDFへの変換ソフトウェアです。 mdpdfの使い方 変換例です。ヘッダーを追加しました。 2ページ目にもちゃんとヘッダーが表示されます。 こちらはスタイル設定を適用したものです。先ほどとはフォントが異なります。 別なスタイルシート。文字が大きすぎて被ってしまっていますが、修正すれば問題ないでしょう。 mdpdfではスタイル設定としてCSSが使えるのがポイントです。つまりM
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
