SyaroNote - Go製。Markdown記法を使ったWikiエンジン MOONGIFT
Markdownは多くの使い道があります。メモとして使っている人は多いですし、Webサービスの中でテキストコンテンツを書く際のフォーマットで使われることも増えてきました。使われることが増えるとそれだけ慣れた人が多くなるので安心して使えるようになります。 今回はそんなMarkdownを使ったWikiエンジン、SyaroNoteを紹介します。個人、または小さなグループでの利用を想定します。 SyaroNoteの使い方 SyaroNoteはGoで作られているので各プラットフォームで利用ができます。起動時にはまだページがありません。 編集画面です。白または黒い背景が指定できます。 数式エディタがあります。 絵文字の補完入力機能もあります。 コンテンツビュー画面です。リンクは.mdを最後に追加します。ページがなければ新規に作ることができます。 SyaroNoteはとてもシンプルで、Markdownを
Octotree·GitHub利用者は必見！GitHubでツリー表示 MOONGIFT
GitHubのUIは先進的で、かなり見やすいものです。初心者にも分かりやすく使いやすいのですが、毎日のようにGitHubを使っている人たちにすればもっと素早くファイルを見ていけるようにしたいと思うでしょう。 そこで使ってみたいブラウザ機能拡張がOctotreeです。ブラウザ画面の左側にファイルブラウザ機能が追加されます。 Octotreeの使い方 OctotreeはGoogle Chrome、Firefox、Safari向けに機能拡張/アドオンが提供されます。 インストールされた状態で任意のリポジトリに行くと、このようにファイルツリーが左側に表示されるようになります。 フォルダを開いてより深い階層のファイルへも素早くアクセスできます。 左側の表示ではブランチを切り替えられませんが、通常のGitHub側でブランチを切り替えると左側のツリーもそれに伴ったものに変更されます。また、プライベートリ
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リポジトリに移動します。例えば最後のコミットとの比較はこんな感じです。
cssgrep·コンソール上でDOMをCSSセレクタ/XPathで検索 MOONGIFT
HTMLの中から指定したDOMを探し出すにはXPathまたはCSSセレクタを使う方法が考えられます。jQueryなりを使って利用する人が多いと思いますが、今回はWebブラウザを使わずにターミナルで行うケースを考えます。 そのためのツールがcssgrepです。まるでファイルをgrepするようにXPathやCSSセレクタを使ったテキスト抽出ができます。 cssgrepの使い方 MOONGIFTで試したところ。 サンプルのコードは次のようになっています。 curl http://linuxfr.org/ | ./cssgrep.rb '#friends li:nth-child(even)' <li><a href="http://www.agendadulibre.org/">Agenda du libre</a></li> <li><a href="http://fr.lolix.org/"
HTML5-Packer – HTML5アプリケーションを1ファイルにパッキング
MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました Webアプリケーションはブラウザさえあればどの環境でも動かせる便利な仕組みですが、大きな欠点としてはネットワークがないといけないというのがあります。オフラインでも対応しようと思うとダウンロードと設定がとても面倒です。 その点、バイナリの実行ファイルはダウンロードしてすぐに実行できます。同じような仕組みをWebアプリケーションでも可能にするのがHTML5-Packerです。 HTML5-Packerのインストール まずはインストールします。npmでインストールできます。 $ npm install html5-packer --save-dev これで準備は完了です。 HTML5-Packerの使い方 ローカルにあるWebアプリケーションをパッキングします。この時、gruntと組み合
Haroopad - 開発者にぴったりなMarkdownエディタ
マルチプラットフォームで使えますよ！ エンジニア界隈ではMarkdownの認知度が高くなっていますが、その記法が若干特殊なこともあって書きづらいと感じている人は多いはず。そこで使われるのがMarkdownエディタです。 Haroopadもその一つになります。多分に漏れず2ペイン構成で片側がプレビューになっていますが、それ以外にも便利な機能がたくさん揃っているMarkdownエディタになります。 Haroopadの使い方 プレビューはつい縦長になりがちなので、2〜3段で書くと短くていいかもしれませんね。 Haroopadは使ってみた感じ、かなり開発者寄りなMarkdownエディタになっているという印象です。Markdownを使いこなしてがんがんドキュメントを作っていきたいと考える方にはぴったりではないでしょうか。 HaroopadはWindows/Mac OSX/Linux用のオープンソース
JavaScriptとObjective-Cを連携させるハイブリッドアプリ解発に·HybridKit-JS MOONGIFT
HybridKit-JSはObjective-C/JavaScript製のオープンソース・ソフトウェア（MIT License）です。 最近のスマートフォンアプリ開発では必要に応じてJavaScriptとネイティブを組み合わハイブリッドアプリが増えています。そこで紹介したいのがHybridKit-JSです。 デモアプリです。この画面はHTMLで出来ています。 HybridKit.runCommandで予め登録されているコマンドを実行します。 アラートを表示するデモです。 Open URLを使ってMobile Safariを使ったURLを開く操作もサポート。 set_titleを使うとタイトルバーのラベルを変更できます。 背景色を変更する機能もあります。 HTMLはこのようになっています。 HybridKit-JSではJavaScriptからネイティブの機能を呼び出す形で連携できるようになっ
Andoridのクラッシュレポータ·Acra Server MOONGIFT
Acra ServerはPHP製のオープンソース・ソフトウェア（MIT License）です。 スマートフォンのアプリでは時にクラッシュすることがあります。それは致し方ないでしょう。大事なのははそれを繰り返すのではなく、エラー情報を基に修正を行っていくことです。そのためのクラッシュ情報収集サーバとしてAcra Serverを紹介します。 ダッシュボードです。アプリごとのレポート数が円グラフになっています。 日付ごとのクラッシュ回数グラフ。 上のメニューでアプリごとに切り替えられます。 アプリ単位にするとAndroidのバージョンごとのグラフになります。 最新15件の課題。 個別の課題です。スタックトレース。 デバイス情報。 Androidのバージョン。 ログ。 設定。 コンフィグ。 その他はファイルのパスや環境変数などです。 Acra Serverでは専用のライブラリをアプリ内に組み込む事
データベース無し、Markdownでコンテンツを作成するCMS·Pico MOONGIFT
PicoはPHP製、MIT Licenseのオープンソース・ソフトウェアです。 CMS（コンテンツマネジメントシステム）と言えばデータベースにコンテンツを入れて、システムがそれを一覧にしたり詳細ページを作ったりします。運営担当者が自由にできるところは限られるものです。しかしPicoであればカスタマイズが容易でかつ高速なCMSが手に入ります。 フォルダを配置するだけで準備は完了です。インストールの手間もありません。 ファイル構成です。contentディレクトリの下にMarkdownで書かれたコンテンツがあります。 テーマ、プラグインがサポートされています。テンプレートエンジンはtwigになります。 Markdownファイルを修正すれば、それが自動的にコンテンツに反映されます。 テンプレート。見ても分かる通り簡単な作りです。 Picoはシンプルであり、データベースも不要で使える手軽なCMSとな
node/WebSocket/MongoDBを使ったリアルタイム掲示板·TorToi MOONGIFT
TorToiはnode製のソフトウェア（ソースコードは公開されていますがライセンスは明記されていません）です。 昔からのWebコミュニケーションと言えば掲示板やチャットではないでしょうか。ノスタルジックな雰囲気がありますが、最新の技術を組み合わせることで一気にこれまでと違った様相を呈することがあります。今回はnode、MongoDBを使ったリアルタイム掲示板TorToiを紹介します。 この一つ一つのウィンドウがスレッドになると思われます。 答えるをクリックするとテキストエリアが開きます。なぜか半分…。 五分五分でエビフライぶつけるぞとちょ、のコメントがデフォルトで入ります。時々英語版エビフライになるとのことです。 ウィンドウは動かせます。 ロゴをクリックして新しいスレッドを立てることができます。 TorToiはまだ開発中という雰囲気がありますが、スレッドを単なる一覧ではなく、画面中のXY軸
Ruby製のPomodoro時間管理術·Pomo MOONGIFT
PomoはRuby製のオープンソース・ソフトウェア（MIT License）です。 人間の集中力は25分程度しか継続しません。プログラマーなどで乗ってくると寝食を忘れてしまうこともありますが、それは稀なケースです。そんな集中力の波を活かした時間管理法がPomodoroであり、PomoはRubyを使ってPomodoroを実践できるソフトウェアになります。 インストールはRubygemsを使ってコマンド一つでできます。 ヘルプです。基本的にはadd/start/complete/breakがよく使われるものになるでしょう。 まず最初に設定ファイルを生成します。これで準備は完了です。 タスクを追加します。説明はなくても大丈夫です。 listやlsでタスクの一覧を出せます。 startでタスクを実行します。Mac OSXであれば通知が表示されます。 休憩が終わったという通知です。また作業開始です。
HTML5を使ってWebカメラの映像をリアルタイムイフェクト·Photobooth Lite MOONGIFT
Photobooth LiteはHTML5でPhotoboothライクなWebカメライフェクトを実現するソフトウェアです。 Mac OSXで提供されるPhotoboothはWebカメラの映像をリアルタイムで加工します。そんなPhotoboothライクな機能をHTML5だけで行うのがPhotobooth Liteです。 デフォルト。 グレースケール。 セピア。 レッド。 明るくした版。 Photobooth LiteではWebカメラの映像をリアルタイムに取り込んだ上で画像加工を施して表示します。そのため若干のタイムラグはあると思われますが、それと気付かないほどスムーズです。ベースを真似れば別なフィルタを作成するのもさほど難しくなさそうです。 Photobooth LiteはJavaScript製のソフトウェア（ソースコードは公開されていますがライセンスは明記されていません）です。 MOONG
胸熱。Webブラウザ上のMikuMikuDance「MMD.js」|オープンソース・ソフトウェア、ITニュースを毎日紹介するエンジニア、デザイナー向けブログ
MMD.jsはPMD/VMDを読み込んでWebGLを使って描画するソフトウェアです。 先日mmd.jsを紹介しましたが、さらに完成度の高いMMDをWebGLを使ってレンダリングするのがMMD.jsです。 踊っている1シーン。かなりスムーズです。 見ている向きを変更できます。上からができる、ということは…。 後ろ向きだってもちろんサポート。 MMD.jsはPMDとVMDの読み込み、パースに対応し、WebGLを使って実際にダンスをさせられるようになっています。カメラやライトの移動にも対応しています。今のところ音楽の再生やボーンアニメーションには対応していませんが、十分楽しいソフトウェアになっています。 MMD.jsはJavaScript製、MIT Licenseのオープンソース・ソフトウェアです。 MOONGIFTはこう見る これまでMMDというとWindows用のソフトウェアであるVPVPを
ソートやフィルタにも対応したレスポンシブなテーブル·FooTable MOONGIFT
FooTableはレスポンシブなテーブルデザインを行うライブラリです。 レスポンシブWebデザインにおける最大の難関はテーブルかも知れません。PCならば幅広く表示できたカラムがスマートフォンではうまく表示しきれません。そこで使い勝手を維持しつつ見栄えもいいテーブル表示にFooTableを使ってみましょう。 PCで表示したテーブル。 スマートフォン向けに縮めた場合。+記号が表示されています。 +記号をクリックすると、追加情報が表示されます。 HTMLを組み合わせた行。 こちらでもスマートフォンで表示できます。 タブレットでも調整されて表示されます。 ソート機能版。 もちろんスマートフォンでもソートが使えます。 フィルタリング。インクリメンタルに適用されます。 PCでももちろん使えます。 ソートとフィルタリングは同時に使えます。 FooTableを使う際にはタブレットやスマートフォンで表示する
Gitを使った複数人での開発に役立つリポジトリ更新通知·git-dude MOONGIFT
git-dudeはGitリポジトリの更新通知を受け取るBashスクリプトです。Mac OSX/Linuxで使えます。 git-dudeを使うとGitリポジトリの更新通知を受け取れるようになります。Gitを開発に使っている企業で入れておけば無意味な衝突を防げるかも知れません。 インストールは簡単です。スクリプトファイルを取ってきて、実行権限を与えるだけです。 使い方としてまずは監視したいリポジトリを~/.git-dudeディレクトリに入れます。シンボリックリンクでも大丈夫です。 監視を開始するにはgit dudeコマンドを実行します。後はリモートのリポジトリが更新されてローカルのリポジトリと差ができた時に通知が表示されます。 Mac OSXでの通知例です。Mac OSXの場合は通知にGrowlを使っているので別途growlnotifyをインストールします。Linuxの場合はnotify-se
辞書アプリに便利なブックマーク機能を追加·BetterDictionary MOONGIFT
BetterDictionaryはMac OSX標準の辞書にブックマーク機能を追加するSIMBLプラグインです。 Mac OSXには辞書アプリが入っています。国語、英和/和英、Wikipediaの検索もできて便利なのですが、都度文字を入れるのが面倒に感じていました。そこで使ってみたいのがBetterDictionaryです。 利用時にはSIMBLのインストールが必要です。 こちらがデフォルト。 こちらがBetterDictionaryをインストールした場合。 履歴があるのでたどりやすいです。 BetterDictionaryではキーボードショートカットがあり、ワードの保存、削除、サイドバーの表示/非表示、保存したワードの全削除が行えます。辞書機能をさらに便利にしてくれる強力なユーティリティです。 BetterDictionaryはMac OSX用のソフトウェア（ソースコードは公開されていま
Gitリポジトリを自動同期するDropboxクローン·Ohajiki MOONGIFT
OhajikiはGitリポジトリを使ったDropboxクローンです。 Dropboxはもはや手放せない存在です。しかし会社などで使えないケースもあるでしょう。そこで代替手段が必要になります。用意するのはGitリポジトリとOhajikiです。 GitHubのリポジトリに自動同期されます。 設定ファイル例。 Ohajikiは簡単に言うとフォルダ内のファイルの更新をキャッチして自動でコミット、Pushしてくれるツールです。さらに定期的にpullもしてくれるので複数のコンピュータであっても同期される仕組みです。バージョン管理ももちろん行われるDropboxクローン、使ってみてはいかがでしょう。 OhajikiはRuby製、MIT Licenseのオープンソース・ソフトウェアです。 MOONGIFTはこう見る Dropboxは2013年中の上場を目指していると噂されています。コンピュータのオンライン
Tumblrのテーマをローカルでさくさく作り上げる·Fumblr MOONGIFT
FumblrはTumblrのテーマをローカルで作成できるようにするソフトウェアです。 Tumblrにはデザインをカスタマイズする機能がありますが、オンラインで行うには色々修正した後、確認して…という作業を繰り返す必要があります。そこでFumblrを使ってももっと効率的にTumblrのテーマを作成してみましょう。 インストールします。必要なライブラリはbundleでインストールできます。 インストール中です。 起動しました。まんま、Tumblrのデザインです。 Fumblrは独自のWebサーバを起動するのでWebブラウザで結果を確認しつつ、CSS/JavaScript/画像を配置してデザインを作っていけます。CSSはSassやCompassに対応しています。さらにインポートコマンドによって既存のTumblrコンテンツを取り込んだ上でデザインを行うこともできます。 FumblrはRuby製、M
Pythonプログラマー歓喜！JavaScriptの代わりにPythonが使える·Brython MOONGIFT
BrythonはJavaScriptの代わりにPythonを使ってプログラミングできるようにするライブラリです。 Webブラウザ標準で使えるプログラミング言語と言えばJavaScriptです。しかしそれだけでは満足できない、そんな方が開発したのがBrythonです。Webブラウザ上でPythonが書けてしまいます。 アナログ時計です。ちゃんと秒針が動いています。 コードは見事にPythonです。 Ajaxのデモ。 やはりちゃんとPythonコードです。 テーブルのソートデモ。 Importも使えて便利です。 左右にデータを移動させるデモ。 ボタンやコンポーネントをPythonの中で生成しています。 3Dを動くデモ。 エリア情報を含めてPythonで定義されています。 BrythonはHTMLコンテンツのハンドリングはもちろん、Ajax、ローカルストレージ、Canvasの操作もできます。HT
JavaScriptでXLSX形式を扱う·XLSX.js MOONGIFT
XLSX.jsはJavaScriptでExcelファイル（Base64エンコード）を読み込んだり、ダウンロードさせられるソフトウェアです。 Googleスプレッドシートをはじめ、Webブラウザ上で表計算表示を行ったり、編集したりするWebアプリケーションがあります。しかし最も有力なのはExcelでしょう。そこで試したいのがExcelファイルを読み書きできるJavaScriptライブラリ、XLSX.jsです。 ダウンロードされたファイルです。ちゃんとXLSXとして認識されます。 ファイルを読み込む処理のデモです。Base64エンコードされたデータが解析されています。 XLSX.jsはbase64のXLSXファイルを読み込み、JavaScriptオブジェクトに変換できます。後はいかようにも表示できるでしょう。また、シート名と各セルの値をHTMLテーブルから読み込んでXLSXファイルに変換してダ
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
