MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました プログラミングとバージョン管理は切っても切り離せないものです。それは開発者であれば誰しもが納得するでしょう。しかし、プログラミングとバージョン管理を一つにして、学習すべき要素を減らしてしまおうという発想はなかなか出てこないはずです。 それを実現してしまったのがlegitです。何を言っているのかよく分からないと思いますが、ぜひご覧ください。 legitの使い方 例です。例えば以下のコードはHello worldを出力します。しかしこのディレクトリにはGitリポジトリがあるだけで、中身は何もありません。 $ ruby interpreter.rb examples/hello/ Hello world ディレクトリでログを見たところです。怪しくHello worldだのputだのといっ

MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました 日本語でプログラミングをしている時に困るのが英字と日本語のバランスです。記号や英字で幅が違ったりすると何となく気持ちが悪かったり、さらにそこに日本語まで加わるとずれが大きくなります。 そこで使ってみたいのがUtatane、プログラミング用の日本語等幅フォントです。 Utataneの使い方 Utataneの文章例。英語は日本語1文字分にきちんと収まっています。 プログラミングの中で使った場合。可読性も高く、文字幅もちょうどいいです。 UtataneはRichyからフォークしたCicaをさらにフォークして作られています。さらにUbuntu Monoとやさしさゴシック、やさしさゴシックボールド を合成と調整して作られています。様々なフォントの工夫が盛り込まれたフォントだけにプログラミング

Gitリポジトリは分散型ではありますが、一つ信頼できるサーバがある方が便利です。そこでGitHubやBitBucketなどが使われるわけですが、企業によってはセキュリティ上の理由で使えないこともあるでしょう。 そんな方に使ってみて欲しいのがGiteaです。日本語化も行われているGitサーバです。 Giteaの使い方 トップページです。Goで書かれているのでサーバのOSを選ばず実行できるのが特徴です。 登録しました。個人のリポジトリはもちろん、組織にも対応しています。 新しいリポジトリを作りました。この辺りはGitHubに似ていますね。 ちゃんと日本語化されています。 自分に割り当てられている課題があれば、ここで一覧表示されます。 プルリクエストです。 履歴です。 GiteaはWikiの機能があったりと、基本的にはGitHubと同じような機能が並んでいます。さらに課題をプロジェクトを横断して

MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました Webサイト上でターミナル風インタフェースを提供するサービスが幾つかあります。クラウドサーバ系サービスでは当たり前になっていますし、プログラマー向けのサービスでは幾つか見かけます。 今回はちょっと色の違うソフトウェアを紹介します。JQuery Terminal Emulator Pluginはその名の通り、jQueryが使えるターミナル風UIです。 JQuery Terminal Emulator Pluginの使い方 jQueryが使えるので、こんな感じにDOMにアタッチできます。 もちろん書き換えもできます。 JQuery Terminal Emulator Pluginはあくまでも自分のWebブラウザ上だけの処理ですが、jQueryを使ってデータの書き換えもできます。DevT

MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました 業務システムと言えばグリッド、テーブルが求められます。最初はHTMLで簡単に作成するのですが、すぐに追加の機能が求められます。ソート、フィルタリング、ヘッダーや左側の列を固定して欲しいと言った具合です。 そんな厄介な要望をスクラッチで対応していたのではとても時間がかかってしまいます。ぜひhandsontableを試してみましょう。 handsontableの使い方 handsontableには多くの機能が備わっています。まずはページネーション。 パスワードを非表示にもできます。 新しい行を作成する際にplaceholderを表示。 フォーカスがあたっているセルをハイライト。 セルを細かくカスタマイズ。画像の埋め込みもできます。 ソートももちろんできます。 入力バリデーション。 ヘッ

MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました 日本にはExcel職人と呼ばれる人たちがたくさんいます。彼らにかかればどんなドキュメントであってもExcelで作られ、多くの業務システムがExcel VBAを駆使して作られます。 今回はその最高峰とも言える、Excelで作るWebアプリケーションを紹介します。それがexcel2jsです。 excel2jsの使い方 excel2jsはExcelで作られたシートをHTML/JavaScriptにしてくれるソフトウェアです。下の画像は元ファイルになるExcelファイルです。式も埋め込まれています。 それがこんな感じにWebブラウザ上で動くようになります。 Excelで動くものになりますので、サーバサイドと連携するなどというのは難しいでしょう。しかしちょっとした計算処理を行うものであればe

Electronを使えばHTML5/JavaScript/CSSを使ってデスクトップアプリが開発できます。それは知っていても、UIがなんとなくWebっぽい感じを残していると、それはやはりWebアプリケーションをラッピングしただけのものだと感じてしまいます。 そこで使ってみて欲しいのがPhotonです。Mac OSX用のツールであれば、まさにMac OSXっぽいUIに仕上げられるでしょう。 Photonの使い方 コンポーネントは多数用意されています。まずはバー。 アクション付きのバー。 タブ付きのバー。 ナビゲーション。 リスト。 ボタン。 フォーム。 テーブル。 アイコン。 PhotonはまさにMac OSXアプリで必要とされるようなUIコンポーネントを多数用意しており、デスクトップのネイティブUIと殆ど変わらない仕上がりにしてくれるのではないでしょうか。同様にWindowsやLinux版

Web画面上に表示されている文字列をコピーするのは意外と面倒ですが、クリップボードの操作ができないために色々な工夫が考えられてきました。Flashを使ったものが多かったのですが、HTML5になってFlashは使われなくなってきています。 そこで代替として使ってみたいのがclipboard.jsです。Flashなしでクリップボードの操作ができるJavaScriptライブラリです。 clipboard.jsの使い方 clipboard.jsのデモです。テキストボックスの文字列をコピーします。 アイコンのクリックでコピーされました。 こちらはカットのデモ。 文字が消えてちゃんとカットされました。 こちらは表示されていない文字列をコピーします。data-clipboard-textでコピーする文字を指定しています。 clipboard.jsのタネは新しく出てきたexecCommandというAPIに

HTMLのデザインでいけてないのは入力系ではないでしょうか。特にファイルアップロードのフォームはダサいも良いところです。HTML5になってファイルをドラッグ&ドロップでアップロードできるようになったことでずいぶん良くなっています。 しかしデフォルトで格好良いわけではありません。自分でカスタマイズする必要があります。そこで使ってみたいのがDropifyです。 Dropifyの使い方 上が通常、下がDropifyを使った場合です。 デフォルトの画像を適用したり、ボックスの高さを指定することができます。 こちらは無効な場合。打ち消し線が良い感じです。 多言語対応もしています。 Dropifyを使えばファイルアップロードフォームが華麗に変身します。ドラッグ&ドロップはもちろん、プレビューも表示されます。その意味では画像に限定されるかと思いますが、積極的に使っていきたいライブラリです。 Dropif

SPA（シングルページアプリケーション）の流れもあり、Webサイトがどんどん縦長になっているように見えます。そんな中、一番下までスクロールした後で一番上にあるヘッダーにアクセスしたいと誰が思うでしょうか。 そこで離脱を防げるのがヘッダーバーをスクロール追従型にすることでしょう。使ってみたいのはHeadhesiveです。 Headhesiveの使い方 Headhesiveを使ったデモサイトです。初期表示時です。 スクロールすると、それに合わせて一旦ヘッダーが消えます。そしてその後、ヘッダーの一部だけが表示されます。 実際にアニメーションさせているところです。 あまり激しく動かすとがくっと動く時がありますが、普通にスクロールさせて見ている分には殆ど気になることはないでしょう。単純にヘッダーを残すだけでなく、スクロールの動きに合わせてアニメーションしているところが自然です。 Headhesive

ロックマン（英語圏ではMegaman）は今なお色褪せることのない人気のゲームシリーズとなっています。今の高画質、高機能なロックマンも良いですが、やはり初代ファミコン時代のロックマンこそ至高、と思う方も多いのではないでしょうか。 そんな方にお勧めしたいのがMegaJS、HTML5/JavaScriptで再現されたロックマンです。ちゃんと遊べるレベルに仕上がっているのがすごいです。 MegaJSの使い方 操作はASWDで移動、O/Pキーでジャンプとビームです。 今のところ遊べるステージはFlash Manだけのようです。 遊んでいるところ。 MegaJSは時々ステージがなくなってハマったりする可能性がありますので注意してください。しかしJavaScriptでもファミコン時代のアクションゲームが十分に遊べるようになってきているというのはすごいですね。なお著作権上の問題はあるのでご注意ください。

MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました tailはターミナルの画面で見るのが基本です。そのため、二つのファイルを監視しようと思うと二つのウィンドウまたはタブを開いておく必要があります。これは以外と面倒です。 そこで使ってみたいのがrtailです。rtailがtailの情報を集約し、ブラウザの画面で確認できるようにします。 rtailの使い方 rtailはrtail-serverとrtailの2つのコマンドに分かれています。まずtailの出力をそのままrtailコマンドに渡します。 $ tail -f /var/log/messages | rtail もう一つはサーバで、これはそのまま実行しておけば8888/9999番ポートでサーバが立ち上がります。8888はWebブラウザ用、9999はrtailクライアント用になります

MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました WebサービスやGUIアプリケーションにおいてデモを見せる際に動画はとても有効です。どのボタンを押すとどういう動きをするのかが分かるとユーザは利用前に自分のニーズに合っているかすぐに分かります。 ではターミナルのソフトウェアはどうでしょうか。文字を出力すれば良いだけかも知れませんが、ttystudioを使えばコンソール操作さえアニメーションGIFに展開できます。 ttystudioの使い方 ttystudioのインストールはnpmを使って行えます。 $ npm install -g ttystudio 後はttystudioコマンドを実行するだけです。 $ ttystudio output.gif --log そうすると新しいシェルが開くので、自由に操作してCtrl + Qで終了に

MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました プログラミングする上で必須の機能と言えるのがコード補完です。そのためにはまずコードの解析が行われなければなりません。正しくコードが解析されることで、既にある変数やライブラリ名を補完できるようになります。 JavaScriptをコーディングする際に使えるコード解析ライブラリがTernです。Web上はもちろん、Emacs/Vimなどのプラグインも提供されているソフトウェアです。 Ternの使い方 Ternを使うとこんな感じにIDE的な入力補完ができます。 関数に対する引数の表示も。 定義元に飛ぶこともできます。 jQueryやunderscoreにも対応しています。 TernはWeb、Emacs、Vim、Sublime Text、Brackets、Light Table、Eclipse

ソフトウェアは必要な時だけ起動するものもありますが、メニューバー（Mac OSX）やタスクトレイ（Windows）に常駐させておくタイプのソフトウェアもあります。常駐型のソフトウェアは一度使って便利だと継続的に使ってもらえるようになる可能性があります。 そんな常駐型ソフトウェアをHTMLとJavaScriptで作れるのがQuark Shell for Macです。執筆時点ではMac OSXのみですが、近くWindowsにも対応予定となっています。 Quark Shell for Macの使い方 Quark Shell for Macのデモアプリを立ち上げたところです。 普通のアプリのUIのように見えます。しかし実体はHTMLファイルです。 メニューを出すこともできます。 設定画面もありますが、これもHTMLです。 タブで切り替えることもできます。 Quark Shell for MacはH

ユーザ向けではなく、開発用途などでHTTPサーバが必要になる機会は多いかと思います。ブログのテーマを編集していたり、静的サイトのデザインをする場合もあるでしょう。そんな時、ぱぱっと使えるHTTPサーバがあると便利です。 RubyやPythonなどでHTTPサーバを立てることもできますが、Caddyを使えばバイナリファイル一つで済みます。しかもHTTP/2サポートです。 Caddyの使い方 CaddyはWindows、Mac OSX、Linux向けにバイナリが提供されています。新しい機能をふんだんに取り入れたHTTPサーバとなっています。実行は簡単で、バイナリをそのままを実行するだけです。 $ ./caddy_darwin_amd64 0.0.0.0:2015 デフォルトで2015番ポート（年数）というのが良い感じです。ヘルプは次のようになっています。 $ ./caddy_darwin_am

これはMac OSXユーザであれば必携のツールになるのではないでしょうか。Mac OSXでファイルの保存先、開く先を変更する際にFinder側にあるファイルをドロップするという方法があります。これをよく使う人は多いでしょう。 しかしドロップすると保存ファイル名まで書き換わってしまって逆に面倒なこともあります。そこで使ってみたいのがLocatです。 Locatの使い方 LocatはSIMBLプラグインになっています。EasySIMBLなどを使ってインストールできます。 後はFinder側でOption + Returnを押すと選択している項目をOpen/Saveダイアログに反映します。Shift + Returnはファイル名は反映せず、場所だけ移動します。ファイルをドロップせず、キーボードショートカットだけでできるのが便利です。 実際のデモ動画はこちら。 日々よく行う操作を手軽にしてくれると

セキュリティに対する懸念やクイックSSLの低価格化、ハードウェアの高機能化もあって、SSL/TLSを導入するサイトが増えています。SSL間でないとリファラー情報を飛ばさないなどマーケティング上も困る状態になります。 しかしSSLの設定は意外と面倒で、ちゃんと設定されていないと意味がなかったり、エラーが出てしまったりします。そういった点を適切にアドバイスしてくれるのがMozilla SSL Configuration Generatorです。 Mozilla SSL Configuration Generatorの使い方 Mozilla SSL Configuration Generatorはその名の通りMozillaが開発しているサービスで、各種設定に基づくSSLの設定を提示してくれるソフトウェアです。 対応しているのはApache/nginx/HAProxyになります。モダンな書き方、サ

MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました 最近はWebブラウザ向けにリッチなダッシュボードを提供するサービス、デザインフレームワークが増えています。しかしサーバ管理者にとってはWebブラウザを立ち上げるのは面倒と思うかも知れません。結局、作業はターミナルで行うからです。 そこで使ってみたいのがtermuiです。なんとターミナル上でリッチなダッシュボードが展開されます。 termuiの使い方 例えばデモスクリプトを実行すると、こんな表示になります。 これがCUIなのかと驚きますよね。もちろん表示して終わりではなくリアルタイムで再描画されます。 さらにレスポンシブ（！）対応にもなります。 グラフはプログレスバー、線グラフ、棒グラフ、スパークラインなどがあり、さらに文字を出したりリストを作ることもできます。テーマ機能もあり、表示

企業やプロジェクトによってデザインガイドラインは自ずと必要になってきます。それが社で働くデザイナーの共通認識になる訳ですが、例えばFacebookアプリを作る際にはボタンやデザインをFacebookっぽくしたくなるのではないでしょうか。つまりデザインガイドラインは社内だけでなく社外の人にとっても有益なのです。 そこで登場したのがPrimerです。PrimerはGitHubが作り、使っているデザインガイドラインになります。 Primerの使い方 スクリーンショットを多めで紹介します。まずはグリッド。 ヘッダー。h1〜6まで対応。 テキスト。若干小さめ？ インラインテキストの装飾。 ボタン。ここはGitHubっぽいですね。 ボタングループ。こういうのもGitHubで使われていますよね。 フォーム。シンプルです。 フォームグループ。縦に並べる時に使えます。 メニュー。アイコンはオプションです。