Focusable - 見て欲しい部分だけ残すハイライト表示
Webページで特にユーザに見てもらいたいポイントがあったらどう表示するのが良いでしょう。一瞬ハイライトさせたり、文字に色をつける、サイズを変える、点滅させるなど様々な方法があります。それは見て欲しい部分を目立たせる方法です。 逆に見て欲しい部分以外を目立たなくする方法もあります。例えばモーダルウィンドウで使われます。そのためのライブラリがFocusableです。 Focusableの使い方 Focusableはチュートリアルで使ったり、特にユーザにここだけ見て欲しいと思った時に使えます。ユーザの自由な操作を妨げる可能性があるので多用は禁物ですが、遣いどころによっては効果的なライブラリでしょう。 FocusableはJavaScript製、MIT Licenseのオープンソース・ソフトウェアです。 Focus element overlay sample app zzarcon/focusa
JXcore – マルチスレッド対応のnode互換サーバ
MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました ここ数年、node（node.js）の人気が高まっています。大型Webアプリケーションを開発に向いているのかと言った疑問点はありつつも、採用例は増えています。ノンブロッキングな特性も好まれる要因となっています。 特にnodeを使っていて遅いと感じることはありませんが（まだそれほど大型なWebアプリケーションを作っていないからかも知れませんが）、JXcoreを使うことでさらなる高速化が実現します。 JXcoreの使い方 JXcoreはnodeと100%互換性を維持しつつ、マルチスレッド化するソフトウェアです。 そのほか、コードプロテクション（パッケージングすることでソースコードを暗号化します）、エラー時のリカバリー、ビルトインのデータベースとパッケージマネージャ、LLVMを使ったネイ
Better Xcode ibeam cursor - Xcodeのカーソルをほんの少し見やすく
MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました プログラマーは黒バックのエディタ画面を好みます。例えばXcodeでもそうです。文字を打っている限りは問題ないのですが、やっかいなのはマウスを動かすとキャレットが縦に細いのでマウスカーソルを見逃しやすくなるということです。マウスカーソルがなくなってイライラした経験を持っている人も少なくないでしょう。 Better Xcode ibeam cursorはそんなあなたのストレスを解放してくれます。Xcodeでカーソルをちょっとだけ見やすくしてくれる便利なソフトウェアです。 Better Xcode ibeam cursorの使い方 インストールは curl -L https://raw.githubusercontent.com/egold/better-xcode-ibeam-curs
wysihtml·カスタマイズも簡単。HTML5 validなWYSIWYGエディタ MOONGIFT
Webブラウザ上で使えるWYSIWYGなエディタは昔からずっと存在します。にも関わらず新しいソフトウェアが年々登場しているところを見ると、自分のサイトや使い方にぴったりマッチするツールがないのかも知れません。 とにかくカスタマイズがしやすく自分たちのサイトに自由に組み込めるものが良いと考える方はwysihtmlを使ってみてはいかがでしょう。シンプルな作りでカスタマイズして自分たちのニーズに合わせたWYSIWYGエディタが手に入るでしょう。 wysihtmlの使い方 インストールはbowerを使うのが簡単そうです。 bower install wysihtml HTMLは次のように書きます。 <!-- toolbar with suitable buttons and dialogues --> <div id="toolbar"> <a data-wysihtml5-command="bo
Amethyst - キーボードでウィンドウを操作するMac OSX用ユーティリティ MOONGIFT
GUIのOSにおいてウィンドウが重なって表示されたり、たくさんのウィンドウが並ぶと作業効率が非常に悪くなります。そのたびにマウスで探したり、新しいウィンドウを開いたりするのはとても面倒です。そこでウィンドウマネージャが必要になります。 今回紹介するAmethystはMac OSX用のウィンドウマネージャで、xmonadを真似た作りになっています。 xmonadの使い方 起動するとアクセシビリティでの設定を求められます。 ウィンドウの並びは変更できます。 ウィンドウのレイアウトはTall、Wide、Fullscreen、Column、Row、Floating、Widescreen Tallが用意されています。この中から使いたいものだけをピックアップしておきます。 後はキーボード操作でウィンドウの配置をダイナミックに変更できます。 例えばこんな感じに綺麗にタイル状に並べられます。 キーボードシ
Firefox.html·FirefoxのUIをHTMLで再現 MOONGIFT
FirefoxのUIは徐々に変更されており、現在はGoogle Chromeにかなり感じになっています。それが特に悪いことはなく、操作性において迷いがなくなるので相互にブラウザを変更しても違和感なく使えるようになりそうです。 そんなFirefoxのUIをHTMLで再現したのがFirefox.htmlです。元々ネイティブのコンポーネントで作られているUIですが、Webブラウザでも同じくらいの水準で再現できています。 Firefox.htmlの使い方 こちらがそのUI。まるでブラウザそのままですね。 外部サイトへのアクセスも可能です。 検索も使えます。もちろん検索エンジンはYahoo。 画面はHTMLなのでスタイルシートで変更もできます。ただしメニューは使えません。 今後FirefoxのUIが変更される議論があっても、HTMLベースであればすぐに変更して議論すると言った目的にも使えそうです。F
Skyline - CSSフレームワーク開発のベースに
どれだけスタイルシートのフレームワークが登場してきても、それでも大抵のWebサイトは独自のスタイルシートで組まれているものです。しかし独自で組むとデザイン漏れが発生し、後付けで設定を追加したり更新が続くと徐々に最初の設計思想から離れていくものです。 そこで使ってみたいのがSkylineです。Skylineはデザインフレームワークという訳ではなく、カスタムスタイルシートフレームワークを構築する差異の出発点として欲しいと考えているライブラリです。 Skylineの使い方 Skylineは4つの階層に分かれています。ベース、エレメント、レイアウトそしてモジュールです。それぞれ目的に沿って、書き加えていきます。SkylineはOOCSS/SCSSを使って書けるようになっています。 HTMLの構造はHTML5に沿って書かれており、モバイルファーストな設計思想になっています。さらにjQueryの組み合
WebGL Fluid – WebGLで水の動きを再現
MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました コンピュータが苦手なのは自然の造形、動きをコンピュータの中で再現することです。3D CGの映画は自然のように描くのを目標に年々進化しています。水、雲、雪、雷、木の育ち方など自然はとても複雑にできています。 その一つ、水の動きをWebGLでエミュレートするのがWebGL Fluidです。 WebGL Fluidの使い方 デモ動画です。 WebGL Fluidは水の動きをリアルに再現しています。もちろん完璧かと言われればそうではないでしょうが、それでもかなりリアルです。WebGLのゲームや3D描画の際に使えそうなアルゴリズムです。 WebGL FluidはHTML5/JavaScript製のソフトウェア（ソースコードは公開されていますがライセンスは明記されていません）です。 WebGL
Dante Editor – Webページそのままに編集できるWYSIWYGエディタ
WYSIWYGなエディタは多数存在します。従来はMS Word並に多くのツールバーが表示されて、その中でHTMLコンテンツが自由に組めるといったものが多かったですが、最近では機能は少なめに、スマートな表示が特徴的です。 Dante Editorはそんな今時のWYSIWYGエディタの一つになります。一見、編集画面と分からないような使い勝手が特徴です。 Dante Editorの使い方 Dante Editorは見た目と編集結果がほぼ同じ形になっています。画像や動画、Twitterなどの埋め込みもできます。ユーザビリティの高いWYSIWYGエディタではないでしょうか。 Dante EditorはHTML5/JavaScript製、MIT Licenseのオープンソース・ソフトウェアです。 Motivation michelson/Dante
Github issues viewer - GitHubのIssue管理をスタイリッシュに表示
MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました GitHubの便利な機能の一つにイシュー（課題）管理があります。プロジェクト内のTodo、バグ、質問、機能追加など様々な情報を一元的に管理できます。色々な使い方は考えられますが、あのUIが何となく使いづらいと感じる人もいることでしょう。 そんな方に使ってみて欲しいのがGithub issues viewerです。GitHubのAPIを使ってIssueを見やすくしてくれる、そんなソフトウェアです。 Github issues viewerの使い方 Github issues viewerはサーバサイドの仕組みを使っていないところが利点です。投稿はGitHubを使いつつ、見栄えだけ変更ができます。同じ仕組みを使えば複数リポジトリの内容をまとめて一覧することもできそうです。 技術的にはB
icdiff - CUIでもサイドバイサイドの差分表示
MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました CLIにおけるdiffコマンドは行の削除や追加が縦に並ぶ形になっています。慣れれば理解できないことはないと思いますが、GUIやWebベースの差分ツールでは一般的にサイドバイサイドの差分表示が使われます。この方が人にとっては分かりやすいのでしょう。 そんな差分表示をCLIでも可能にするのがicdiffです。 icdiffの使い方 例えば基本的な表示はこちらです。 $ git diff diff --git a/app/assets/javascripts/form_builder.js b/app/assets/javascripts/form_builder.js index 48f486e..689209b 100755 --- a/app/assets/javascripts/
Material Design Fonticons – GoogleマテリアルアイコンのWeb Font版
マテリアルデザインにおいてアイコンは大事な存在です。これまではラベルの補助だったのが、よりアイコンだけでも意図が伝わるようにしなければなりません。そのためにはちょっとした変化を含めてアイコンの種類がもっとたくさん必要です。 そこでGoogleもアイコン集を提供しているのですが、これはPNGまたはSVGです。Material Design FonticonsはそれをWeb Fontとして提供します。 Material Design Fonticonsの使い方 基本的にGoogleのマテリアルデザインアイコンと変わりません。 Material Design FonticonsはWeb Fontなので一つのファイルで表示サイズにこだわることなく利用できます。アプリであればGoogleの画像ベースであっても自動的に選択を変えてくれますが、WebアプリケーションならばMaterial Design
Brimir - Webベースのチケット管理
MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました 多くの仕事はチケットで管理できます。プログラマーの仕事もタスクというチケットで管理されます。コールセンターやサポートもチケット制のところが多いです。チケットにすることで業務量が把握しやすくなり、進捗も分かるようになります。 Brimirはそんなチケットを管理するためのソフトウェアになります。汎用的なチケットシステムなのでアイディア次第で様々な業務に利用できそうです。 Brimirの使い方 ルールを使うと新しく受信したメールから自動的にチケットをアサインしたり、ラベルをつけられます。正規表現が使えるので特定の文字列があった場合に緊急度を高める、クライアントによって対応度を変更するなどといったワークフローに対応させられます。 BrimirはRuby/Ruby on Rails製、GNU
voice-elements·音声読み上げ、音声入力を簡単にするWeb Components MOONGIFT
WebはWeb Componentsによって新しい世界を迎えようとしています。高度な機能、UIが簡単に再利用できるようになれば、どんどん開発ができるようになります。標準で提供されるタグの範囲を超えた機能を簡単に実現できるようになるでしょう。 今回紹介するvoice-elementsもWeb Componentsの一つと言えます。音声読み上げAPIを簡単に使えるようにするカスタムタグになります。 voice-elementsの使い方 例えばこんな感じのタグです。 <voice -player autoplay text="Welcome to the jungle! hahaha just kidding!"></voice> これで Welcome to the jungle! hahaha just kidding! と自動で読み上げます。 自動でない場合は次のようになります。 <voi
kuromoji.js - Webブラウザ上で分かち書き！ MOONGIFT
テキストから意味を読み取るというのは非常に難しく、そのための専用ソフトウェアが存在するほどです。そしてテキスト解析手法の一つとして知られているのが分かち書きです。日本語であればChasenがよく知られています。 kuromoji.jsはそんな分かち書き処理をJavaScriptで行ってしまおうというソフトウェアになります。KuromojiというApache財団のオープンソース分かち書きエンジンをJavaScriptにポーティングしています。 kuromoji.jsの使い方 こちらはデモです。Webブラウザベースで動作しています。nodeでも使えます。 適当な文章をリアルタイムに分かち書きできます。 kuromoji.jsは辞書ファイルをAjaxで取得しています。そのためサイズは大きくなりますが、分かち書きの精度はとても高くなります。サーバサイドで辞書を用意したり分かち書きエンジンを用意する
Yoios - iOS 8にインスパイアされたMac OSX用のフラットなアイコン集 MOONGIFT
iOS 8ではアイコンがさらにフラットなデザインに刷新され、それに伴ってサードパーティーのアプリもフラットに変わってきています。すっきりとしたデザインは目的が分かりやすく、ユーザビリティが高いのが利点です（ただしデザイン力は求められますが）。 そんなiOS 8らしいデザインをMac OSXでも実現しようというのがYoiosです。Yosemiteでの利用を想定したシンプルなデザインのアイコン集です。 Yoiosの使い方 主なアイコンを紹介します。 丸いアイコンなのが特徴です。 Sublime TextやPhotoshopなどのアプリケーションアイコンも作られています。 GitHubやSlackといったWebサービス系もいくつかあります。 同じコンセプトで複数の人たちがアイコンを作成しています。 このアイコン群はかなり実用的ですね。 Eclipseもフラットに。 Testflightもあります
qrep – querySelectorAllを使ったgrep
MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました grepは便利ですよね。ターミナルで操作している時には欠かせないコマンドですし、Emacsなどのエディタからもよく使われます。こんなツールが他のパターンでも使えると便利だと思うこともあるでしょう。 そのパターンの一つにHTMLがあります。HTMLのクラスやIDで検索するのにgrepは向いていません。そこで使えるのがqrepです。 qrepの使い方 qrepのインストールはnpmコマンドで行います。 $ npm install -g qrep これで準備完了です。 例えば標準入力から検索します。 $ curl -s -L http://www.moongift.jp/ | qrep title <title>オープンソースを毎日紹介 MOONGIFT</title> このようにしてt
mod_git - ApacheにGit連携機能を追加
Webページの一番簡単な管理手法はFTPでアップロードして終わりといった形かも知れませんが、これではコンテンツを間違ってアップロードした場合や、あるユーザだけ別なページを見せたいと言った時の対応ができません。 そこで使ってみたいのがmod_gitです。ApacheにGit連携機能を持たせるモジュールになります。 mod_gitの使い方 Gitで管理されているのでgit pushすればコンテンツがアップロードできます。が、差し替わるわけではありません。Cookieに入っている git-commit にコミットのハッシュを入れるとそのコンテンツが表示されます。コミットの他、タグも指定できます。 mod_gitを使うとベータ版ユーザの案内などがとても簡単にできるでしょう。また、旧バージョンの表示もできますし、色々な使い方ができそうです。 mod_gitはApache用のソフトウェア（ソースコード
Gogs - Go言語製のGitサーバ
Gitはこれから新規プロジェクトを行う上でバージョン管理の有力な選択肢になっています。GitHubがその中でも有名ですが、オープンソースでないならば他の選択肢でも良さそうです。GitBucketも自前で立てる方法もあります。 今回はその自前で立てるGitサーバの紹介です。機能はもちろんのこと、開発言語も選択肢として加えても良いでしょう。GogsはGo言語で開発されたGitサーバです。 Gogsの使い方 Gogsにはソーシャルな機能はありませんが、ウォッチやスターはあります。GitHubに慣れていれば違和感なく使い始められるのではないでしょうか。Go言語が好きな方にとってみればカスタマイズも難しくないでしょう。 GogsはGo言語製、MIT Licenseのオープンソース・ソフトウェアです。 Gogs: Go Git Service - A self-hosted Git service w
Four Shadows – 時間に応じて影の向きを変化させるデザイン
フラットUIが流行ですが、完全に真っ平らでは情報の軽重がつけづらいのが欠点です。そこでちょっとした印象付けのために行われるのが影付けです。といってもフラットに直線で、ぼかしなくつけられているのでフラットの雰囲気にはマッチしています。 そんな影を自動で、かつ現在時刻に合わせて変化させる面白いライブラリがFour Shadowsです。 Four Shadowsの使い方 Four Shadowsは全部で4パターン（左右上下の組み合わせ）で影の向きが変化します。それによって時間を表現しています。デザインとして面白いですし、ユーザ自身の時間によって変化するというのはアダプティブWebデザインのようで面白いですね。 Four ShadowsはJavaScript製、MIT Licenseのオープンソース・ソフトウェアです。 Four Shadows - It’s not always just 5 o
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
