CLog.js - コンソールログをカラフルに MOONGIFT
Google ChromeのDevToolsではコンソールに文字を出力する際にinfo/log/errorなどで指定できます。それによって文字の色が変わるのですが、情報の意味も指定されてしまうのが難点です（特にエラー）。 単に文字色を変えるだけであればCLog.jsを使ってみましょう。コンソールに出る文字色が変わるとぐっと見やすくなるはずです。 CLog.jsの使い方 インストールはnpmまたはBowerが使えます。 npm install clog_js bower install clog 次にCLogオブジェクトを作ります。 var options = { group: false, colors: { log: "#31f095", home: "#e86024", error: "#e22f2f", network: "#08bce9", } } var clog = new C
mas - Mac OSXのApp StoreをCUIで使う
MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました Mac OSXにはスマートフォンのようにアプリストアが存在します。これを使うことでアプリケーションが探しやすくなったり、インストールが容易になると言ったメリットがあります。しかし問題はApp Storeアプリが重たく、使い勝手が悪いということです。 そこで使ってみたいのがmasです。CLIベースでアプリのインストールができるソフトウェアです。 masの使い方 masでlistコマンドを使うと購入済みのアプリがリストアップされます。 $ mas list 409203825 Numbers 478330793 Camtasia 2 403858460 EchofonLite 409201541 Pages 497799835 Xcode 585829637 Todoist 40918
Hammerspoon - LuaでMac OSXを自動操作
MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました 仕事でPCを使っていると、いつしかルーティーンが生まれていきます。何度も同じ操作を繰り返したりするのは人がすべき作業ではありません。どんどん自動化し、創造的な仕事に努めるべきです。 もしあなたがLuaの扱いに慣れた人であればHammerspoonを使ってみましょう。HammerspoonはMac OSX用の自動操作ソフトウェアです。 Hammerspoonの使い方 Hammerspoonの設定画面です。起動するとメニューバーに常駐します。 例えば以下のようなコードを書くと、コマンド+Alt+Ctrl+wでHello Worldと表示されます。 hs.hotkey.bind({"cmd", "alt", "ctrl"}, "W", function() hs.alert.show("
dragula - 簡単に使えるD&Dライブラリ
MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました Webアプリケーションではドラッグ&ドロップインフェースがよく使われます。ファイル管理風のUIを使う場合もそうですし、リストの並び替えであったり、Gmailのようなメーラーでも使われる機能です。 そんなWeb上でのドラッグ&ドロップ操作を実現してくれるのがdragulaです。とても手軽に使えそうです。 dragulaの使い方 dragulaのデモです。 使い方は簡単で、例えばjQueryなら次のようにDOMを指定するだけです。 dragula([document.querySelector('#left'), document.querySelector('#right')]); 他にもAngular/Angular2/Reactでも使うことができます。 こんな感じにドロップでイベ
hack.css - ハッカー用のCSSフレームワーク MOONGIFT
CSSフレームワークがたくさん出ています。それぞれにコンセプトがあり、サイトの雰囲気に合わせて選択するのが良いでしょう。Bootstrapが人気ですが、何でもBootstrapが良いという訳ではありません。 もし開発者らしいサイト、プロジェクト用のページを立ち上げるならばhack.cssはいかがでしょうか。ハッカー用のシンプルなCSSフレームワークです。 hack.cssの使い方 全体の雰囲気です。Markdown風に書かれています。 グリッド。 フォーム。 ログインフォーム。 テーブル。 ボタン。 カード。 アラート。 メディア。 ローディング。 ハッカーらしく、ブラック主体のテーマも用意されています。 hack.cssはシンプルなCSSフレームワークと謳っていますが、機能が不足している訳ではありません。メディア表示やアラートなど、一通りの機能は揃っています。後はこの雰囲気に合わせて追加
Certificate Dashboard - 証明書期限が一覧できるダッシュボード
SSL/TLS証明書の管理は面倒です。ついつい更新を忘れてしまってエラーが出たという経験は誰もがあるのではないでしょうか。大手のSSL事業者であればリマインダーメールもくれますが、これもスルーされがちです。 今回はWebブラウザで証明書の期限をチェックできるCertificate Dashboardを紹介します。 Certificate Dashboardの使い方 Certificate Dashboardのトップページです。ドメインは環境変数で指定できます。 22日後ということなので更新しました。 Certificate Dashboardを使えば証明書の期限をいつでも簡単にチェックできます。色分けもされるので赤くなったら更新するようにしましょう。 Certificate Dashboardはnode/JavaScript製のオープンソース・ソフトウェア（MIT License）です。
Git Issues - Gitリポジトリを使った課題管理
MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました 開発プロジェクトのタスク管理はリポジトリの近くにあるのがオススメです。GitHubではWeb上にIssue機能を実装し、コードを参照にしつつ課題管理ができます。 Git Issuesは任意のディレクトリを使って課題管理ができるソフトウェアです。データの管理にはGitリポジトリを使っています。 Git Issuesの使い方 Git Issuesは最初にディレクトリで gi init を実行するところからはじまります。あとは下にあるようにnewでタスクを作ったり、listで一覧の取得ができます。 $ gi list $ gi new "Translate to English" Operation aborted $ gi new -s "Translate to English" A
ghurl - GitHubのIssueを使ったサーバレスな短縮URL
MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました 短縮URLサービスは幾つか存在します。その多くが実際のURLと短縮されたURLとをデータベースに持ち、短縮URLへアクセスがあると元のURLにリダイレクトさせるという仕組みになっています。つまりサーバサイドの仕組みが必要です。 そんな常識を打ち砕いてくれるのがghurlです。なんとサーバレスで短縮URLシステムを構築しています。 ghurlの使い方 ghurlの画面です。 URLを入力すると、GitHubのIssueに飛びます。そう、URLをGitHub上に蓄積しているのです。 そして短縮URLへアクセスすると、サーバ側でのリダイレクトではなく、JavaScriptを使ったリダイレクト処理になります。 ghurlはGitHubのAPIを使い、IssueのIDごとに実際のURLを保存
Label.css - 画像の上にラベルを自在に配置 MOONGIFT
Webサイトを作っていて画像はよく使われます。さらに画像にはキャプションとして説明をつけてあげることでより分かりやすいものになります。説明がない画像は一見すると何のことか分からない場合もあります。 そこで使えるのがLabel.cssです。単に画像の下に説明をつけるだけでないキャプションの使い方ができるようになります。 Label.cssの使い方 一例です。縦、横ともに中央寄せ。 左下への配置。 右上。 中央の右寄せ。 さらに表示の仕方を変更できます。分かりづらいですがフロートで表示しています。 写真の上にキャプションを重ねることで、視点の移動が少なくなり、より訴求できるようになります。その場所も写真によって効果的な配置が考えられるでしょう。ブログやメディアサイトで積極的に使っていきたいソフトウェアです。 Label.cssはCSS3製のオープンソース・ソフトウェア（MIT License）
Tabby - UIが殆どないWebブラウザ
デスクトップソフトウェアの操作は慣れてくるとキーボードショートカットを使って素早く行うようになります。いちいちマウスを使っていては一つ一つの操作が遅くなりがちですし、一回持ったマウスを手放さずに時間を浪費してしまったりします（特にWebブラウジング）。 そこで使ってみたいのがTabby、ほとんどUIらしいUIを持たないWebブラウザです。 Tabbyの使い方 メイン画面です。キーボードショートカットだけが出ています。 Chromium派生ブラウザなので、レンダリングは日本語も問題ありません。 明示されていませんが、キーボードショートカットでDevToolsを呼び出せます。 Tabbyは複数タブに対応していますが、タブを表示する場所がないなど、徹底してUIをシンプルに保っています。玄人向けなブラウザかも知れません。 TabbyはWindows/Mac OSX/Linux向けのオープンソース・
Lorry.io - Docker Composeの設定ファイルをビジュアルで作成 MOONGIFT
Dockerでは複数コンテナを立ち上げたり、それぞれの役割を管理する上でDocker Composeという仕組みによって行います。設定ファイルはYAMLなのですが、設定ファイルを間違いなく記述するというのは常に困難なものです。 そこで使ってみたいのがLorry.ioです。Lorry.ioはWeb上でDocker Composeのファイル作成を補助してくれるソフトウェアです。 Lorry.ioの使い方 こちらがLorry.ioのトップページです。 設定画面に入りました。既存の内容を編集したり、新しいサービスブロックの追加ができます。 新しいサービスブロックを作るのも簡単です。 編集したファイルはそのままダウンロードできます。 Lorry.ioはDockerコンテナを複数立ち上げてサービスを作る場合、とても便利に使えるサービスになるでしょう。Lorry.ioはWebサービスも提供していますので
Tern - JavaScriptコード解析エンジン
MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました プログラミングする上で必須の機能と言えるのがコード補完です。そのためにはまずコードの解析が行われなければなりません。正しくコードが解析されることで、既にある変数やライブラリ名を補完できるようになります。 JavaScriptをコーディングする際に使えるコード解析ライブラリがTernです。Web上はもちろん、Emacs/Vimなどのプラグインも提供されているソフトウェアです。 Ternの使い方 Ternを使うとこんな感じにIDE的な入力補完ができます。 関数に対する引数の表示も。 定義元に飛ぶこともできます。 jQueryやunderscoreにも対応しています。 TernはWeb、Emacs、Vim、Sublime Text、Brackets、Light Table、Eclipse
iconate.js·Web Fontをアニメーション MOONGIFT
最近のWebサイトでは単色のアイコンを使うことが増えています。言葉で説明しない分、分かりやすいのですが、ユーザの目を引きたい時になかなか目立たせることができないという問題もあります。 そこで使ってみたいのがiconate.jsです。2つのアイコンを指定して、その間を綺麗にアニメーションしながら切り替えてくれるライブラリです。 iconate.jsの使い方 アニメーション系なので、実際の動きを見るのが一番分かりやすいでしょう。 デモではアイコンとしてFont Awesomeを使っています。アイコンはWeb Fontを対象にしているようです。アニメーションは多数用意されていますので、自由に選択してアイコンを切り替えることができます。矢印をアニメーションさせたり、鉛筆アイコンをアニメーションさせて保存を促すといったような使い方はいかがでしょう。 iconate.jsはJavaScript製、MI
wego – コンソールで天気を確認
MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました サーバ管理者がふと明日の天気が気になったらどうしたら良いでしょう。Webブラウザを立ち上げるのは面倒くさい。かといってw3mなどでは今時のグラフィカルなお天気サイトは見られないかも知れません。 そこで使ってみたいのがwegoになります。CUIなのに超リッチなUIのお天気ソフトウェアです。 wegoの使い方 wegoのインストールはgo getでできます。 $ go get github.com/schachmat/wego そしてWorld Weather OnlineというサイトでAPIキーを取得&設定ファイルに書きます。これで準備は完了です。 wegoというコマンドで表示されます。 .wegorcという設定ファイルで都市を指定できます。例えばTokyo、Yokohamaなどです
Dribbble app built with React Native - React Native風のDribbbleビューワー
MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました React Nativeに熱い視線が集まっています。Reactを使ってWebベースのようにiOSのネイティブアプリが開発できるのが魅力と言えます。制限も多いとは思いますが、それでもどんなことができるのかみんなが試行錯誤しながら試しているのが現状です。 そんなReact Nativeを使って作られたアプリがDribbble app built with React Nativeです。ごくシンプルなDribbbleビューワーアプリとなっています。 Dribbble app built with React Nativeの使い方 立ち上げた画面です。Dribbbleに投稿されている画像が表示されています。 作品の詳細画面です。閲覧のみでコメントなどはできません。 タブバーも動作します。
blessed – CUIながらリッチなインタフェースを実現しよう
MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました CUIのアプリケーションと言えば基本はCLIで、白黒なものが多いでしょう。Linuxのインストーラーであったり、MySQLのパスワード入力などがGUIっぽい画面ですごいと思わされることもありますが、それはほんの一握りでしかありません。 しかしblessedを使えばGUIアプリケーション並のUIが作れるようになります。ぜひ試してみましょう！ blessedの使い方 CUIアプリケーションながら、画像じゃないと伝わらないのが面白いです。 この画面を作るためのコードは次のようになります。 var blessed = require('blessed'); // Create a screen object. var screen = blessed.screen({ autoPaddin
FormFiller - フォーム入力しながらの開発作業がとてもスムーズに MOONGIFT
Webシステムのテストと言えば、入力してサーバに送ってデータをチェックして、また入力して…の繰り返しです。それこそうんざりするほど入力を繰り返すのではないでしょうか。 そこで使ってみたいのがFormFillerです。ブックマークレット型のソフトウェアで、入力を再現してくれる機能があります。 FormFillerの使い方 FormFillerはブックマークレットなので、ツールバーなどに登録後、まず何も入力していないフォームでクリックします。 そして再度フォームを表示した際にブックマークレットを実行すると入力内容が再現されます。 使用例。ブックマークレットを実行すると最後に入力した内容になります。 FormFillerは入力を監視し、最後の入力内容に復元してくれます。JavaScriptを修正しつつ、フォーム入力を行う…といったフロントエンド開発に大いに役立つことでしょう。 FormFille
Reddinator – Android用Redditビューワー
MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました USのギークな人たちが集う場所、Reddit。一時はDiggなどに押されていましたが、今は復活し、多くの質問と回答が日々寄せられています。Stackoverflowはプログラミング中心ですが、Redditはもっと幅広く様々な話題が飛び交っています。 あまりにも多くの話題があるので消化しきれないという人は多いでしょう。そこで欲しくなるのが専用クライアントです。今回はAndroid用のRedditクライアントReddinatorを紹介します Reddinatorの使い方 Reddinatorを立ち上げると、まずは記事一覧が表示されます。画像や動画がある場合、サムネイルが表示されます。 Reddinatorで元記事を読むことができます。 こちらはReddit上でのやりとり。 サブミットや
Shaarli - とてもシンプルなソーシャルブックマーク
MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました かつて一世を風靡したDeliciousですが、サービスの展開において二転三転している内に、個人的には徐々に離れていってしまっています。純粋なソーシャルブックマークとしては非常に便利でユニークなサービスでした。 その頃のDeliciousを彷彿とさせるようなシンプルなソーシャルブックマークエンジンがShaarliです。自分のサイトに設置してみても面白いのではないでしょうか。 Shaarliの使い方 こちらがトップページ。シンプルですね。 一件だけ。特に表示は変わりません。 テキストやタグで絞り込むことができます。 タグごとでのフィード配信にも対応しています。 ユニークなのはピクチャーウォールでしょうか。画像でブックマークが見られます。 Shaarliは機能としてはあまり多くなく、シン
Maze Generator & Solver - 迷路を作り自分で解く迷路ジェネレータ
機械学習の分野は発展が著しいです。Googleは自動で任意のゲームをクリアするソフトウェアを作っており、時間をかければかけるほど優秀になっていっています。機械が自分で問題を考え、それを解くようになるとどんどん発展していってしまうのではないでしょうか。 そんな訳（？）ではないでしょうが、Maze Generator & Solverも一つの可能性を感じさせてくれるソフトウェアです。自分で問題を作って、それを解くという2つの機能を備えています。 Maze Generator & Solverの使い方 まずはパズルを生成します。 そして2カ所を指定すると自動的にパズルが解かれていきます。 パラメータを変更すれば簡単なものも。 超難しいものまで思いのままです。 それでも解答は一発です。 動画にするとこんな感じです。 Maze Generator & Solverは2つのエンジンを持っています。迷路
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
