MOONGIFT更新停止のご連絡 MOONGIFT
いつもMOONGIFTをご覧いただきありがとうございます。タイトルにあります通り、MOONGIFTの更新を恒久的に停止するご連絡となります。最終更新記事は2021年07月16日になります。 背景 MOONGIFTはオープンソース・ソフトウェアの紹介サイトとして2004年01月29日に運営を開始しました。一番最初はlivedoorブログにて開始し、その後様々なブログプラットフォームを利用し、さらに一時はサイト名の変更（Open Alexandria）を経て、MOONGIFTという名称で運営を続けてきました。 MOONGIFTでは、これまでに16,000以上のソフトウェア（一部オープンソース・ソフトウェア以外のソフトウェアを含む）を紹介してきました。オープンソース・ソフトウェアは多くの先進的な技術への取り組みが行われており、オープンソース・ソフトウェアを知ることはソフトウェアの開発トレンドを知
GAS 家計簿 - Google Apps ScriptとVueで作られたWeb家計簿
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 家
copy-code-block - プログラミングコードをクリップボードにコピー MOONGIFT
ブログなどでコードを記載しているサイトは多いです。その表示方法も様々で、行番号があるもの、ハイライトが付いているものなどがあります。そのコードをコピーしても余計な行番号が付いてきたりして、ストレスと感じたりします。 そこで使ってみたいのがcopy-code-blockです。自由度の高くコードのコピーが可能です。 copy-code-blockの使い方 コードハイライタと組み合わせた例です。 コピーボタンを押すと、コードだけがコピーできます。 <div class='cool-container'> <p class='cool-description'>Get ready for...</p> <ul class='cool-list'> <li class='cool-item'>rainbows</li> <li class='cool-item'>and</li> <li class
GifCapture - デスクトップ操作をアニメーションGIF化
アニメーションGIFはとても使い道が多いです。動画だとついつい冗長的になってしまいがちですが、アニメーションGIFはハイライト部分だけを切り出して作られています。面白い部分だけが繰り返し再生され、音声もないとあって、面白さが増幅します。 そんなアニメーションGIFをデスクトップで手軽に作成するソフトウェアとしてGifCaptureを紹介します。 GifCaptureの使い方 起動すると枠だけが表示されます。この部分が録画されます。 設定は保存場所だけ。 保存すると通知が送られてきます。 個人的にはLICEcapをメインで使っていますが、GifCaptureは同じような使い勝手のソフトウェアになります。LICEcapがちょっと機能が追加されて複雑になった気がしますが、GifCaptureはシンプルなままです。好みによりますが、個人的にはGifCaptureのが好きです。 GifCapture
Tabulator - これはすごい。HTMLテーブルを高機能に MOONGIFT
テーブル表示はWebシステムのデファクトとも言えます。業務システムはいうに及ばず、管理者画面などでも必ず求められる表示です。そしてただ表示すればいいという訳ではなく、ソートやフィルタリング、インラインでの編集など様々な機能が求められるものです。 そんな多機能なテーブル表示を実現してくれるのがTabulatorです。多くのニーズを満たしてくれることでしょう。 Tabulatorの使い方 てんこ盛りなデモテーブル。ざっと見てもフィルタ、ページネーション、グラフ表示、ソートなどの機能が確認できます。 インライン編集もサポートされています。 データに合わせて幅を自動調整。 行をクリックして展開する機能。 カラムをグループ化。 カラムを縦に。これはカラムが多い時に便利そうです。 ドリルダウン。 テーブルを入れ子にもできます。 スパークライン表示。 フッターで集計。 HTMLテーブルを変換する機能もあ
BootLeaf - Bootstrap/Leafletを使った地図テンプレート MOONGIFT
地図とWebは相性が良いです。移動中に地図を見たいと思うことは多いですし、旅行や出張前に計画を立てる上でも地図が必要です。それもあり、Googleマップをマッシュアップする地図サービスは無数に存在します。 今回紹介するBootLeafはそんな地図マッシュアップのベースになるようなソフトウェアです。様々な情報を地図に載せやすくなっています。 BootLeafの使い方 地図が右側に、表示している情報が左側に一覧になっています。 メイン画面 左のリストから選ぶと該当するデータがハイライトします。 データ選択 さらに詳細なデータはモーダルで表示されます。 モーダル表示 データは検索でインクリメンタルに絞り込めます。 検索 ラインデータの表示もサポートされています。 ラインデータ表示 データはチェックボックスで表示/非表示が切り替えられます。 データの追加表示 BootLeafを使えば地図と独自のデ
Primer - GitHub製。みんなで使えるデザインフレームワーク MOONGIFT
企業やプロジェクトによってデザインガイドラインは自ずと必要になってきます。それが社で働くデザイナーの共通認識になる訳ですが、例えばFacebookアプリを作る際にはボタンやデザインをFacebookっぽくしたくなるのではないでしょうか。つまりデザインガイドラインは社内だけでなく社外の人にとっても有益なのです。 そこで登場したのがPrimerです。PrimerはGitHubが作り、使っているデザインガイドラインになります。 Primerの使い方 スクリーンショットを多めで紹介します。まずはグリッド。 ヘッダー。h1〜6まで対応。 テキスト。若干小さめ？ インラインテキストの装飾。 ボタン。ここはGitHubっぽいですね。 ボタングループ。こういうのもGitHubで使われていますよね。 フォーム。シンプルです。 フォームグループ。縦に並べる時に使えます。 メニュー。アイコンはオプションです。
有名なWebサイトのデザインをPSDで提供·Popular UIs MOONGIFT
Popular UIsはAdobe Photoshop製のオープンソース・ソフトウェア（MIT License）です。 有名なWebサイトではそのデザインについても様々な考察の上で成り立っています。そこからエッセンスを学び、自分のデザインに活かせる点は多いはずです。そこで使ってみて欲しいのがPopular UIsです。 Herokuです。 こちらはApple。 Designer News。 GitHub。 Facebook。 一枚絵ではなくちゃんとレイヤーに階層化されています。 Popular UIsはPSDファイルで提供されています。レイヤー、グループ化されていますので必要な部分だけ素材を切り出したりするのも簡単です。Facebookではルーラーがたくさん設定されていますが、他のPSDでは基本的な部分だけになっているようです。 MOONGIFTはこう見る プログラマーがソースコードを見る
これは格好いい。Windows 8のMetro UIをHTML5で再現·Metro UI CSS MOONGIFT
Metro UI CSSはWindows 8のMetro UIをHTML5/CSS3で再現したソフトウェアです。 次期WindowsのWindows 8ではMetro UIと呼ばれる新しいインタフェースが利用されています。そんなMetro UIをCSSで再現したのがMetro UI CSSになります。 デスクトップで見たイメージです。アイコンが並んでいます。 選択できる画像リストです。 選択できるリストです。画像も埋め込めます。 チャットなどで使えそうなリストです。吹き出しもついています。 アプリケーションリストです。 時計などのウィジェットです。 iPadでの表示です。タブレットの方が最適化されています。 左右の移動もできます。 デモ動画です。動きはスムーズです。 動きはかなりスムーズで格好いいです。パネルを押すとちょっとへこんだり、ボタンも多数用意されています。リストをタップして選択し
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
