Fluent UI - Microsoft社製のReact向けUIコンポーネント
HTML5で高度なWebアプリケーションの開発が行えるようになっています。そういったサービスを開発する場合、大事なのはUIです。従来のWebっぽさを残すと、ユーザビリティが低くなりがちです。なるべくネイティブ風なUI/UXを意識しましょう。 もしWindows向けのサービスを開発しているならばFluent UIを使ってみましょう。Microsoft社が開発しているUIフレームワークになります。 Fluent UIの使い方 スクリーンショット多めで紹介します。まずはカレンダーコンポーネント。 カラーピッカー。 アイコン付きのピッカー。 アイコンとリスト。 アイコン。下に小さなステータス表示も。 メニュー。 ツールチップ。 サイドパネル。 モーダル。 アイコン。 Fluent UIはMicrosoftのWeb体験に合わせたUIコンポーネントとなっています。Fluent UIを使うことで、Azu
Trollo - Vue/Vuex製のカンバンシステム MOONGIFT
Trelloのようなカンバン機能はプロジェクト管理に限らず利用できそうです。自分たちで開発しているWebサービスの中に組み込みたいと思った方も少なくないでしょう。しかし実際に開発してみると意外と機能が多いと感じるかも知れません。 そこで使ってみたいのがTrolloです。Vueで作られていますので、Vueアプリケーションの中であれば組み込むのも容易そうです。 Trolloの使い方 メイン画面です。カラムが横に並んでおり、その中にカードが縦に並んでいます。 カラムの移動はドラッグ&ドロップで行います。 さらにカラムの追加も可能です。 Trolloはカンバンシステムに必要になるであろう基本的な機能を実装しています。後はデータを追加、更新、削除したタイミングでデータベースに反映すればいいだけでしょう。元データは注文データや在庫データなど自由に設定して使えそうです。 TrolloはVue製のオープン
JetBrains Mono - JetBrains製の開発者用フォント
開発者にとって視認性の高いフォントは重要です。ポケモンセンターでもらえるシリアルコード、視認性悪くて文字の判別ができない「目がよくても無理」「なぜこのフォントにした」 - Togetterなんて話もあり、視認性の悪いフォントはそれだけでストレスになることがあります。 今回紹介するJetBrains Monoはプログラミング用エディタの開発で知られるJetBrains社が開発したフォントです。 JetBrains Monoの使い方 タイポグラフィ。 適用しているところです。 -> や == 、 === に特徴があります。 ハイライトされている例。メソッドがイタリックになっていますが、見やすいのではないでしょうか。 JetBrains Monoは他のフォントに比べて小文字が少し高かったり、 -> などが結合して表示されると言った特徴があります。もちろん日本語はありませんので、日本語は別なフォン
GitHub Diff Explorer - プルリクエストのレビューを見やすく
Gitを使った開発では目処が立った段階でプルリクエストを送って取り込んでもらうというのが基本です。小さなプルリクエストであればすぐにチェックできますが、大きなものになると数十ファイルが更新されている場合もあるでしょう。そんな中では見逃しやレビューが時間を要してしまうかも知れません。 そこで使ってみたいのがGitHub Diff Explorerです。プルリクエストを見やすく階層化してくれます。 GitHub Diff Explorerの使い方 プルリクエストのFile Changedを選ぶと、左側にディレクトリツリーが表示されます。 右側に出るのは選択されているファイルだけです。 GitHub Diff Explorerで見れば変更されているファイルだけが一覧されます。さらに長大なスクロールがなくなり、見たいファイルだけを素早く確認できます。レビューすることが多い方にお勧めなソフトウェアで
Fiddle - すぐにElectronアプリ開発をはじめられる開発環境
MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました Electronを使えばWindows/macOS/Linuxなどマルチプラットフォームで動作するソフトウェアがHTML/JavaScript/CSSで作成できます。作ってみたいと思いつつも、環境を整える手間で躊躇してしまっている人もいるのではないでしょうか。 そんな方に使ってみて欲しいのがFiddleです。ダウンロードしてすぐにElectronアプリ開発がはじめられるソフトウェアです。 Fiddleの使い方 Fiddleを起動したところです。 開発環境は3ペインになっています。左側にあるJavaScript、右にあるHTMLを編集するのが基本です。 開発したらElectronアプリとして実行できます。各バージョンのElectronがFiddle上で簡単にダウンロードできます。 実
Vue Designer - Vue.jsの表示を確認できるVisual Studio Codeプラグイン MOONGIFT
ReactやAngular、Vueなどは独自のタグを使ったWebコンポーネント型のシステムと言うこともあって、これまでのHTMLデザインの手法が通じなくなっています。デザインの確認などで苦戦している人も多いのではないでしょうか。 そこで使ってみたいのがVue Designerです。Visual Studio Codeプラグインとして動作するVueデザイン確認ツールです。 Vue Designerの使い方 エディタです。Vueファイルに対応しており、デザイナーを開くと右側にプレビューが表示されます。 もちろんリアルタイムに更新されるので、スタイルタグの内容を変えるとすぐに反映されます。 props、データの確認もできます。 Webブラウザなどで表示を確認するのも良いですが、プログラミングエディタの中に埋め込まれていることで、より確認が簡単にできるようになっています。Vue Designerを
Noto - シンプルだからこそお勧めなテキストエディタ
MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました シンプルであるというのは大事なことです。開発者としてはつい、余計な機能まで実装したくなります。多機能であれば選んでもらえると思ってしまうからです。しかし、実際に使われるのはコンセプトが明確で、自分に刺さるソフトウェアです。 今回紹介するNotoはまさにシンプルなテキストエディタです。万人向けとは思いませんが、きっと気に入る人もいるはずです。 Notoの使い方 メイン画面です。シンプルなエディタです。 文字数カウンターと行カウンターは常時表示されています。 改行コードやタブなど、可視化されていない情報を見られるようにできます。 タブに対応していて複数ファイルを開けます。 行番号も表示できます。 すべてのタブをサムネイル表示できます。 設定画面です。テーマをダークに変えられます。 No
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
