Diagrams - システム構成図をコードで書く
MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました 開発者であっても図を描く機会は多いです。仕様書のようなドキュメントであったり、システム構成図の中に書いたりといった具合です。ドローソフトウェアを使ったり、スライド作成ソフトウェアを使ったりしまうが、操作やメンテナンスが面倒でストレスです。 そこで使ってみたいのがDiagramsです。開発者らしく、コードで図を描けます。 Diagramsの使い方 コードで書いた内容で図が書けます。 シンプルな例。 k8sなどの構成にも使えます。 GCP用。 DiagramsはAWS、GCP、k8s、AzureそしてAlibaba Cloud向けにアイコンが用意されています。これらのサービスを作ったシステム構成を考えた時に、Diagramsを使えばメンテナンスもしやすい図が描けます。 Diagrams
SuperTinyIcons - 1KB以下の軽量アイコン集
アイコン集はいくら知っていてもいいものです。多彩なパターンに対応したものもあれば、特定の用途に使えるものもあります。様々なものを知っていれば、役立つ機会が多いにあります。 今回紹介するSuperTinyIconsは1KB以下という小さなサイズが特徴なアイコン集となっています。 SuperTinyIconsの使い方 ソーシャルメディアとメディア。 Google。 コミュニケーション。 Webサイト。 Webサイトとインターネット。 ブラウザとポッドキャスト。 ロゴ。 セキュリティ。 決済。 プログラミング。 その他。 SuperTinyIconsの各アイコンにはサイズも書かれています。その殆どが3桁バイトであるのが分かります。SVGと合わせてPNGも提供されています。汎用的なデザインなので、利用できる場面は多そうです。 SuperTinyIconsは edent/SuperTinyIcons
Matter - ピュアなCSSで作られたマテリアルデザインコンポーネント MOONGIFT
マテリアルデザインは単なるデザインにとどまらず、アニメーションも大事な要素になります。ユーザがタッチした、スワイプしたといったアクションに対して適切なフィードバックがあってこそです。そのため、デザインの敷居が高くなっています。 そこで使ってみたいのがMatterです。ピュアなCSSだけで作られたマテリアルコンポーネントです。 Matterの使い方 デモです。ボタンやチェックボックスなど様々なコンポーネントが並んでいます。 テキストフィールドについても様々なデザインが用意されています。 色を動的に変更できます。 ダークモードっぽい仕上げも。 MatterはCSSだけで作られているのが魅力です。様々なWebサイトの中で利用できるでしょう。CSSだけで実装されていれば、参考になる部分も多そうです。自分のサイトにそのまま組み込んだり、Matterを参考にマテリアルデザインを取り込むこともできるでし
DevHub - GitHubをTweetDeck風に閲覧
MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました TweetDeckは開発者でもよく使っているTwitterクライアントになっています。多くの検索条件でツイートを閲覧したり、メンションやDM、タイムラインなどを切り替えることなく閲覧できる一覧性が便利です。 そんなTweetDeck風のUIをGitHubで実現してくれるのがDevHubです。 DevHubの使い方 メイン画面です。通知やアクティビティが閲覧できます。UIはまさにTweetDeck風です。 ユーザを指定してカラムに追加しました。 カラムのフィルタリング条件も指定できます。 ダークモードにも対応しています。 DevHubはGitHubをよく使っている人ほど便利でしょう。組織やリポジトリも指定できるので、仕事とプライベート両方で便利に使えるはずです。コメントにいち早く反応
ng-admin - 次世代のWeb管理画面
MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました 最近はサーバサイドではHTMLレンダリングせず、RESTfulなWeb APIを使ってデータを取得、表示するといったWebアプリケーションが増えています。そうした中、運営側の管理画面においても求められるものが変わってきています。 そこで今回は次世代の管理画面、ng-adminを紹介します。AngularJSを使ったWeb管理画面になります。 ng-adminの使い方 Web APIを用意しておくことで、ユーザ向けはもちろんのこと管理画面においてもスムーズな操作ができるようになります。pushStateにも対応していますので、URLはユニークになるようです。 ng-adminはJavascript/HTML5製のオープンソース・ソフトウェア（MIT License）です。 Angul
Weave - Dockerで仮想ネットワークを構築
MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました Dockerは仮想化技術なので、ハードウェアの台数によらず仮想環境（コンテナ）を立ち上げられます。その中ではコンテナの垣根を越えて連携させたいと思うことも多いでしょう。そのための仕組みとしてリンクがありますが、より大規模なネットワークを構築する場合はWeaveを使うのが良さそうです。 Weaveの使い方 WeaveはDockerコンテナで仮想的なネットワークを構築するソフトウェアになります。まずはUbuntuなりでダウンロードします。 $ sudo wget -O /usr/local/bin/weave \ https://raw.githubusercontent.com/zettio/weave/master/weaver/weave $ sudo chmod a+x /us
Gogs - Go製のGitリポジトリサーバ
今は企業内においてもバージョン管理でGitを使う所が増えています。個人個人がリポジトリを持つことでオフラインでも開発がスムーズに進められたり、多数の関連ツールの登場によって生産性が向上しています。 GitHubやBitBucketのようなGitリポジトリサービスもありますが、企業内部でリポジトリを持ちたいというケースも多いでしょう。そこで使ってみたいのがGogsです。 Gogsの使い方 GogsはGitHubを強く意識したUIになっていますので、既にGitHubを使っている方であればすぐに使えるようになると思います。社内や自社サーバにGitリポジトリサーバを立てたい時に選択肢の一つに考えてみてください。 GogsはGo製、BSD Licenseのオープンソース・ソフトウェアです。 Gogs: Go Git Service - A self-hosted Git service writte
Responsive Dashboard - Bootstrapベース、レスポンシブな管理画面テンプレート MOONGIFT
Bootstrapの良いところは使い手（主にエンジニア）の気持ちを理解し、その利用シーンが想定されていることでしょう。こだわったデザインにすることだってできますが、それでは応用がききません。その汎用性と見栄えのバランスを上手に保っています。 今回紹介するResponsive Dashboardもその応用例と言えます。いわゆる管理画面系のダッシュボードですが、AngularJSとjQueryに対応し、カスタマイズして利用するのが容易になっています。 Responsive Dashboardの使い方 こちらがメイン画面です。管理系で良くありがちなウィジェットがたくさんあります。メニューは左側です。 デスクトップもメニューを折り畳めます。 タブレットサイズになると自動でメニューの文字が折り畳まれます。 スマホサイズ。カラムが1列になります。 Responsive DashboardはBootst
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
