Myrica - Rictyをベースに視認性を向上したプログラミングフォント MOONGIFT
プログラマーであればこだわりたいのがフォントです。特に英語は見やすくても日本語がつぶれてしまったり、誤認しやすいフォントを使っていると余計なバグが入り込む可能性が高まります。 個人的にはRictyを使っているのですが、さらにそのRictyを継承してプログラマー向けに進化したフォントがMyricaです。 Myricaの使い方 フォントを表示したところ。ピの文字が特徴的ですね。 特徴としては、ASCII/ひらがな/カタカナに対してヒンティング情報を追加しているので文字を小さく表示した場合にも文字がつぶれず、視認性が落ちません。また、濁音や半濁音が大きく表示されるのでぺとべの違いなどがはっきりと分かるようになっています。 等幅、プロポーショナル、さらに幅が狭いタイプと揃っています。Rictyをベースにしているので、Myricaと好みの方を試して使ってみても良さそうです。 MyricaはSIL O
ECharts - 多種多様な表現に対応したグラフ/チャートライブラリ MOONGIFT
Webは表現力がそれほど高くないのが常に問題視されています。特に業務系システムではグラフ/チャートを使ってデータを可視化する必要があります。最近ではビッグデータが話題にあがっており、大量のデータを効率的に描画しなければならなくなっています。 そこでEChartsを紹介します。ビッグデータモードまで用意された多種多様なパターンの用意されたチャートライブラリです。 EChartsの使い方 今回はその多様なグラフ、チャートを紹介します。 曲線のグラフ。 積み上げグラフ。 棒グラフ。 エリアグラフ。 曲線。かなり複雑です。 こちらもユニークです。途中で途切れています。 棒グラフですが、範囲が指定できています。 左右の比較グラフ。 複数グループの棒グラフ。 散布図。 こちらも散布図。 画像も合わせた表示。 散布図と色の組み合わせ。 ローソクチャート。 円グラフ。 より描画にこだわった円グラフ。 レー
TouchstoneJS·ハイブリッドアプリ開発に使いたいUIフレームワーク MOONGIFT
WebブラウザでネイティブライクなUIを作成するフレームワークはデザインのトレンドに合わせて年々変わってきています。テーマで最新のUIに対応できる場合もありますが、HTML5/JavaScript/CSS3の進化も考えると、常にトレンドに乗っておくのが良さそうです。 TouchstoneJSは最新のUIフレームワークで、ハイブリッドアプリを作るのに最適なフレームワークとなっています。ハイブリッドアプリ開発にぜひ使ってください。 TouchstoneJSの使い方 TouchstoneJSはまだベータ版で全機能は提供されていません。なので執筆時点での機能を紹介します。 一覧。グループリストです。 ヘッダーバーの色変更。 検索付きのリスト。 アラートバー。 フッターバー。 シンプルリスト。 詳細表示。 サムネイル付きリスト。 トグル。 フォーム。 パスコード入力。 入力したパスコードが表示できま
Amethyst - キーボードでウィンドウを操作するMac OSX用ユーティリティ MOONGIFT
GUIのOSにおいてウィンドウが重なって表示されたり、たくさんのウィンドウが並ぶと作業効率が非常に悪くなります。そのたびにマウスで探したり、新しいウィンドウを開いたりするのはとても面倒です。そこでウィンドウマネージャが必要になります。 今回紹介するAmethystはMac OSX用のウィンドウマネージャで、xmonadを真似た作りになっています。 xmonadの使い方 起動するとアクセシビリティでの設定を求められます。 ウィンドウの並びは変更できます。 ウィンドウのレイアウトはTall、Wide、Fullscreen、Column、Row、Floating、Widescreen Tallが用意されています。この中から使いたいものだけをピックアップしておきます。 後はキーボード操作でウィンドウの配置をダイナミックに変更できます。 例えばこんな感じに綺麗にタイル状に並べられます。 キーボードシ
kuromoji.js - Webブラウザ上で分かち書き！ MOONGIFT
テキストから意味を読み取るというのは非常に難しく、そのための専用ソフトウェアが存在するほどです。そしてテキスト解析手法の一つとして知られているのが分かち書きです。日本語であればChasenがよく知られています。 kuromoji.jsはそんな分かち書き処理をJavaScriptで行ってしまおうというソフトウェアになります。KuromojiというApache財団のオープンソース分かち書きエンジンをJavaScriptにポーティングしています。 kuromoji.jsの使い方 こちらはデモです。Webブラウザベースで動作しています。nodeでも使えます。 適当な文章をリアルタイムに分かち書きできます。 kuromoji.jsは辞書ファイルをAjaxで取得しています。そのためサイズは大きくなりますが、分かち書きの精度はとても高くなります。サーバサイドで辞書を用意したり分かち書きエンジンを用意する
xlwings·さよならVBA。PythonとExcelの相互コミュニケーションライブラリ MOONGIFT
Webアプリ全盛の現在とあっても、業務では未だにExcelが多く使われています。その結果としてVBAが活躍しており、メンテナンスが難しかったり、コピペされるコードが量産されていたりします。VBAがダメという訳ではないのですが、触りたくないと考えるプログラマは多いのではないでしょうか。 もっと自分が使い慣れたプログラミング言語でExcelを扱いたいと考える人に使ってみていただきたいのがxlwingsです。PythonとExcelで双方向の操作が可能になります。 xlwingsの使い方 デモ。ExcelからPythonを呼び出します。 xlwingsはPythonからExcelのデータを読み込んだり、ExcelからPythonをコールできます。その結果、PythonからExcelにデータを追加したり、検索結果を表示させることも可能です。VBAの代わりに使うことが可能です。 Pythonであれば
Marka·アニメーションをサポートした綺麗なアイコンライブラリ MOONGIFT
Webサイトにはアイコンが付き物ですよね。しかしフラットUIが流行とあって、アイコンも派手なものではなく単色でシンプルなものが好まれるようになっています。例えばWeb Fontを使ったアイコンです。 Web Fontを使った場合、カラーリングやサイズの自由が大きいですが、向きを変えたりアニメーションさせたりするのは難しいでしょう。そこで使ってみたいのがMarkaです。 Markaの使い方 MarkaはJavaScriptを使って制御できるアイコンです。 var m = new Marka('#icon'); m.set('circle') .color('#FF6600') .size('50'); こんな感じでアイコンを指定します。四角いアイコンにする場合は、 var m = new Marka('#icon'); m.set('square') .color('#FF6600') .s
Sensei Grid - キーボード移動/インライン編集を可能にするテーブルライブラリ MOONGIFT
業務システムを開発していると度々持ち上がってくるのがデータグリッドのリッチ化です。様々なソフトウェアがあり、Excel並にリッチなUIを提供するものもありますが、今回はちょっと変わったライブラリを紹介します。 Sensei Gridが提供するのはリッチなフォーカス移動、そしてその場での編集機能になります。これもまた使いどころの多そうな便利なライブラリです。 Sensei Gridの使い方 例えばグリッドがこのように表示されています。 この時、矢印キーでのセル移動はもちろんのこと、タブキーでの横移動、Ctrl + Enterでの下への移動が行えます。まさにExcel的な操作性です。 エンターキーで編集モードです。ドロップダウンのような選択式の表示もサポートされています。 テキストの編集も可能です。 Sensei Gridはマスタメンテナンスのように一覧表の中からデータを探して編集するというの
uilang - UI操作を記述するWeb用DSL
MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました 最近はUIだけではなく、アクションによって起こるアニメーション技術にも注目が集まっています。Googleの提唱するMaterial Designでも単にタップするだけでなく、その後のアニメーションまで含めてデザインしています。 そんなアニメーションを含めたデザインを行うためのDSLとしてuilangが登場しました。全く新しい言語としてとても面白そうですよ。 uilangの使い方 <code> clicking on ".hide" adds class "hidden" on "#notification" </code> こちらが肝です。ボタンをクリックするとhiddenを追加するというのを文章として定義できます。 この場合は以下のようになります。 <div id=switch>
Fingerprintjs - Cookie不要でブラウザを特定する技術を体感
ブラウザを特定するためにCookieを使うのが一般的です。しかしプライバシーの問題があり、個人のブラウザ遷移を記録することないようDo Not Track機能が追加されたりと徐々に厳しくなってきています。 そんな中、新たに注目を集めているのがJavaScriptだけでブラウザを特定する技術になります。今回はそれを体感するFingerprintjsを紹介します。 Fingerprintjsの使い方 この数字は同じブラウザである限り、常に同じものが出ます。実に94%の精度でブラウザを特定できるとのことです。ブラウザの言語やユーザエージェント、セッションストレージの有無などに加えて、Canvasを使った画像生成による違いも使っています。 この数字はブラウザをシークレットモードにしても変わらないようで、非常に怖い技術と言えます。広告のトラッキングなど悪用されると相当な精度で個人のブラウザ遷移が追わ
smartcrop.js - 要注目！スマートなクロップ機能を実現 MOONGIFT
おお、これは格好いい！ 写真のサムネイル表示というのはやり方によって大きくインパクトが変わります。単純に縮めて表示すると何の写真か分かりづらくなります。さらに横長、縦長の写真では正方形に切り出すのは簡単ではありません。 そこで使ってみたいのがsmartcrop.jsです。写真の中から一部を切り出すライブラリで、よりインパクトの強い部分を抽出します。 smartcrop.jsの使い方 デモです。よりインパクトの大きい場所を抽出しているのが分かるかと思います。 切り出す形を変更することもできます。その場合でも写真全体を対象にする訳ではありません。 さらにサンプル。女性を中心に抽出しています。 これは完全に左側から。 ヨットを中心に。サムネイルでも格好いいですね。 街並。より印象的なビルを中心にしています。 こちらは川と太陽が中心です。 人の場合は顔を中心にするようです。 多数の人がいる場合。よ
要導入検討！PHP用のDBマイグレーション·Phinx MOONGIFT
PhinxはPHP製、MIT Licenseのオープンソース・ソフトウェアです。 Ruby on Railsを使っていて他の言語に戻れない一つの理由がデータベースのマイグレーションです。一般的に煩雑になりがちなデータベースのスキーマ管理が適切に管理されるようになります。そんなマイグレーション管理をPHPに提供してくれるのがPhinxです。 最初にinitを実行して初期化します。DB接続情報を記したYAMLファイルが生成されます。 マイグレーションファイルはこのようにPHPのコードになっています。 実際の書き方の例。 テーブルを取ってきて、addColumでフィールドを追加し、saveを実行したタイミングでSQLが実行される仕組みです。upとdownを書くことでDB構造変更を差し戻すことができます。環境も複数定義でき、MySQLまたはPostgreSQLをサポートしています。 MOONGIF
Gitonomy – PHP製のGit管理サーバ
おお、これは企業で使えそうですよ！ 企業によっては外部にソースコードを預けられないため、自社でGitサーバを構えているところも多いでしょう。しかしそうなると管理画面が欲しくなります。GitHubの管理画面は優秀で、ああいったWebブラウザ上でリポジトリの情報を見たいと思うはずです。 そこで使ってみて欲しいのがGitonomyです。デザインの格好いい、Gitリポジトリマネージャです。 Gitonomyの使い方 GitonomyはPHP + Symfonyの組み合わせで作られていて、Webブラウザ上でGitリポジトリの操作が一通りできるようになっています。ユーザはプロジェクト単位にグループに入り、そこで権限管理される仕組みです。 ソーシャル機能はありませんが、企業ユースであれば十分ではないでしょうか。社内でGitサーバを立てている場合はぜひ導入を検討してみてください。 GitonomyはPHP
Pretty Diff - Gitの差分表示をGitHub調にして見やすく整形
MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました これはGitを使っているならぜひ入れておきたいツールです。 GitHubのコード差分表示はとても見やすくて、一旦あれに慣れてしまうとターミナルで出力されるDiffが非常に見づらく感じるようになります。しかしプロジェクトによってはGitHubを使えないというケースもあるでしょう。 そこで使ってみたいのがPretty Diffです。任意のGitリポジトリでGitHub風の差分表示を実現してくれるライブラリです。 Pretty Diffのインストール インストールはnpmを使って行えます。 $ npm install -g pretty-diff これで準備は完了です。 Pretty Diffの使い方 使っているGitリポジトリに移動します。例えば最後のコミットとの比較はこんな感じです。
Redmine Desktop Client - 常時手元においておきたいデスクトップRedmineクライアント MOONGIFT
Redmineをプロジェクト管理に使っている企業は多いです。アジャイル開発のみならず必要十分な管理項目があることで従来のプロジェクト管理においても活躍します。 しかしWebブラウザからアクセスするのに対して若干の不便さを感じることもあります。もっと素早くアクセスできれば良いのに…そう思う方はRedmine Desktop Clientを使ってみましょう。 Redmine Desktop ClientはオリジナルのRedmineClientからフォークし、REST APIを使うようにしたソフトウェアです。 接続設定です。RedmineのURLとID/パスワードを入力します。Redmineのバージョンも指定する必要があります。 タイムトラッキング機能があります。タスクを選んでトラッキングを開始します。 タスクの編集や追加もここからできます。 RedmineのWeb UIから操作するよりもRed
ローソクチャートや棒、折れ線グラフを作るHTML5グラフライブラリ·Rocketchart MOONGIFT
RocketchartはHTML5で作られたダイナミックなグラフライブラリです。 HTML5でできることがどんどん広がっています。今回紹介するRocketchartsもHTML5を駆使しています。そしてすごいグラフを作ってきました。 ローソクチャートです。HTML5で作られています。 折れ線グラフを追加しました。 さらに棒グラフと折れ線グラフのミックスです。 クリックするとその箇所の数値が分かります。 表示範囲をマウスで選択して絞り込むこともできます。 逆に広げた場合です。 RocketchartはJSONデータを使ってCanvasタグにグラフを描いています。そのため直接書き出すのはもちろん、AjaxなどでJSONデータを渡してレンダリングすることもできそうです。 RocketchartはJavaScript製、GPL v3のオープンソース・ソフトウェアになります。 MOONGIFTはこう
ゲーム開発の参考にしたいiOSアプリ·Wizard War MOONGIFT
Wizard WarはiPhone用のオープンソース・ソフトウェア（MIT License）です。 iOSアプリのゲームを作ってみたいと思ったら書籍を読み始める手もありますが、既存のアプリから学べることもたくさんあるはずです。今回はオープンソースで公開されているゲームWizard Warを紹介します。 メイン画面です。クエスト、呪文一覧、マルチプレイヤーの順番になっています。 こちらはクエスト画面。クリアするごとに一つ下のステージがアンロックされます。 対戦画面。左側が自分です。 5つのエレメントをうまくつなぎ合わせることで魔法が発動します。 勝利！ 負け… 呪文一覧です。 このようにつなぎ合わせることで魔法が発動します。 さらにネットごしに対戦もできます。 Wizard Warではイラストはちょっと寂しい感じですが、技術的な観点では面白いのではないかと思います。タッチによる各エレメントを
Gumby - Bootstrapの強力なライバルになるか！？シンプルかつ強力なCSS3フレームワーク MOONGIFT
CSS3フレームワークは数多くなってきたのでその特徴をちゃんと掴んでおかないといけないですね。 GumbyはSassを使ったCSS3フレームワークです。他のフレームワークと同じようにレスポンシブ、モバイルフレンドリーになっています。その特徴を見ていきましょう。 まずデスクトップからです。 ヘッダーバー。フラットだったり、幅が固定だったりと色々な形式が想定されています。 タイポグラフィ。可読性高いです。 リストだけでも黒丸、白丸、ドット、数字など多数用意されています。さらに定義リストまで！ ボタン。サイズ、色、形が様々です。片方だけ丸い、なんて便利そうですね。 インジケーターやラベル、アラート。こういうのもよく使いますよね。 フォーム。基本的にplaceholderを使った表示になっているようです。 テーブル。角丸サポートです。 タブ。幅が設定できます。 縦のタブもあります。 ドロワー。クリ
ローカルで編集すると即座にSCPでアップロード·sync MOONGIFT
syncはPython製、MIT Licenseのオープンソース・ソフトウェアです。 Dropboxは便利ですが、それに慣れてしまうと独自のサーバにコンテンツをアップする時に不便に感じた経験はないでしょうか。そこで使ってみたいのがsync、SCPを使ったファイルアップロードツールです。 実行しました。実行の際にはローカルとリモートのディレクトリパスを指定します。 ファイルを作成しました。自動的にアップロード処理が開始されます。 syncはシンプルなツールで、ローカルでファイルを修正したり作成したりすると自動的にアップロード処理を行ってくれます。名称はsyncですが、リモート側での変更、追加は感知してくれませんのでご注意ください。 MOONGIFTはこう見る 最近はセキュリティ上の理由でFTPは解放しなくなってきています。そうなると使われるのがSCPです（SFTPもありますが多くないように思
OAuth認証を一手に行うOAuth.ioのJavaScriptクライアント·oauth-js MOONGIFT
oauth-jsはJavaScript製のソフトウェア（ソースコードは公開されていますがライセンスは明記されていません）です。 ソーシャルなサービスが増えるのに伴ってOAuthプロバイダーはどんどん増えています。OpenIDと違って、同じ仕様で全てがこなせないのが辛いところです。そこで使ってみたいのがOAuthをまとめてくれるOAuth.ioで、さらにそれを簡単にしてくれるのがoauth-jsです。 デモの画面です。70を越えるプロバイダが利用できます。 ポップアップ版による実装です。 ウィンドウが閉じるとデモの画面でトークンが表示できています。 GitHubなどもポップアップにできます。 プロバイダによって多少のデータフォーマットの違いはありますが、概ね同じ形のようです。 oauth-jsを使うとリダイレクト方式とポップアップ方式を簡単に切り替えて使えます。いずれの形にしてもサーバサイド
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
