PatternFly - Red Hat製のWeb UIフレームワーク
HTMLは自由度が高い反面、何でも自分でイチから作らなければならないイメージがあります。そのためUI、JavaScriptフレームワークは貴重です。それらを使うことで効率を大幅に高められます。 今回紹介するPatternFlyはUIフレームワークで、Red Hat社によって開発されています。 PatternFlyの使い方 例です。データテーブル。 管理画面。グラフも多数用意されています。 スライダー。 カード。 コメント。 通知。 ウィザード。 グラフ。 フォーム。 日付ピッカー。 テキストボックスフィルター。 パンくず。 ページネーション。 アコーディオン。 アラートとバッジ。 ツリービュー。 PatternFlyはjQueryを使っており、企業などのWebシステム開発において活躍しそうです。ウィジェットやデザインのパターンも多数用意されていますので、管理画面の作成など、様々なシステムに
ghr - GitHubリリース用アップローダー
MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました GitHubにはリリース機能があります。バイナリファイルはこちらにアップロードすることでリポジトリに入れることによる容量増加を防げます。また、バイナリなどバージョン管理できないものはこちらを使うよう推奨されています。 そんなGitHubのリリース機能をCLIで使いやすくしてくれるのがghrです。 ghrの使い方 ghrはタグとファイルを指定するだけで使えます。複数ファイルに対応しています。 $ ghr v0.1.3 ncmb-ruby-client.gemspec ==> Create a new release --> Uploading: ncmb-ruby-client.gemspec ちゃんとアップロードされています。 通常はWebブラウザでリポジトリの画面にいって、リリー
CoreUI - Vue/Bootstrap製の管理画面UI MOONGIFT
管理画面は主に運営元が使う画面になるので、デザインへのこだわりが殆ど感じられないことが多いです。しかし運営元が使いやすい画面でないと細かい制御がしづらかったり、サービスのステータス把握が遅れたりするのではないでしょうか。 そこで使ってみたいのがCoreUIです。VueとBootstrapを使って作られた管理画面テンプレートです。 CoreUIの使い方 スクリーンショット多めで紹介します。まずはダッシュボード。このようなUIの管理画面が簡単に作れます。 ボタン。 ソーシャルボタン。 カード。 フォーム。 モーダル。 スイッチ。 テーブル。 タブ。 アイコン。Font AwesomeかSimple Line Iconsがサポートされています。 ウィジェット。 こんなウィジェットも。 チャート。 ログイン画面。 登録画面。 エラー画面。 CoreUIはVueで作られていますので、表示する際にもW
Standard Notes - Evernote風なメモソフトウェア
メモを書く機会は予想以上に多いです。問題はそうしたメモを時にテキストファイル、時に付箋紙、時にA4用紙といった具合に散在させてしまうことです。メモは一箇所にまとめておいてこそ、価値が出ます。 今回紹介するStandard NotesはEvernote風のメモソフトウェアです。 Standard Notesの使い方 3ペインの構造で、左からタグ、ノート一覧、ノート詳細と並んでいます。 メモを書いて、タグで管理するという方法になっています。 ピンを付けておくこともできます。 Standard Notesは見た目、Evernoteの画面に似ています。Standard Notes自体はオンラインサービスで、オープンソースになっているのはWebクライアント部分になるようです。 Standard Notesはnode/JavaScript製のオープンソース・ソフトウェア（GPL v3）です。 Note
VUESTIC - Vue.jsを使ったシステム管理画面テンプレート MOONGIFT
Webサービスを作っていて、必要になるのが管理画面です。多くは開発工程の最後に回されて、予算もないために簡易的な画面で作られます。しかしより良い管理を行うためには管理画面もこだわりたいものです。 今回はVue.jsを使った管理画面、VUESTICを紹介します。 VUESTICの使い方 トップページです。アイコンが大きめで分かりやすい表示です。 画面上部のアイコンをクリックするとメッセージが表示されます。 グラフです。 進捗。プログレスバーです。 入力系です。 テーブル表示も複数パターンで表示されています。 タイポグラフィ。 ボタン。 アイコンは様々なアイコン集に対応しています。 グリッド。 確認用のダイアログ。 アラート。 ログイン用のUI。 地図。 グローバルな地図。 拡大表示。ノードはアニメーションしています。 VUESTICには一般的な管理画面で必要な画面の構成要素を網羅しています。
textbringer - Ruby製のEmacs風エディタ
今はプログラミングエディタが多数ありますが、かつてはVi/VimかEmacsかと言われるほど人気が二分化していました。個人的にはEmacs派なのですが、昨今の新しい技術に対応していくために泣く泣くAtomに移行しています（Visual Studio CodeのEmacsバインドが微妙なため）。 そんな中、でてきたのがtextbringerです。なんとRubyで作られたEmacsライクなエディタです。 textbringerの使い方 エディタです。普通にEmacsのキーバインドが使えます。 何となくエディタの下部などEmacs風の表示になっています。Rubyということで、Emacs標準のCommon Lispよりもカスタマイズがしやすいと考える方は多いのではないでしょうか。速度面についても特に問題なさそうです。今後の発展に大いに期待したいソフトウェアです。 textbringerはRuby製
Resumable.js - HTML5 File APIを使ったリジューム付きファイルアップローダー MOONGIFT
Webで面倒に感じるのがファイルのアップロードです。特に途中でネットワークが切れた時には大きなストレスになります。1回で数百MB、数GBの大きなファイルをアップロードするとなればリジューム機能が欲しくなるはずです。 そこで使ってみたいのがResumable.jsです。HTML5のFile APIを使ってリジューム機能を実現します。 Resumable.jsの使い方 デモです。大きなファイルをアップロードします。 ファイルをアップロード中。一時停止もできます。 ネットワーク側では巨大なファイルを細かくアップロードされているのが分かります。 ファイルの内容が細かくなっていますので、サーバ側で結合する必要があります。そのための実装がnodeやPHPなど各種言語向けに提供されています。Resumable.jsを使えば巨大なファイルもアップロードしやすくなるでしょう。 Resumable.jsはHT
Mailin·メールをJSONにしてくれるnode製のSMTPサーバ MOONGIFT
MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました メールとWebシステムを連携できると便利だよなと思いつつもメールサーバとしての堅牢、安定性やメールの解析などで二の足を踏んでしまっているという人は多いのではないかと思います。 特にメールの解析が面倒と考える方に使ってみてほしいのがMailinです。node製のSMTPサーバで、受け取ったメールをなんとJSONにしてくれる機能があります。 Mailinの使い方 Mailinはnpmでインストールができてとても簡単です。 $ sudo mailin Password: warn: Either spamassassin or spamc are not available. Spam score computation is disabled. info: Mailin v0.0.10
TabAttack – Chromeで開いているタブ全てをMarkdownで出力
MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました 色々なサイトをあつめてまとめて記事を書こうと思った時などに全てのタブのURLやタイトルをコピーしたいと思うことがあります。普段はMake Links of All Tabsを使っています。ただしこれは同じウィンドウ内に限定されます（それが良い場合もあります）。 TabAttackはフォーマットはMarkdownに固定されるのですが、複数のウィンドウに分かれたタブ情報も全て収集できるのがポイントになります。Google Chromeでタブをたくさん開く方はぜひチェックしてください。 TabAttackの使い方 TabAttackをインストールするとアイコンが表示されます。そしてタブの数が表示されています。 クリックすると開いているタブが一覧になってMarkdownのリンク記法で表示さ
電話テキスト化サービス·WebRTCで電話を実現しつつ音声をテキスト化 MOONGIFT
WebRTCを使ってみたいなと思いつつもサーバの準備が必要でありなかなか手を出しづらいのが実情です。しかしNTTコミュニケーションズの提供するSkyWayを使えばフレキシブルなWebRTCが手軽に手に入ります。 そんなSkyWayを使ったサンプルソフトウェアが電話テキスト化サービスです。音声認識技術とも合わせることで、音声チャットをしながらそれをテキスト化するという面白いサービスになっています。 電話テキスト化サービスの使い方 2台のコンピュータとブラウザが必要です。片方からもう片方の方に表示されている番号に電話をかけます。 受電しました。応答しましょう。 つながっている状態です。マイクにしゃべると音声が聞こえて、さらにそれがテキストになってチャット画面に表示されます。 認識精度は高いです。 漢字がじゃっかん苦手？ SkyWayではビデオチャット、ファイル転送なども可能です。対応ブラウザと
Scribe.js - nodeのログをカラフルに、かつWebブラウザ上で確認 MOONGIFT
最近Nodeで開発することが増えてきたのですが、標準出力に出てくるログはあまり見やすくありません。目的のデバッグメッセージがどこに出ているのか確認が面倒で、ターミナル上では検索もままなりません。 そこで使ってみたいのがScribe.jsです。ログを格好良く、見やすくしてくれます。 Scribe.jsの使い方 ログがWebブラウザで見られるようになります。左側がグループを選択できるようになっています。 Expressのログだけに絞り込み。 検索で絞り込みもできます。 Scribe.jsはカラフルなだけでなく、絞り込みもできるので開発時のログ確認がとてもスムーズになります。エラーなどログを分けておけばScribe.jsでの表示場所も変わるので分かりやすいでしょう。 Scribe.jsはnode/JavaScript製のオープンソース・ソフトウェア（MIT License）です。 Scribe.
Flatmarket - 静的サイト主体で作られたEコマースシステム
MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました Webシステムの筆頭とも言えるのがEコマースではないかと思います。商品を並べて、ショッピングカートに入れて決済する…特に大事なのが決済なのではないかと思います。カートに入れるまではともかく、そのまま決済完了しないと言った話はよく聞くところです。 バックグラウンドのシステムがない、そんな環境でもEコマースを作る…そんな試みがFlatmarketです。 Flatmarketの使い方 Flatmarketには完全にサーバがない訳ではありませんが、今ユーザに見えているのは静的なサイトです。 決済はStripeを使っています。 最後にカード番号を入れれば購入完了です。 本来は購入完了のメッセージが出るはずなのですがエラーになってしまいました。 Flatmarketの仕組みとしては、静的なサイ
re:dash - オープンソースのデータプラットフォーム
MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました 世の中ではオープンデータの流れが進んでいます。企業はもちろんのこと、政府や自治体においてもデータを再利用しやすい形でオープンにしています。 そんなデータをみんなにとって使いやすい形で公開、シェアできるのがre:dashです。 re:dashの使い方 ダッシュボードです。すでに公開されているデータがたくさんあります。 グラフで描画されています。 CSVとして確認もできます。 ピボットテーブルも用意されています。 CartoDBとの連携もできます。 こんな複雑なグラフも描けます。 自分で追加もできます。データソースは一般的なデータベースはもちろん、BigQuery、Googleスプレッドシート、ElasticSearch、Amazon Redshift、Hive、InfluxDB、Tr
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を使ってデスクトップアプリを作ることがで
schedulerjs - スケジュール調整に使えそうな横向き予定表
MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました Web上で様々な作業を行えるようになったことで、UIに求められる多様性も増しています。特に面倒だと感じるのは時間関係ではないでしょうか。カレンダー、ウィークリー、デイリーなどいずれにおいても時間に合わせた表示、処理は大変です。 そこで様々なライブラリを知っておくことでいざとなった時に役立ちます。今回は横型のスケジュール選択ライブラリschedulerjsを紹介します。 schedulerjsの使い方 schedulerjsの初期表示です。 薄いブルーのエリアはドラッグしたり、端をドラッグして枠の幅を増減できます。 実際に操作しているところです。 実際の描画は予定を配列で渡すだけです。 var list = [ { 'name': 'Chewbacca', 'appointments
speed-test - CUIでインターネット速度計測
自宅やオフィスに新しくネット回線を敷いたり、MVNO回線を導入したりするとついついやるのがインターネット速度の計測ではないでしょうか。特にMVNOは最初こそ速くても利用者が殺到すると途端に遅くなったり、地域によって速度差があったりします。 そんなインターネット速度の計測は専用のWebサイトで行うのが一般的ですが、npmを使ってCLIでできるのがspeed-testです。 speed-testの使い方 speed-testのインストールはnpmで行います。 npm install -g speed-test 後はコマンドをたたくだけです。 $ speed-test Ping 40 ms Download 14.7 Mbps Upload 9.7 Mbps speed-testはSpeedtest.netのデータを使っているので正確かどうかが分からないのですが、Webサイトを見る限りグローバル
Material Design Lite - Google製のWeb用マテリアルデザインテンプレート
MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました マテリアルデザインが流行っています。Androidアプリ向けが基本と思われますが、アプリに限らずWebでも利用が進んでいます。Google+のように導入が進んでいるサイトもありますし、これからマテリアルデザインを導入しようと考えている方もいるでしょう。 今回はそんなマテリアルデザインのテンプレートMaterial Design Liteを紹介します。Google製のテンプレートだけに機能が充実し、彼らの考えるマテリアルデザインが体現されていると言えるでしょう。 Material Design Liteの使い方 まずはデモから。 パララックスエフェクトになっています。 こんなAndroid風サイトも。 メニューが上に貼り付くようになっています。 下に薄い影が入っています。完全なフラッ
Nevernote - Ruby on Rails製のEvernoteクローン
MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました こ、これは危険な香りが…。 Evernoteを使っている方は多いかと思います。筆者も何度かプレミアムになったことがあるのですが、その度にあの重たいUIにやられて使わなくなっています。使い勝手は良いので、自分専用に軽く動いてくれると良いのに、と思わずにはいられません。 そんな夢を叶えてくれるかも知れないのがNevernoteです。Nが追加されただけのほぼEvernoteという危ない気のするソフトウェアです。 Nevernoteの使い方 トップページの時点ですでに怖いです。 まずはアカウントを作成します。 トップページです。実に見覚えのあるデザインです。 メモの書き心地はまさに本家と同じです。 画像は使えませんが、タグは使えます。 機能的にはEvernoteのテキストのみといった感じで
AdminLTE·ここまで多ければ何でもできそう。多機能なBootstrapベースの管理画面テンプレート MOONGIFT
これで十分でしょ！ Bootstrapで作る管理画面は相当増えてきているようです。確かに一般ユーザ向けに提供するとBootstrap臭が出てしまいますが、管理画面であれば問題はないですよね。 ということで今回は新しいBootstrap製の管理画面テンプレートAdminLTEを紹介します。高度なウィジェットが数多く提供されていますので使い勝手良さそうですよ。 AdminLTEの画面 今回もスクリーンショット多めで紹介します。 ダッシュボード。この時点でかなりリッチ。 ボックス。これだけ多彩なパターンがあると言うのも凄いですね。 左端にはちょっとした設定を表示させています。 背景色を変えるだけでも随分印象が違います。 グラフ。 こちらもグラフ。 外部ライブラリもそつなく使いこなしています。 スパークラインも！ アラート。ちょっと飛び出しているのがいい感じです。 アイコン。 ボタン。フラット系で
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
