Substance - Webページをそのまま編集できるWYSIWYGエディタ
MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました Webサービスの種類によってはユーザにコンテンツを作成してもらうタイプのものがあります。最近ではMarkdown記法で書かせることが多いようですが、それも記法に慣れた人向けでしょう。初心者はHTMLも分からないものです。 そんな中使えるのはWYSIWYGなエディタです。HTMLをインラインで修正できるSubstanceはとても便利そうです。 Substanceの使い方 Substanceを適用しているページです。普通のWebページのように見えますが編集できます。 選択して見出しにしました。 太字にすることもできます。 リンクを追加する場合。 メニューを使って文字の種類を変更できます。 Substanceの特徴としてはHTMLやXMLのインポートができること、サーバ/クライアントサイ
StyleStats - スタイルシートの状態をチェック
MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました プログラミングの場においてはカバレッジであったり、メソッド単位の行数であったり、日ごとにおけるコード量の増加など可視化が進んでいます。見える化によって様々な情報が得られるようになり、改善ができるようになります。 スタイルシートにおいてもそれは同様です。可視化によって様々な情報が得られます。それを実現するのがStyleStatsです。 StyleStatsの使い方 手元のスタイルシートで試してみた結果。サイズや使われているセレクタなどが分かります。 URL指定でも使えます。こちらはBootstrapを試したところ。 どの状態がベストであるかはデザイナーによって異なると思いますが、これを日々記録しておくことができればスタイルシートの状態がどう変化しているのかが分かるようになるでしょう。
GoTTY - ターミナル操作をWebアプリ化
MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました 勉強会の発表などでターミナルを使ってデモを行うことがあります。コマンドの入力は人それぞれ違ったりして見ているだけでも勉強になります。そう、ターミナル操作はコンテンツとして非常に有益です。 そんなターミナル操作をWebアプリケーションにしてしまおうというのがGoTTYです。意味が分からないかも知れませんが、見れば分かるはずです。 GoTTYの使い方 Mac OSXでHomebrewを使うならインストールは簡単です。 $ brew tap yudai/gotty $ brew install gotty これでgottyコマンドが使えるようになります。例えば gotty top を実行します。そうするとこんな感じでtopコマンドの結果が見られるようになります。 さらに -w オプション
Gimei·日本人の名前、住所をダミーで生成 MOONGIFT
ダミーデータを作るのは意外と面倒で、つい“ああああ”などとしてしまったり、同じ文字を繰り返してしまったりします。しかしそれでは実際にありそうな文字数が分かりづらかったり、雰囲気として本物っぽさが感じられません。 そこで使いたいのがGimeiです。偽名、偽の住所などを生成してくれるライブラリです。 Gimeiの使い方 GimeiはRubygemでインストールできます。 gem install gimei 例えば男性を作る場合は以下のようにします。 gimei = Gimei.male gimei.male? #=> true gimei.female? #=> false gimei.kanji #=> "小林 顕士" もちろん実行する度に結果は変わります。 > gimei = Gimei.male => #< gimei::name:0x007fd2cb35b4c0 @gender=:ma
Gipeda - Gitリポジトリのログを静的HTML化
プログラマーのパフォーマンスを測る一番のツールはバージョン管理のリポジトリを見ることです。コード量を増やせばいいわけではありませんが、日々のコーディング結果が反映されるのは間違いなくリポジトリです。 そこで使ってみたいのがGipedaです。GitHubに限らず、そのコミット歴などを可視化してくれるツールになります。 Gipedaの使い方 Gipedaは静的なHTMLファイルを生成します。 コミット一覧をクリックすると、変更したファイルの内容が分かります。 コミット履歴のグラフ化もできます。 Gipedaはローカルで使えますのでGitHub以外はもちろん、オフラインでも使えるのが利点になります。また、静的なファイルを生成するので任意のサイトにホスティングすることができます。 GipedaはPerl製のオープンソース・ソフトウェア（MIT License）です。 Gipeda itself –
Rocket.Chat·Meteor製のSlackクローン MOONGIFT
ここ数年チャットアプリが盛んになっています。機能として求められるものは決して多くなく、似通った作りになってしまうものの、UI/UXにおいてSlackが頭一つ飛び抜けた存在になってきています。 そんなSlackを真似て作られたのがRocket.Chatです。基盤としてMeteorを使ったのが特徴となっています。 Rocket.Chatの使い方 Rocket.Chatの画面です。まずユーザ登録をします。 こちらがダッシュボード的な画面です。 チャットルームに入りました。Slackと似ていますね。 メッセージを書いて、さらに編集もできます。 右側のペインは非表示にできます。 大勢いるとこんな感じ。 Rocket.Chatではファイルの添付はできないようですが、画像のURLを貼り付けると画像がインラインで表示されるようです。社内でSlack風のチャットが欲しかったらRocket.Chatを使ってみ
Quark Shell for Mac·HTML/JavaScriptを使って常駐アプリを作る MOONGIFT
ソフトウェアは必要な時だけ起動するものもありますが、メニューバー（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
Grav·PHP製、データベース不要なCMS MOONGIFT
CMS（コンテンツマネジメントシステム）というとつい大げさなものを思い浮かべてしまいます。PHPやRuby、Python、Perl、nodeなどのサーバサイドの言語、さらにMySQLやPostgreSQLといったデータベースなどです。環境整備だけで面倒になってしまいます。 そこで紹介したいのがGravです。データベース不要で手軽にセットアップ、利用ができるCMSとなっています。 Gravの使い方 GravはPHP 5.4以上で動作します。データベースは不要なので使えるWebサーバは多いと思います。基本の画面は次のようになります。 ファイル構成は次のようになっています。PHPファイルでMarkdownファイルを読み込んで表示する仕組みになっています。 コンテンツはMarkdownで作成します。 新しいページはファイルを追加するだけです。 フラットなファイル管理なのでGitやDropboxなど
ExcelJS·node.jsからExcelファイルを読み書き MOONGIFT
Windowsなんて嫌だ！Officeファイルなんて嫌い！なんて言いつつもシステム開発時にお世話になるのがExcelです。CSVファイルを出力したり、逆に読み込む機能は良く作るのではないでしょうか。 わざわざCSVを介さずにExcelファイル（xlsx）をそのまま読み込んだり、書き出せるのがExcelJSです。node用の便利なライブラリです。 ExcelJSの使い方 例えば書き出しを行った場合、こんなにカスタマイズされた書き込みが行えます。 逆に読み込んだ場合。各セルの値やシート名などデータがとれます。値が入っているセルの範囲も取得できます。 $ node testBookRead.js ./test.xlsx Worksheets: 1 Sheet 1 - blort Dimensions: A1:S12 値の種類としては数字、テキスト、日付、リンク、関数が使えます。ただし関数は関数の
HubPress - Webから記事投稿も！GitHub APIを使った静的ブログシステム MOONGIFT
ブログと言えばWordPressやMovableTypeといったオープンソース・ソフトウェアかはてなブログやLivedoorブログと言ったASPが選択肢になるでしょう。しかし最近ではOctoPressやJekyllといった静的サイトジェネレータを使うケースもよくあります。 今回紹介するHubPressも静的ブログジェネレータですが、サーバサイドの仕組みがなくともWeb上で記事の更新ができるのが特徴です。 HubPressの使い方 こちらはデモです。 ちゃんと個別ページも用意されています。 さて、ではどうやってWeb上で記事を更新できるのかと言うと、タネはGitHubにありました。そちらがこの動画です。 https://www.youtube.com/watch?v=7gP3i4tHlRM GitHubのAPIを使ってコンテンツを飛ばすことでGitHub Pageを更新しています。これはなか
winginx - Windows用のnginxをサービス化
MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました Windowsでnginxを動かす場合、バイナリをダウンロードしてくるのが基本のようです。しかしいつもnginxを起動するのは面倒なので、Windowsのサービス化したいと思う方は多いのではないでしょうか。 そこで使ってみたいのがwinginxです。nginxをサービスに登録して使えるようにしてくれます。 winginxの使い方 winginxはNSSM（Non Sucking Service Manager）を使ってサービス化しています。面白いのはインストーラーを生成するのにNSISを使っていて、それはUbuntu/Debian向けにインストールが想定されていることです。ビルドするとexeファイルができあがるので、それをWindows側で使います。 インストールしてしまえば後はサ
Skyline - CSSフレームワーク開発のベースに
どれだけスタイルシートのフレームワークが登場してきても、それでも大抵のWebサイトは独自のスタイルシートで組まれているものです。しかし独自で組むとデザイン漏れが発生し、後付けで設定を追加したり更新が続くと徐々に最初の設計思想から離れていくものです。 そこで使ってみたいのがSkylineです。Skylineはデザインフレームワークという訳ではなく、カスタムスタイルシートフレームワークを構築する差異の出発点として欲しいと考えているライブラリです。 Skylineの使い方 Skylineは4つの階層に分かれています。ベース、エレメント、レイアウトそしてモジュールです。それぞれ目的に沿って、書き加えていきます。SkylineはOOCSS/SCSSを使って書けるようになっています。 HTMLの構造はHTML5に沿って書かれており、モバイルファーストな設計思想になっています。さらにjQueryの組み合
UI Tiles·Webサイト全体の画面遷移設計に使えるデザイン集 MOONGIFT
Webサイトを開発する際に使われるのが画面遷移を表現するフローチャートです。例えばコマースであればトップページから商品一覧、カテゴリ一覧や商品のピックアップなどの遷移が考えられます。 深くなってしまう場所がないか確認したり、ユーザ動線が正しく描けているかどうか確認するのに便利です。UI Tilesはそんなフローチャートを作成するのに便利なデザイン集です。 UI Tilesの使い方 UI TilesはPNGの他、PhotoshopやIllustrator形式でファイルが配布されています。 PNG版。画面のモックがたくさんあります。 それぞれ小さいながらも特徴があります。 動画プレーヤ、ポートフォリオページもあります。 PSDはデモも用意されています。 デザイン一覧。 Illustratorも同様です。 UI Tilesを使うと、これまでは単なる四角い枠に対してトップページなどとラベルを貼って
termshare – ターミナルの出力をブラウザで共有
MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました ハンズオンや技術者向けのセミナーなどで画面を共有したいと思うことがあります。それはデスクトップの場合もありますが、ターミナル操作の場合もあります。 サーバ構築系などでターミナル操作を見て欲しいと思ったら、ズームなどを使うのではなくtermshareを使ってみると面白そうです。 termshareの使い方 termshareのインストールはワンライナーです。 curl -sL https://termsha.re/download/$(uname -s) | tar -C /usr/local/bin -zxf - 使い方も簡単で、 termshare を実行するだけです。実行すると次のようにURLが生成されます。 このURLに参加者がアクセスすると、Webブラウザ上にターミナルの実
JuliusJS - JavaScriptだけで音声入力
MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました これまで入力インタフェースと言えばキーボードまたはマウスが中心でした。しかしスマートフォンやタブレットに注目が集まるようになると、もっと別な入力が望まれるようになります。その一つが音声ではないでしょうか。 既にSiriをはじめAndroid、iOSで音声入力が取り入れられはじめています。今回はWebだけで音声解析を行うライブラリ、JuliusJSを紹介します。 JuliusJSの使い方 さて実際マイクに向かって発声したところとしては認識はまだまだ甘いのかも知れないといった雰囲気です。ただし筆者の発音に問題がある可能性はたぶんにあります。ボキャブラリーを増やせば、解析結果は向上するかも知れませんし、汎用的でなくいくつかの文字だけ聞き取れれば良いのであれば利用は十分できるかも知れません
Alasql.js - オンメモリで動作するJavaScriptデータベース MOONGIFT
JavaScriptを活用したWebアプリケーションを開発している際に、一時的に保存したいデータをどのように扱うかは大きな問題です。何となく変数や配列、ハッシュに保存してしまいがちですが、そのデータの取り出しや更新が面倒だったりします。 そこで使ってみたいのがAlasql.jsです。JavaScriptだけで作られたクライアントサイド向けのSQLデータベースになります。 Alasql.jsの使い方 使い方の例。データを配列で放り込んで、SQLで取り出せます。 デーブルの作成を含めてSQLが書けます。 データはlocalStrageに保存することもできるので、再読込時に復元も可能です。 Alasql.jsはHTML5仕様の中で検討されていたWeb SQLとは異なる実装で、オンメモリで動きます。高速で動作し、かつデータはlocalStrageに保存しておくこともできるので容量は小さいながらも永
q·CSVファイルや標準入力にクエリを実行できるコマンドラインツール MOONGIFT
q はCSV形式やTAB区切りのテキストファイルを入力として、コマンドラインでSQLに似たクエリを指定し実行することができます。また、標準入力を使った入力やパイプで接続して利用することができるソフトウェアです。 q の主な特徴 1) ZIP形式で圧縮したテキスト・ファイルも指定可能 コマンドラインオプション -z もしくは --gzipped を指定することで、ZIP形式ファイルを入力することができます。解凍せずにファイルを使用できるのは便利です。拡張子が .gz であれば、ZIP形式であると自動認識します。 -z, --gzipped Data is gzipped. Useful for reading from stdin. For files, .gz means automatic gunzipping 2) すべての文字エンコーディングをサポート 入力と出力の両方で、すべての文
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であれば
Chrome Dev Editor - フロントエンド開発ならお任せなChromeアプリなプログラミングエディタ MOONGIFT
Webアプリケーションを開発する際にはテキストエディタやIDEを使うのが一般的です。しかし開発してWebブラウザに表示を切り替えて再読み込みして…というのは手間がかかるものです。 そこでWebアプリケーションをWebブラウザ上で開発してしまおうというのがChrome Dev Editorです。JavaScriptだけでなくDartを使った開発にも対応したエディタになります。 Chrome Dev Editorの使い方 こちらがメイン画面です。Chrome Dev EditorはChromeアプリとしてインストールされます。 最初にプロジェクトを作成します。 エディタはハイライトがついたもので使いやすいです。 内部サーバ機能付きです。 GitやChrome Web Storeへのデプロイ機能があります。 Web Starter KitやPolymerをベースに生成することもできます。 Chr
Postman - Google Chromeを使ったWeb APIテストクライアント
最近はWeb APIを提供するサービスが増えています。公開していなくともアプリと連携させるためにJSONインタフェースが用意されているサービスも多いです。そこで開発時には各APIをコールできるクライアントソフトウェアが欲しくなります。 HTTPリクエストを行える専用クライアントソフトウェアは幾つかありますが、PostmanはGoogle Chromeアプリとして提供されるので利用がとても簡単なのが特徴です。 Postmanの使い方 まずはインストールします。Chromeアプリとしてインストールされるのでワンクリックインストールです。 Postmanではヘッダーを変更したり、CRUD操作に対応したHTTPメソッドでテストができます。特別なソフトウェアを用意することなく、Chromeだけで済むのが便利です。今後ネットワーク周りを扱うChromeアプリは増えていくかも知れませんね。 Postma
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
