MOONGIFT更新停止のご連絡 MOONGIFT
いつもMOONGIFTをご覧いただきありがとうございます。タイトルにあります通り、MOONGIFTの更新を恒久的に停止するご連絡となります。最終更新記事は2021年07月16日になります。 背景 MOONGIFTはオープンソース・ソフトウェアの紹介サイトとして2004年01月29日に運営を開始しました。一番最初はlivedoorブログにて開始し、その後様々なブログプラットフォームを利用し、さらに一時はサイト名の変更（Open Alexandria）を経て、MOONGIFTという名称で運営を続けてきました。 MOONGIFTでは、これまでに16,000以上のソフトウェア（一部オープンソース・ソフトウェア以外のソフトウェアを含む）を紹介してきました。オープンソース・ソフトウェアは多くの先進的な技術への取り組みが行われており、オープンソース・ソフトウェアを知ることはソフトウェアの開発トレンドを知
アニメーションGIFはとても使い道が多いです。動画だとついつい冗長的になってしまいがちですが、アニメーションGIFはハイライト部分だけを切り出して作られています。面白い部分だけが繰り返し再生され、音声もないとあって、面白さが増幅します。 そんなアニメーションGIFをデスクトップで手軽に作成するソフトウェアとしてGifCaptureを紹介します。 GifCaptureの使い方 起動すると枠だけが表示されます。この部分が録画されます。 設定は保存場所だけ。 保存すると通知が送られてきます。 個人的にはLICEcapをメインで使っていますが、GifCaptureは同じような使い勝手のソフトウェアになります。LICEcapがちょっと機能が追加されて複雑になった気がしますが、GifCaptureはシンプルなままです。好みによりますが、個人的にはGifCaptureのが好きです。 GifCapture
エンジニアのためのDevRel入門 ─ 外部の開発者と信頼関係を結んでコミュニティでファンを増やす - エンジニアHub｜Webエンジニアのキャリアを考える！
エンジニアのためのDevRel入門 ─ 外部の開発者と信頼関係を結んでコミュニティでファンを増やす エンジニアリングとマーケティングをミックスしたDevRel（Developer Relations）という活動が注目を集めています。日本アイ・ビー・エムでデベロッパーアドボケイトを務める萩野たいじさんに、エンジニアが果たすべき新しい役割として、DevRelの現状を聞きました。 カンファレンスをきっかけに世界に広がったDevRel DevRelの仕事は開発者と信頼関係を結ぶこと 開発者コミュニティを中心に関係を築く コミュニティは技術スコープの変化に沿って 参加者は増えているが実践の場はこれから DevRelという新しいキャリアパス 個人としてインフルエンサーになること ITやソフトウェア開発において、プロダクトやサービスの利用を牽引するエバンジェリスト（evangelist）やアドボケイト（
Webサイトはシンプルなデザインが好みです。情報量が多いと、どこを見ていいのか分かりませんし、情報の取りこぼし（メールマガジンの送付設定など）があってイライラしたりします。 開発者には開発者に合ったUIがあるはずです。今回紹介するHacker UIはまさに開発者のために作られたWeb UIフレームワークです。 Hacker UIの使い方 スクリーンショット多めで紹介します。 ボタンです。 ボタンをアウトライン化した例。 リスト。 フォーム。 ラジオボタン。 チップ。 ツールチップ。 モーダル。 タイポグラフィ。 Hacker UIはボタンなどがはっきりしており、フラットなデザインになっています。シンプルで、何が何を行うUIなのかが分かりやすいです。開発者以外の人にとっては殺風景に見えるかも知れませんが、開発者にとってはこれくらいのデザインがさっぱりしていて、使いやすいのではないでしょうか。
Diagrams - システム構成図をコードで書く
MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました 開発者であっても図を描く機会は多いです。仕様書のようなドキュメントであったり、システム構成図の中に書いたりといった具合です。ドローソフトウェアを使ったり、スライド作成ソフトウェアを使ったりしまうが、操作やメンテナンスが面倒でストレスです。 そこで使ってみたいのがDiagramsです。開発者らしく、コードで図を描けます。 Diagramsの使い方 コードで書いた内容で図が書けます。 シンプルな例。 k8sなどの構成にも使えます。 GCP用。 DiagramsはAWS、GCP、k8s、AzureそしてAlibaba Cloud向けにアイコンが用意されています。これらのサービスを作ったシステム構成を考えた時に、Diagramsを使えばメンテナンスもしやすい図が描けます。 Diagrams
VimMan - Vimを習得できるゲーム
開発者であればVimの操作を一度は習得しようとするのではないでしょうか（またはEmacs）。しかし、独特なキーバインドにどうしても慣れず、サーバでの作業が非効率的なままという人も多いはずです。 そんな方はゲーム形式でVimの操作を学べるVimManを使ってみましょう。 VimManの使い方 まずはキャレットの移動を学びます。 次に終了の方法です。 レベル3になるとテキストの入力、追加などを学びます。そうやって徐々にレベルアップしていくことで、あなたもVim男に成長できるという訳です。これから使い方を習得したい方、さらに使いこなしたい方はVimManで学んでみましょう。 VimManはGo製のオープンソース・ソフトウェア（MIT License）です。 ozankasikci/vim-man: A terminal based game that teaches you how to use
開発者であれなネットワーク構成図を書く機会があるかと思います。そんな時、ドローツールを使うとメンテナンスが面倒だったり、変更時の差分確認もできず、徐々に運用が煩雑になっていきます。 そこで使ってみたいのがdrawthe.netです。テキストから詳細なネットワーク構成を生成してくれるドローツールです。 drawthe.netの使い方 左側のテキストで書かれた内容を右側でプレビューできます。 こんな図も。 カラーパターン。 複雑なノードの繋がりを表現しています。 まさにスター型ともいえる構成例。 コードを書いたり、文字のスタイル指定もできます。 ネットワークだけでなく、こんな図も書けます。 ファイアウォールなどをイラストで表現した例。 クラウドを使った構成に使えそうな例。 PNG画像で保存できます。 日本語も利用できます。 drawthe.netはテキストで書かれた内容をSVGで書き出します。
MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました IT技術の発展はめざましく、日々新しい技術が登場しています。例えばサーバレス、VueやReactの仮想DOM、ちょっと前であればRESTful APIなどがあります。それらを漏れなくキャッチアップするのは大変です。 今回紹介するGAS 家計簿はサーバレスにGAS（Google Apps Script）を使って家計簿Webアプリケーションを作るハンズオンを兼ねたソフトウェアです。 GAS 家計簿の使い方 デモです。動作しているのはGitHub Pagesです。サーバの管理が不要ですね。 データの追加用モーダルウィンドウ。フロントエンドはVueを使っています。 設定画面です。データはGoogle Apps Scriptを使ってGoogleスプレッドシートに保存されています。 GAS 家
DevRel/Japan CONFERENCE 2023の発表資料です https://devrel.tokyo/japan-2023/
MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました 開発時にDockerを利用している開発現場は多いでしょう。そして、複数のコンテナを組み合わせる場合、Docker Composeを使って管理しているのではないでしょうか。Docker Composeの設定を細かくこだわると、徐々に複雑なものになっていきます。 そこで使ってみたいのがNautilusです。Docker Composeの内容をグラフィカルに可視化してくれます。 Nautilusの使い方 docker-compose.yamlを読み込むと、その内容を表示します。 空いているポート番号を確認できます。 さらにストレージも描画できます。 表示方法を変更しました。 ネットワーク設定を複雑なものにしていたりすれば、より描画するメリットが出そうです。オープンソースでDocker C
Webサイトを作る際にユーザフロー（ワイヤーフロー）を作ります。Webサイトの画面を並べて、リンク先をつないでいくことで、フローを明確にします。そして目的のページまでたどり着くのに深くなりすぎていないか、分かりづらい流れになっていないかなどをチェックできます。 今回紹介するWireflowはWeb上か簡単にワイヤーフローが作成できるソフトウェアです。 Wireflowの使い方 例です。左側にあるパーツをドロップして、線でつないでいくだけという簡単さです。 拡大できます。 パーツを縦につなげることで、長いページも表現できます。 グルーピングも可能です。 Wireflowを使えばワイヤーフローが手軽に作成できます。あらかじめ多数の画面モックアップが用意されていますので、ページの雰囲気に合わせて自由に作成できるでしょう。Wireflowを使えばWebサイトの構造を検討したり、パーツをカスタマイズ
Mailu - Dockerで立てられるメールサーバ
MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました メールサーバを立てるのはとても面倒なイメージがあります。安定して動かしておかないとメールが受信できない、なんて問題にもなりかねません。メールがビジネスの根幹を担っている場合にはなおさらです。 そこで紹介したいのがMailuです。Dockerで簡単に立ち上げられるメールサーバです。 Mailuの使い方 ログインします。 縦並びの3カラム構成です。左にボックス、中央がメール一覧、右側にメール本文が出ます。 メール作成画面です。 ファイルを添付すると右側に一覧が出ます。 設定画面です。 もちろんDockerだから安定する訳ではないですが、立ち上げが簡単なのはメリットが大きそうです。IMAPやSMTPはもちろん、Let’s encryptを使ったSSL/TLS、アンチウィルススキャナ、スパ
glauth - 開発や個人利用に最適なLDAPサーバ
MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました 個人的に認証統合は好きで、一つのIDでシステム全体を管理したいと考える派です。そのベースとしてよく使われるのがLDAPです。Active DirectoryもLDAPをベースとしており、社内外における認証統合に一役買っています。 そんなLDAPサーバですが、ちょっと立てるのが面倒に感じていました。しかしglauthであれば開発用途や個人で簡単に使えそうです。 glauthの使い方 設定ファイル指定して起動するだけです。とても簡単です。 $ glauth -c sample-simple.cfg 15:18:52.896862 doConfig ▶ DEBU 001 Debugging enabled 15:18:52.896892 startService ▶ DEBU 002 W
多言語対応するプロジェクトは多々あります。その際、翻訳ファイルを作成して単語をそれぞれ置き換えるというやり方が良く行われます。その結果、開発時に翻訳サービスは活躍しているのではないでしょうか。 もし開発にVisual Studio Codeを使っているならば、使ってみたいのがVscode Google Translateです。エディタ上でさくっと翻訳できます。 Vscode Google Translateの使い方 文字を選択して、実行します。 翻訳後の言語は多彩に用意されています。 まとめて選択もできます。 複数の文字列を選択して翻訳できるのが特に便利です。なお、Google翻訳の結果をオープンソースや商用サービスに組み込んだりするのは権利上の問題が生じる可能性があるのでご注意ください。 Vscode Google TranslateはVisual Studio Code用のオープンソー
NeutralinoJs - Electronよりもメモリ消費が小さいデスクトップアプリケーション開発環境 MOONGIFT
Web技術を使ってデスクトップアプリケーションを作成する事例が増えています。有名なところではAtomやVisual Studio Codeが挙げられるでしょう。プログラミングエディタができるなら、大抵のソフトウェアが作れるはずです。その基盤としてはElectronを使っている例が多いです。 NeutralinoJsはElectron代替のソフトウェアです。より小さなサイズで動作し、メモリ消費量も小さいのが特徴です。 NeutralinoJsの使い方 NeutralinoJsのコードサンプルです。 let myapp = { myfunction : function () { document.getElementById('info').innerHTML = NL_NAME + " is running on port " + NL_PORT + " inside " + NL_OS
GraphQLはRESTful APIの代替になりえる仕組みです。データ取得に対して自由度が高く、入力と出力両方に対して型指定できるのも良いです。多くはフレームワークと組み合わせて使えますが、自分で一から設計する場合もあるでしょう。 そんな時に使ってみたいのがProtoGraphQLです。GraphQLのスキーマをビジュアル設計できます。 ProtoGraphQLの使い方 メイン画面です。 テーブルを設計します。 その設計を使うためのコードとGraphQLスキーマ、SQLが生成されます。 モデルのビジュアル化もできます。 ProtoGraphQLはクエリ（取得）側の設計が可能で、ミューテーション（更新など）はできないようです。とは言え、型などをビジュアルで設計したり、リレーションも指定できるのは便利です。それこそデータベース設計と同時にできそうです。 ProtoGraphQLはJavaSc
goop - Google検索結果をスクレイピング
Googleの検索結果を取得して分析に使いたいと考える人は大勢います。しかし機械的に収集しようとすると、GoogleからCAPTCHA入力が求められます。そのため自動化しづらく、手作業で収集している人も多いでしょう。 しかし裏道がありそうです。Facebookを経由するとそのトラップに引っかからないようです。その実証として作られたのがgoopです。 goopの使い方 goopで検索を行います。その際、Facebookのクッキーを適用するのがコツです。 from goop import goop page_1 = goop.search('open source', '<facebook cookie>') print(page_1) ちゃんと検索結果が返ってきます。 {0: { 'url': 'https://opensource.org/osd-annotated', 'text': '
mdr - ターミナル用のMarkdownビューワー
MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました Markdownは閲覧時、専用のビューワーを通して見ることが多いかと思います。素のままでも可読性に優れたフォーマットとはいえど、ビューワーを使った方が見やすいのは確かです。 普段ターミナルでMarkdownファイルを閲覧する際にcatやlessを使っていた方は、mdrを使ってみましょう。 mdrの使い方 デモです。画像も一部再現されています。 テーブルもちゃんと表示されます。 mdrは文字の色分け、画像の表示、テーブルの表示など細かくMarkdownファイルが見やすくなる工夫がされています。使い方もMarkdownファイルを引数に渡すだけで簡単です。あらかじめインストールしておくと使い勝手が良さそうです。 mdrはGo製のオープンソース・ソフトウェア（MIT License）です。
MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました システム開発時において、データベースは要になります。アプリケーションサーバのフレームワークなどは変更したとしても、データベースのスキーマはなかなか容易に変更できるものではありません。 途中からメンバーが入ってきたりすることもあります。データベースの定義はメンバー全体できちんと把握できているのが望ましいでしょう。そこで使えるのがMySQLSchemaDocです。 MySQLSchemaDocの使い方 表示例です。左側にテーブルの一覧、右側でその構造を表示します。 絞り込みもできます。 テーブル名も絞り込んで表示できます。 MySQLSchemaDocが面白いのは、その表示をXSLTで行っていることです。MySQL標準のダンプを使ってスキーマをXMLで出力し、それをXSLTで表示してい
lit - 軽量なレスポンシブWebフレームワーク
CSSフレームワークは大型なものになるほど便利な機能が追加されますが、その制約もまた大きくなります。Webデザイナーであれば、レスポンシブなどの機能だけあって、他は自由度が高いものを選びたいと思うのではないでしょうか。 今回紹介するlitはわずか395byteしかないレスポンシブWebフレームワークになります。小さいだけに余計な機能も少ないことでしょう。 litの使い方 スクリーンショット多めです。まずはグリッド機能。12等分される、よくあるものです。 タイポグラフィ。 ナビゲーションバー。 ボタンとリスト。 フォーム。 テーブル。 カード。 カードを使えば、こんなレイアウトにも。 水平線。 litではあまり多くの機能は用意されていません。別途ユーティリティとして使えるCSSも用意されており、必要に応じて組み合わせることができます。クラスも多くありませんので、習得は容易そうです。 litは
最近のWebフロントエンドフレームワークでは、デザインとコードの分離ではなく、画面の役割をもって分離しています。そのためデザインとコードが一つのコードの中にあり、デザイナーにとっては慣れるまでデザインしづらいと感じているかも知れません。 もしReactで開発しているプロジェクトならば、Utopiaを使ってデザインしてみると良さそうです。 Utopiaの使い方 エディタ画面です。 ストーリーボードなる機能もあります。 コードエディタです。左側にはファイルツリーがあります。 コンポーネントの構造も可視化されます。 マウスで選ぶと選択されているコンポーネントが斜線されます。 ズーム表示もできます。 Utopiaはコンポーネントを変更したり、右側にあるプロパティを変更することでリアルタイムにデザインを確認できます。Visual Studio Codeとデザインプレビューが組み合わさった形になります
imgpush - オープンソースの画像共有サーバ
MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました ImgurやGyazoなど画像アップロードサイトは多数あります。そうしたサイトを使うことで友人やコミュニティサイトなどで画像共有を簡単に行えますが、コンテンツの公開制限をはじめ、自分で制御できないことに不安を感じる人もいるでしょう。 そこで使ってみたいのがimgpushです。画像を簡単にアップロードできるサーバを手軽に設置できます。 imgpushの使い方 imgpushを立てたら、後はそこにポストするだけです。 $ curl -F 'file=@photo.jpg' http://localhost:5000 {"filename":"Vl0U9.png"} この場合、 http://localhost:5000/Vl0U9.png で画像にアクセスできます。 wとhというパラメ
UMLをテキストベースで記述できるPlantUMLを使っている方は多いのではないでしょうか。クラス図を流用する形でER図も描くことができます。そして、データベースはすでにあり、そこからPlantUML用に出力できればいいのに、と考えている方もまた多いでしょう。 そんな方にお勧めなのがplant_erdです。各種データベースに対応したER図エクスポートソフトウェアです。 plant_erdの使い方 出力した内容をPlantUMLで表示しています。 plant_erdはSQLite3、MySQLそしてPostgreSQLに対応しています。各データベースの内容をそのままPlantUML向けに出力が可能です。特定のテーブルだけを出力対象にもできます。リレーションも再現され、データベース構造をドキュメントに書き出すのにぴったりです。 plant_erdはGo製のオープンソース・ソフトウェア（MIT
Drawflow - データフローを作成するライブラリ
MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました ノーコードプラットフォームが普及してきています。プログラミングはせずに、多くの場合はGUIで部品同士を組み合わせて一つの機能を作り上げていきます。 そうしたUIを作るのに使えそうなUIライブラリとしてDrawflowを紹介します。 Drawflowの使い方 デモのUIです。 つながっている線は選んで削除できます。 拡大したり、ノードに変数を与えるといったこともできます。 ダブルクリックのイベント処理。 新しいノードの追加も可能です。 Drawflowは左側の機能（ノード）をドラッグ&ドロップで追加して、各ノードを線でつなぎます。ノーコードプラットフォームであったり、Node-RedやYahoo! Pipes、ScratchのようなUIを実現するのにも使えるでしょう。 Drawflo
xcodes - Xcodeのバージョン管理ツール
MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました Xcodeは最新のものを使うのが基本ですが、場合によっては古いバージョンを使わないといけないこともあります。さらに最新といってもベータと共存させて新しいiOS向けの開発と同時にこれまでのものをメンテナンスする機会も多いです。 そんな様々なバージョンが混在するXcode環境を効率的に管理できるのがxcodesです。 xcodesの使い方 listコマンドでインストールできるXcodeがリストアップされます。 $ xcodes list 2.3 2.4 : 11.5 (Installed, Selected) 11.6 Beta 12.0 Beta 12.0 Beta 2 (12A6163b) 12.0 For Macos Universal Apps Beta 12.0 For Ma
Webの解析ツールというと、アクセスを解析するものが殆どです。ビューやUUを計測して、Webサイトの改善に活かします。それらのデータは管理者向けのものであり、訪問者はデータを渡すだけでした。 Falcoは異なる視点でデータを収集します。それはWebサイトの使いやすさ、パフォーマンスに注目しています。 Falcoの使い方 ダッシュボードです。 Lighthouseのレポートも見られます。 さらに細かい数字も分かります。 グラフの追加も可能です。 別なパフォーマンステスターの結果も見られます。 Falcoは自動的にデータを収集してくれるので、日々の更新によって徐々にパフォーマンスが劣化しているといった変化も分かるようになります。ページごとに解析できるので、改善すべきページもすぐに分かるでしょう。 FalcoはTypeScript製のオープンソース・ソフトウェア（MIT License）です。
Exment - マスタ管理に便利なWebデータベース
Microsoft Accessはオフィスで活躍しています。ちょっとしたシステムであればエンジニアの手を借りることなく、作成できるでしょう。しかし最近ではmacOSも使われるようになっていたり、スマートフォンからも使いたいと言われるかも知れません。 そこで使ってみたいのがExmentです。手軽に使えるWebデータベースシステムです。 Exmentの使い方 作成例です。基本的にダッシュボード風の画面になるようです。 テーブル一覧です。 テーブルの設定です。 テーブルの列設定です。 基本情報です。 データ一覧です。 グラフも表示できます。 マスターデータを登録するのに良さそうです。 Exmentは情報資産をWeb上で管理するためのソフトウェアとのことで、ユーザ自身がテーブルを設計して、データをメンテナンスできます。Excel出力やカレンダービューなどの業務系で便利そうな機能も備わっています。
開発者であれば手はキーボードのホームポジションに置き続けるのが効率的なはずです。しかしGUI操作を行う際にはマウスなどを使わざるをえません。ウィンドウの場所や大きさを変える度にマウスに手をやるのは面倒です。 そこで使ってみたいのがRectangleです。キーボードショートカットでウィンドウ操作を行うソフトウェアです。 Rectangleの使い方 起動しました。 キーボードショートカット一覧です。自分で変更も可能です。 こんな感じでウィンドウを画面に寄せたりできます。 設定です。 Rectangleは多彩なショートカットが用意されているので、まずそれを覚えないといけません。一旦覚えてしまえば、素早くウィンドウを移動させられるようになるでしょう。画面の端などにぴたっと寄るので、マウスで移動させるよりも素早く、的確に移動できるはずです。 RectangleはSwift製のオープンソース・ソフトウ
Web上で扱うことも多いPDF。ただドキュメントとして表示するだけで、あえてJavaScriptから操作することは殆どないでしょう。しかし、JavaScriptとPDFが連携できるようになれば、もっと可能性が広がりそうです。 今回紹介するPDF-LIBはWebブラウザ、nodeのどちらからでも操作できるPDFライブラリです。 PDF-LIBの使い方 JavaScriptだけでPDFを作成しています。 既存のPDFにテキストを追加することもできます。 複数のPDFを一つにまとめることも。 画像を差し込むサンプル。 フォントを指定して実行。 メタデータを追加することもできます。 さらにSVGをPDFに描画します。 PDF-LIBは新規のPDFはもちろん、既存のPDFに手を加えることもできます。レポートを作るレベルになるとそれなりに難しそうですが、簡単な内容であればJavaScriptだけでPD
MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました macOSやiOS間でファイルを送受信するのに便利なのがAirDropです。しかしWindowsでは使えないという問題があります。また、macOSでも標準実装されているAirDrop機能を使わないとならず、Finderを立ち上げたりするのが面倒です。 そこで使ってみたいのがOpenDropです。PythonによるAirDrop実装です。 OpenDropの使い方 OpenDropを立ち上げます。まずfindで対象になるデバイスを探します。 $ opendrop find Looking for receivers. Press enter to stop ... 後は send または receive を使います。sendはファイルを指定し、receiveはファイルが送られてきます
linedraw - 画像をSVGに変換
MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました 画像を変換する類のソフトウェアは多数あります。例えばアスキーアートに変換したり、グレースケールにする、油絵風にするなど様々です。手法を知っておけば、目的に応じてぴったりなソフトウェアが選べるはずです。 今回紹介するlinedrawは画像をSVGにしてくれるソフトウェアです。他では見られないものだけに知っておくと役立ちそうです。 linedrawの使い方 元画像。 変換後。SVGです。 筆者の写真を変換した場合。 linedrawはラフなスケッチ的な感じで画像をSVGに変換してくれます。SVGなので縮小や拡大をしても綺麗なままです。構造が分かれば、JavaScriptから操作することもできるでしょう。バイナリの画像ではないところが使い道につながりそうです。 linedrawはPyth
HTMLで使ってデータをテーブル表示するのは簡単です。しかし、ちょっとUIをよくしたり、ソートなどの機能を追加しようと思うと、途端に面倒になります。素のHTMLのままではとても使い勝手がいいとはいえません。 そんなHTMLテーブルを手軽に高機能化してくれるライブラリがGrid.jsになります。 Grid.jsの使い方 データはJSONで渡すだけです。 HTMLを使うこともできます。 ページネーションも使えます。 キーワードによるフィルタリング。 ソート。 横に長いテーブルも問題ありません。 Grid.jsはライブラリ依存がないJavaScriptで作られています。しかし、Angular/React/Vueをサポートしており、フレームワークと組み合わせて高機能なテーブルを提供できます。足りない機能はフレームワーク側で提供すればいいでしょう。 Grid.jsはTypeScript製のオープンソ
2019年のOSS活動の振り返り記事です。 今までの振り返り。 今年のOSS活動振り返り @ 2018 | Web Scratch 今年のOSS活動振り返り @ 2017 | Web Scratch 今年のOSS活動振り返り @ 2016 | Web Scratch 今年のOSS活動振り返り @ 2015 | Web Scratch 今年のOSS活動振り返り @ 2014 | Web Scratch 2019年のGitHubのContributionsは7000~10000ぐらいを推移していました。 ちょっとプライベートリポジトリのコミット比率が上がって、原因はasocial-bookmarkでのブックマークシステムな気がします。後は、仕事のリポジトリがPrivate比率多い。 GitHubのCurrent Streakは2246日で6.153424658年コミットは続いています。 データ
Pakyow - デザインファーストなフレームワーク
Webフレームワークというとプログラマ向けのものが殆どです。プログラマにとって使いやすくともデザイナーにとって使いやすいとは限らず、なかなか普及しないケースもあります。 そこで注目したいのがPakyowです。デザインファーストなWebフレームワークです。 Pakyowの使い方 例えばこんな感じでコンテンツを作ります。とてもシンプルな内容なのが分かります。 <article binding="message"> <p binding="content"> content goes here </p> </article> <p binding="message" version="empty"> nothing here yet </p> <form binding="message"> <input binding="content" type="text"/> <input type="
開発ドキュメントのデファクトフォーマットにもなっているMarkdown。Markdownで書いてさえおけば、その後別なフォーマットに変換するのは難しくありません。その逆で、これまで別なフォーマットで書いていたドキュメントをMarkdownにしたいというニーズもあるでしょう。 今回紹介するdocx2mdはWordドキュメント（docx形式）をMarkdown記法にしてくれるソフトウェアです。 docx2mdの使い方 実行例です。行間がないので詰まった印象がありそうです。 docx2mdは瞬時にMarkdown記法で書かれた内容が標準出力されるので、既存のドキュメントをさくさくと変換できそうです。逆にMarkdownからWordドキュメントに変換するソフトウェアもあるので、必要に応じて変換すれば良いでしょう。テキストであればバージョン管理もしやすく、メンテナンスも楽でしょう。 docx2mdは
Web上でアイコン画像を使う方法は幾つかあります。オーソドックスな画像に加えて、アイコンフォントを使うこともできます。画像はバイナリもあれば、SVGも利用できます。高解像度でもぼやけず、小さな画面でもつぶれないSVGは最近利用が広まっています。 さらに覚えておきたいアイコンがCSSアイコンです。SVG同様に拡大しても綺麗なのが特徴です。今回はそんなCSSアイコンを500種類以上集めたcss.ggを紹介します。 css.ggの使い方 一覧です。黒単色で描かれたアイコンになります。 左側にカテゴリが多数並んでいるのが分かります。 その中の一つです。 CSSも公開されています。これをコピーして貼り付けるだけでCSSアイコンとして利用できます。 css.ggに限りませんが、CSSアイコンの魅力としては外部リソースとして用意する必要がなく、HTMLのインラインですら利用できることでしょう。また、全部
ydiff - ターミナルで左右に並べた差分表示
バージョン管理では差分表示ツール（diffツール）がセットとして使われています。ターミナルなどでは縦型の差分表示が多いですが、GUIやWebでは左右に並べた表示が多くなっています。左右の方が、実際には分かりやすいのでしょう。 そこで使ってみたいのがydiffです。ターミナルベースで、左右に並べた差分表示が実現できます。 ydiffの使い方 表示例です。 ydiffは左側に修正前、右側に修正後のコードを表示します。GUIアプリなどでは一般的な表示でしょう。文字単位で差分を出してくれるのも便利です。Gitコマンドなどでそのまま使えるので、設定しておくと開発が捗ることでしょう。 ydiffはPython製のソフトウェア（ソースコードは公開されていますがライセンスは明記されていません）です。 joshuarli/ydiff: side-by-side, character-level git un
DevRel Meetup in Tokyo #74 で「普通のWeb系事業会社のブログ運営」について発表しました #DevReljp - エス・エム・エス エンジニア テックブログ
このブログの運営に携わっているエンジニアの @koma_koma_d です。 5月11日に開催された「DevRel Meetup in Tokyo #74 〜アウトプット〜」で、「普通のWeb系事業会社のブログ運営」というタイトルで発表してきました。 devrel.connpass.com 発表にいたるまで きっかけは、3月に公開した以下のブログ記事で、運営の方から「発表しませんか？」とお声がけをいただいて発表することになりました。 tech.bm-sms.co.jp 当初はブログ記事の内容をそのまま発表するような形を考えていたのですが、私の後に登壇するのが株式会社メルカリで技術広報を担当されている @afroscript10 さんということだったので、差別化できるような内容でお話ししたいなと考えました。そこで、たくさんのエンジニアがいるわけでもなく、特定の技術に尖っているのでもない「普通
アイコン集はいくら知っていてもいいものです。多彩なパターンに対応したものもあれば、特定の用途に使えるものもあります。様々なものを知っていれば、役立つ機会が多いにあります。 今回紹介するSuperTinyIconsは1KB以下という小さなサイズが特徴なアイコン集となっています。 SuperTinyIconsの使い方 ソーシャルメディアとメディア。 Google。 コミュニケーション。 Webサイト。 Webサイトとインターネット。 ブラウザとポッドキャスト。 ロゴ。 セキュリティ。 決済。 プログラミング。 その他。 SuperTinyIconsの各アイコンにはサイズも書かれています。その殆どが3桁バイトであるのが分かります。SVGと合わせてPNGも提供されています。汎用的なデザインなので、利用できる場面は多そうです。 SuperTinyIconsは edent/SuperTinyIcons
Web上でグラフを描きたいケースはとても多いです。そしてグラフは単に1種類知っておけばいいわけではなく、用途に合わせて最適なものを選ばないといけません。一つのライブラリだけで行うなら、なるべく多くの表示パターンに対応したものを使うべきでしょう。 今回紹介するbillboard.jsは一般的なグラフであれば、大抵こなせる強い味方です。覚えておくと使える場面が多そうです。 billboard.jsの使い方 主なグラフについて紹介していきます。まずは円グラフ。 オンマウスに対応しています。他のグラフも同様です。 エリアチャート。 エリアレンジチャート。 棒グラフ。 バブルチャート。 複合グラフ。 ドーナッツグラフ。 ゲージグラフ。 折れ線グラフ。 折れ線グラフですが、途中線種を変えています。 レーダーチャート。 散布図。 曲線グラフ。 積み重ねの棒グラフ。 ステップグラフ。 グリッドライン。 横
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
GifCapture - デスクトップ操作をアニメーションGIF化
Hacker UI - 開発者向けのWeb UIフレームワーク
drawthe.net - Visioに頼らず綺麗なネットワーク構成図を手に入れる MOONGIFT
GAS 家計簿 - Google Apps ScriptとVueで作られたWeb家計簿
テックブログを分析して分かった始めるコツ・続けるコツ
Nautilus - Docker Composeの設定を可視化
Wireflow - Webサイトのユーザフロー/ワイヤーフローを自由に作成 MOONGIFT
Vscode Google Translate - Visual Studio Code上でGoogle翻訳実行
ProtoGraphQL - GraphQLをビジュアル的に設計
MySQLSchemaDoc - WebベースのMySQLのテーブル定義書
Utopia - Reactのデザイン設計をスムーズしてくれるWebエディタ MOONGIFT
plant_erd - ER図をPlantUML用にエクスポート
Falco - Webサイトのパフォーマンスを可視化するダッシュボード MOONGIFT
Rectangle - macOSのウィンドウ操作をキーボードで
PDF-LIB - JavaScriptでPDFを作成、更新 MOONGIFT
OpenDrop - Pythonで実装されたAirDrop
)
Grid.js - React/Angular/VueをサポートしたHTMLテーブルライブラリ MOONGIFT
今年のOSS活動振り返り @ 2019
docx2md - WordドキュメントをMarkdown記法に変換
css.gg - 500種類を超えるCSSアイコン集 MOONGIFT
SuperTinyIcons - 1KB以下の軽量アイコン集
billboard.js - D3.jsを用いた多彩なグラフライブラリ MOONGIFT