MDwiki·Markdownをコンテンツに使ったCMS/Wikiシステム MOONGIFT
最近はどこもかしこもMarkdownの活用で争っているように見えます。それだけ汎用的に使えて利便性の高いフォーマットであると言うことでしょう。ということで今回もまたMarkdownの新しい使い道を探す旅です。 MDwikiはMarkdownをベースにしたCMSまたはWikiとなっています。JavaScriptでMarkdownファイルを読み込み、JavaScriptでレンダリングしている点がユニークな点です。 HTMLが出力されていますが実際に読み込まれているのはMarkdownです。 画像は表示されている件数によって並びが変わるようになっています。 テーブル表示にも対応しています。 その他Gimmicksという記法が追加されており、YouTubeやGistの埋め込み、Facebook/Discusといったコミュニケーション機能も追加できるようになっています。Wikiとして新しいページが追
Viz.js·Web上でGraphvizをSVGでレンダリング MOONGIFT
フローチャートなどの高度なグラフを描こうと思った時に使われるのがGraphvizです。テキストベースで記述していくだけでできるというのはやはり手軽です。しかしローカルソフトウェアをインストールしたり、セットアップしたりするのは面倒と感じる人も多いでしょう。 そこでさらに再利用性を高めてくれるのがViz.jsです。WebベースでGraphvizを使えるようにしてくれます。可能にするのはまたしてもEmscriptenなのですが、面白さを体感してください。 例として以下のようにGraphvizのDOT言語をそのままscriptタグに記述します。 <script type="text/vnd.graphviz" id="cluster"> digraph G { subgraph cluster_0 { style=filled; color=lightgrey; node [style=fill
tag – Mavericksのタグファイル管理をターミナルから利用
MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました Mac OSX 10.9 Mavericksになってから追加された機能の一つにタグがあります。ラベル機能はこれまでもありましたが、よりタグの付け替えがしやすくなったことでタグを使ってファイル管理をしてみようと思えるようになったのではないでしょうか。 そのタグ機能をターミナルから扱えるようにするソフトウェアがtagです。コマンドラインで使えるということはシステムとの連携も含めてやりやすくなりそうです。 コマンド名はtagです。オプションは以下のようになります。 $ tag --help tag - A tool for manipulating and querying file tags. usage: tag -a | --add <tags> <file>... Add tag
MMD-Editor – Mac OSX用のMultiMarkdownエディタ
MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました Markdownでは物足りない方のためのエディタです。 Markdownは便利な記法で、多数の利用者がいますが中にはそのベーシックな記法だけでは満足できない人も多いと思います。 そこで各パーサごとに拡張がされていたりする訳ですが、それらをまとめてMultiMarkdownと呼んでいます。 そのMultiMarkdown記法で記述できるテキストエディタがMMD-Editorになります。 ヘッダーなどは自動的にハイライトされますので記述しやすいと思います。 MultiMarkdownでは通常のMarkdown記法に加えて補足説明、テーブル、数式、画像要素、定義リスト、ドキュメントのメタタグなどが扱えるようになります。 MMD-EditorではそういったMultiMarkdownの記法ハ
OpenNote - Evernote/OneNoteクローンなPHP製ノート MOONGIFT
どんどんメモして情報を一カ所に蓄積しましょう。 Evernote、便利ですよね。とにかく一カ所にメモも写真でも何でも入れておけるというのが重要です。しかしあくまでもプライベートでデータや企業内の機密データは保存するのに躊躇してしまっているかも知れません。 そこで必要になるのが代替になるサービスです。EvernoteやMicrosoft OneNote代替を目指すオープンソース・ソフトウェアがOpenNoteになります。 トップページです。まずはユーザ登録またはログインをします。 ログインしました。まだ何もないので、まずはフォルダを作成します。 フォルダ名を決めます。 フォルダを作成しました。クリックでフォルダに入ります。 新しいノートを作成します。CKEditorを使ってノートが作成できます。 画像やテーブルなどを使って多彩な表現ができます。 フォルダの中にフォルダを作成できます。緑色のが
Gumby - Bootstrapの強力なライバルになるか！？シンプルかつ強力なCSS3フレームワーク MOONGIFT
CSS3フレームワークは数多くなってきたのでその特徴をちゃんと掴んでおかないといけないですね。 GumbyはSassを使ったCSS3フレームワークです。他のフレームワークと同じようにレスポンシブ、モバイルフレンドリーになっています。その特徴を見ていきましょう。 まずデスクトップからです。 ヘッダーバー。フラットだったり、幅が固定だったりと色々な形式が想定されています。 タイポグラフィ。可読性高いです。 リストだけでも黒丸、白丸、ドット、数字など多数用意されています。さらに定義リストまで！ ボタン。サイズ、色、形が様々です。片方だけ丸い、なんて便利そうですね。 インジケーターやラベル、アラート。こういうのもよく使いますよね。 フォーム。基本的にplaceholderを使った表示になっているようです。 テーブル。角丸サポートです。 タブ。幅が設定できます。 縦のタブもあります。 ドロワー。クリ
CSVデータをベクターグラフィックスで表現·Raw MOONGIFT
RawはJavaScript製のオープンソース・ソフトウェア（LGPL）です。 表計算で作ったデータというとグラフで表すのが普通だと思います。しかしそれをさらに一歩越えてグラフィカルに表現してくれるのがRawです。 一例です。上がデータ部、下にあるツリーマップがそれを描画したものです。 グラフは色々と用意されています。こちらはバブルチャート。 このような進化図っぽいものもあります。 さらにグラフィカルに。 グルーピングを伴ったバブルマップ。 データも色々あります。 グリッドを使って表現されたグラフ。 グラフはPNG/SVG/JSONで出力できます。 RawはグラフにおいてD3.jsを使っています。データの向き不向きはありますが、CSVデータをビジュアル化する上で知っておくと役立つことがありそうです。 グラフは一般的な棒グラフ、円グラフ、折れ線グラフの他にもレーダーチャートやローソク図、エリ
Bootstrap Markdown - 使おう！BootstrapにマッチしたMarkdownエディタ MOONGIFT
Markdownでコンテンツを編集するサイトでは採用必須ですね！ 最近はテキスト編集をさせようと思うとまずMarkdownが筆頭に上がってくるようになりました。さらにWebサービス開発にBootstrapをベースにする人たちもたくさんいます。であればその二つが合わさって欲しいと思っている人は多かったはず。Bootstrap Markdownをぜひ使ってみましょう！ 使い方は簡単です。テキストエリアにdata-provide="markdown"を指定します。サンプルとしては以下のようなコードです。 <form> <input name="title" type="text" placeholder="Title?" /> <textarea name="content" data-provide="markdown" rows="10"></textarea> <label class="
Web APIドキュメントを書く際に要チェック·iglo MOONGIFT
igloはGo製のオープンソース・ソフトウェア（MIT License）です。 モバイルアプリやWebアプリケーションなどWeb APIの利用は多くなっています。そこで必要になるのが可読性の高いAPIドキュメントです。これから作成しようと思われている方にはigloをお勧めします。 元々はMarkdown風なドキュメントで、このようなHTMLファイルが生成されます。 レスポンスはクリックすると表示されます。 igloはAPI Blueprintの記法に沿っています。Markdownに似たフォーマットで、テキストファイルとしての可読性も高く、HTMLへ変換した後はさらに表示の制御がされていて必要な部分が追いかけやすくなっています。 どのようなプログラミング言語であってもAPIリファレンスは付き物です。大きなフレームワークや小さなクラスであってもそれは変わらないでしょう。APIドキュメントがない
Fancyboot - Bootstrapのカラーリングをはじめ自在にカスタマイズしよう MOONGIFT
ほほーこれはますますBootstrapにハマってしまいそうです。 Bootstrapはデザインが苦手なプログラマー（筆者のような）にとって救世主のようなライブラリになっています。しかしそれだけにカスタマイズは苦手でどれも似たような雰囲気になってしまいます。そこでFancybootを使ってみましょう。 Fancybootでは色設定をはじめ、ボックスの大きさや必要なプラグインを自分で選択してカスタマイズできるようになっています。それもオンライン上でできるとなれば使わない手はないでしょう。 トップページ。可愛い猫がお出迎え。ネットは猫のためにあるとはまさにこのこと。 まずコンポーネントを選択します。必要ではないコンポーネントを外せますが…まぁ大抵は外さないですよね。ということで次のステップに進みます。 jQueryプラグインを選択します。これもあるに越したことはないですし、そのままで良いのかな。
他にも使えそう。GitHubユーザを可視化·Github Globe MOONGIFT
Github GlobeはHTML5/WebGL製のオープンソース・ソフトウェア（GPL v3）です。 世界中にいるGitHubユーザをビジュアル化するソフトウェアがWebGL Globeです。みんながどこで生活し、コミットしているかが分かるのは面白いですよ。 アクセスするとWebGLを使って地球を描き出します。 マウスを使って回転できます。 Github Globeで見る限り、多いのはカリフォルニアやヨーロッパのようです。とは言え日本も負けておらず相当数のユーザが東京周辺に存在するようです。こういった可視化によってユーザがどこにいるか分かるのは面白そうです。 GitHubはプログラマーやデザイナーが殆どであり、オープンソースへの関わりが強い人たちが多いです。そういったユーザが世界レベルで見た時にどの地域にいるか分かると、グローバルでの求人に役立つのではないでしょうか。 また同じ仕組みを使
すごい！JavaScriptでMS Wordファイルを生成·DOCX.js MOONGIFT
DOCX.jsはJavaScript製のオープンソース・ソフトウェア（MIT License）です。 Microsoft Officeのファイル形式は〜x形式になって以降、XMLファイルのZipファイルの圧縮であることはよく知られています。しかしだからといってOfficeファイルをWebベースで生成できるようになっているとは思いませんでした。それを可能にするのがDOCX.jsです。 テストページ。Run Testをクリックします。 生成されました！ 該当部分のコード。 DOCX.jsは今のところテキストを挿入しかできません。画像やOLEオブジェクトを貼付けたりすることはできないのでご注意ください。とは言えWebブラウザ上でZipファイルを生成してしまえばここまでのことができるのかを驚かされること間違いなしです。 Microsoft Officeファイルの仕様は公開されていますので、それをJ
スクロールしよう。iPhone 5sのページを再現·jQuery One Page Scroll MOONGIFT
jQuery One Page ScrollはjQuery/JavaScript製のソフトウェアです。 ここ最近スクロールを上手に使って効果的な見せ方をするサイトが増えています。その一つがiPhone 5sの商品紹介ページです。その表示を真似したソフトウェアがjQuery One Page Scrollです。 トップページです。iPhone 5s風のイラストですね。 ちょっとスクロールしようとすると一気に2つ目のスライドまで滑っていきます。 さらにその下まで。3つのスライドがスクロールで切り替えられます。 ウィンドウ幅を縮めてもいい感じに表示できます。 使い方は簡単で、sectionタグごとにコンテンツを記述します。後はjQuery One Page Scrollを読み込んで$(".main").onepage_scroll()のようにメソッドを実行すれば良いだけです。 Webデザインは模
進化したダイアログ·vex MOONGIFT
vexはjQuery/JavaScript製のオープンソース・ソフトウェア（MIT License）です。 21世紀のダイアログを標榜するソフトウェアがvexです。従来のダイアログとは大きく違うUIで目を引くこと間違いなしです。 デモです。Time Machine風にダイアログが重なっています。 テーマを変えてこのような見た目に変更もできます。 ダイアログからさらにアラート。 確認ダイアログ。 さらに別なスタイル。アニメーションの変更もサポートされています。 こちらはデモのアニメーション。 vexはjQueryプラグインであり、IE8、Firefox4以上で動作します（もちろんWebKitは問題ありません）。ログインや初回表示時のツアー、モーダルウィンドウなどにも使えそうです。 MOONGIFTはこう見る ユーザの目が慣れるというのは操作の効率性を生みますが、逆に自然と目に入ることすらフィ
Stack Overflowでも利用中のWebベースMarkdownエディタ·StackEdit MOONGIFT
StackEditはJavaScript製のオープンソース・ソフトウェア（Apache Licnese 2.0）です。 最近Markdownエディタが熱いです。ローカルアプリケーション、Webベースと様々な形式がありますが今回は技術者に人気のサービスStack Overflowで使っているStackEditを紹介します。 こちらがエディット画面です。2ペインになっています。 JavaScriptベースなのでプレビューがすぐに反映されます。 文字数カウンター付き。これは地味に嬉しい。 HTML変換結果をその場で得られます。 プレビューを全体表示に変更。 Markdown/HTML/テンプレートとして保存できます。 画像の挿入。 Google+から取得できます。 画像のインポート確認。 テーブルの他、定義リストにも対応。 TOCと書くと目次になります。 MathJaxにも対応しています。 St
フラットUIに影をつける·jQuery Flat Shadow MOONGIFT
jQuery Flat ShadowはjQuery/JavaScript製のソフトウェア（ソースコードは公開されていますがライセンスは明記されていません）です。 フラットUIが人気ですが、あまりにもシンプルであるために物足りないと感じる人も多いようです。そこでフラットUIっぽさを壊さないようにメリハリをつけられるのがjQuery Flat Shadowです。 例です。文字から影ができています。 向き、色も自由に変えられます。 英数字だけではありません。 使い方の例です。文字の背景色も設定できます。 jQuery Flat Shadowでは文字に対して影を設定できます。特に画像を用意したりする必要はないので手軽に使えそうです。面白いのは文字を解析して行っているので英数字のみならず平仮名や漢字に対しても適用ができることでしょう。 MOONGIFTはこう見る 影をつけてしまうと立体感が出来てしま
スマートフォン、タブレットの判別情報をHTMLに追加·Device.js MOONGIFT
Device.jsはJavaScript製、MIT Licenseのオープンソース・ソフトウェアです。 最近はスマートフォン、タブレット、デスクトップとWebブラウザごとの処理分岐が多くなっています。そのような時に都度ユーザエージェントで判別しているのでは面倒です。使ってみたいのがDevice.jsです。 iPhoneで縦の場合。デバイスの種別やOS、向きが判別できています。 横向きにすれば判定が変わります。 タブレットの場合も同様です。 HTMLソースです。htmlのクラスに追加されています。 向きを変えればhtmlのクラスがリアルタイムに変わっています。 Device.jsではOS（iOS/Android/Blackberry）、向き（縦または横）、種別（スマートフォンまたはタブレット）といった情報をHTMLタグに対して定義してくれます。これを基準にすれば処理判定がとても簡単になるでし
Google ChromeのDeveloper toolsの可読性を向上·Readable-ChromeDevThemes MOONGIFT
Readable-ChromeDevThemesはGoogle Chrome用、スタイルシート製のソフトウェア（ソースコードは公開されていますがライセンスは明記されていません）です。 IDEやプログラミング用エディタにおいて言語ごとのハイライト処理は必須でしょう。それによってコードの可読性が上がれば、バグの発生を抑えたり生産性も向上します。それはGoogle ChromeのDeveloper toolsについても同様です。そのためのツールがReadable-ChromeDevThemesです。 インストールしました。結構読みやすいのではないでしょうか。 コンソール。こちらも読みやすいです。 特徴としては可読性の高い色の採用、line-heightを1.2emにすることで可読性をあげ、選択範囲を見やすくしたり、選択したタグの前にガイドラインを追加すると言った工夫がされています。普段使っている
gnuplotをJavaScriptに変換。Web上で高度な3Dグラフを描画·gnuplot-JS MOONGIFT
gnuplot-JSはJavaScript製のソフトウェア（ソースコードは公開されていますがライセンスは明記されていません）です。 3Dグラフを描く際などによく使われるソフトウェアがgnuplotです。高度なグラフを描けるのがメリットですが、ローカルに落として使うのが面倒に感じている人もいるのではないでしょうか。そこで使ってみたいのがgnuplot-JSです。gnuplotをEmscriptenでJavaScript化したソフトウェアです。 デモです。SVGファイルとして出力されています。 ローカル版と比べて多少のコードの修正が必要ですが、概ねそのまま動作します。 こんな複雑な描画もできます。 コードを書いてから実際に描画されるまでは多少のラグがあります。そのためリアルタイムにgnuplotのコードを評価してグラフを描くと言った使い方には向かないかも知れません。とは言えWebブラウザだけで
3ペイン構成のMac OSX用Markdownエディタ·LightPaper MOONGIFT
LightPaperはMac OSX用のソフトウェアです。 Markdownのシェアが高まっています。普通のテキストエディタで書けるのが魅力ですが、専用のエディタを使うことでよりスムーズに書き進めることができます。そこでMac OSXユーザにお勧めしたいMarkdownエディタがLightPaperです。 メイン画面です。左からファイルブラウザ、エディタ、プレビューとなっています。 エディタはタブ管理できて、複数ファイルを開いておけます。 画像やリンクの補完入力ができます。 設定画面です。 カラー設定があります。 エディタ部のカラーを変えて、プレビューをGitHub風にしてみました。 エクスポートはPDF、HTMLそしてAudioファイルがサポートされています。 PDFにしても日本語対応です。 これまで編集とプレビューがついたMarkdownエディタは多かったですが、さらにファイルブラウザ
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
