google-apps-script - Google Apps Scriptをローカルで開発/管理 MOONGIFT
Google Apps Scriptを使うとGoogleスプレッドシートやドキュメントなどの自動操作ができるようになります。若干特殊なJavaScriptにはなりますが、デバッグ実行もできるので開発もしやすいです。難点はコードをすべてWeb上で書くという点です。 開発をローカルで行いたいという方はgoogle-apps-scriptを使ってみましょう。 google-apps-scriptの使い方 createオプションを使ってコードを生成します。 $ gas create gas-test Creating 'gas-test' in your Google Drive... [✔] [1ePybn623IqFsWw7qmIGQnfFxX5lVDMJ_hbMIuaSIwub9Sj29i1aIj1ax] gas-test 後はコードを変更するだけです。listで既存のスクリプトが一覧できま
Roc - React/Reduxを使ったnodeフレームワーク MOONGIFT
Reactを使ってみたいと思うプログラマはたくさんいると思うのですが、いざちゃんとしたものを作ろうと思うとフレームワークの存在に悩むことになります。Reduxを使うとしてもどういう組み合わせ、ディレクトリ構成でやるのがベストなのか分かりづらかったりします。 そこで使ってみたいのがRocです。React/Reduxを使ったnodeのWebアプリケーションフレームワークです。 Rocの使い方 Rocのインストールはnpmでできます。 npm install -g roc アプリケーションの初期設定はinitを使います。対話型で作ります。 $ roc init web-app-react Found a folder named /path/to/react-app, will try to use it. Using v1.0.3 as template version : ? What's
Snowflake - React Nativeを使ったiOS/Androidアプリ開発の参考に MOONGIFT
ReactはWebサイトはもちろんのこと、React Nativeによってスマートフォンアプリを開発することもできます。元々はiOSだけでしたが、最近ではAndroidアプリの開発にも対応しています。 そんなReact Nativeのスターターキットとも言えるのがSnowflakeです。React NativeとParseを組み合わせたデモとなっています。 Snowflakeの使い方 Snowflakeの下準備としてParse.comでのアプリケーション登録などが必須です。Snowflakeにはユーザ登録機能があります。 ユーザ登録すれば、自分の情報が確認できるようになります。 iOSでの実行はもちろんのこと、Androidでも動かすことができます。これからReact Nativeをはじめようという方は、Snowflakeを参考にすると学べる点が多いのではないでしょうか。 Snowflak
React Desktop - Reactを使ってMac OSX/Windowsアプリを開発 MOONGIFT
Reactへの注目がどんどん高まっています。Webのビューライブラリという枠を越えて、React Nativeによってスマートフォンアプリ開発にも使えるようになっています。特にコンセプトであるLearn once, run everywhere（一度覚えればどこでも動く）が素晴らしい考えと言えます。 そんなReactを次のターゲットとしてデスクトップでも動くようにしたのがReact Desktopです。Mac OSX/Windowsに対応しています。 React Desktopの使い方 React Desktopのデモです。Webでも表示できるのがすごいです。 コントロールもちゃんと動きます。 そしてWindows 10でも使えます。 フォームもまさにWindows 10といった感じです。 メニューを隠すこともできます。 ElectronはHTML5を使ってデスクトップアプリを作ることがで
keynote-client - RubyでKeynoteのスライド作成を自動化
MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました プレゼンテーションのスライド作りは面倒ですよね。特に開発系のスライドはテキストが主体になるので、後々メンテナンスのしやすさを考えるとPowerPointやKeynoteで作るのは面倒に感じてしまうはずです。 そこで自分の好きなフォーマットからKeynoteへ展開するのに使えそうなkeynote-clientを紹介します。これを使えばスライド作成の自動化も考えられるでしょう。 keynote-clientの使い方 インストールはRubygemsで行います。 gem install keynote-client 後は例えばこんな感じのコードを書きます。 require 'keynote-client' include Keynote # Fetch all themes themes
Smart Table Scroll - 100万行のテーブルも高速表示
MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました 業務システムでは大量のデータを一覧表示して欲しいというニーズがよく出ます。しかしあまり大量のデータを描画すると、それだけレンダリングに時間がかかったり、スクロールも困難になります。 そこで使ってみたいのがSmart Table Scrollです。なんと100万行以上のレコードも高速に描画できるJavaScriptライブラリです。 Smart Table Scrollの使い方 Smart Table Scrollのデモです。3カラムでの表示例となっています。 一番下は100万です（インデックスは0からはじまっています）。 実際のデモです。スムーズに動いているのが分かるかと思います。 Smart Table Scrollの種としては、描画しているデータ量にあります。 var table
GreedyNav - これは良い！レスポンシブにメニュー数を変化 MOONGIFT
スマートフォンやタブレットが増えるのに伴ってWebの世界ではレスポンシブなデザインが求められるようになってきました。単に各デバイスに向けて最適化するだけでなく、情報の整理も大事な要件になっています。 今回はWebサイトをレスポンシブにする上での面白いソフトウェア、GreedyNavを紹介します。このアイディアはなかなかイケてますよ。 GreedyNavの使い方 GreedyNavを適用しているサイトです。上のメニューに注目です。 幅を狭めました。 さらに狭めました。 縮んだ分はクリックすると出てきます。 GreedyNavは画面の幅によってメニューを出す個数を可変できるのがポイントです。つまり左側から大事なメニューを並べていくことで、スマートフォンやタブレットでも操作性を損なうことなく使えるようになります。 GreedyNavはHTML5/JavaScript製、MIT Licenseのオ
Peaks.js - JavaScriptで波形を表示 MOONGIFT
SoundCloudでは音楽の波形を表示しています。音楽の変化するポイントが分かりやすく、何より見ていて格好良いのではないでしょうか。単純に音楽プレーヤーで再生するだけでは得られない楽しさがあります。 同じように音楽ファイルを読み込んで波形を描画してくれるのがPeaks.jsです。BBCが開発したソフトウェアになります。 Peaks.jsの使い方 Peaks.jsを使ってMP3ファイルの表示を行っているところです。 下にあるのはファイル全体、上はその一部を拡大したものになります。再生するのに合わせて色が変わったり、インジケータが進んだりします。 Peaks.jsはJavaScript製、LGPLのオープンソース・ソフトウェアです。 BBC Research and Development: Audio Waveforms bbcrd/peaks.js
Android tool for mac·Mac OSXでAndroidアプリを開発する方必携！ MOONGIFT
Androidの画面を録画したいと思うことは多々あります。アプリのデモを作ったり、Androidの機能自体を紹介したりと言った具合です。個人的にも探していたのですが、あまり良い方法がありませんでした。 そんな時見つけたのがAndroid tool for macです。まさにぴったりな使い勝手で、かなり便利なソフトウェアになります。 Android tool for macの使い方 Android tool for macを起動した画面です。 中央のカメラアイコンはスクリーンショット、右側のボタンはスクリーンキャプチャとなっています。 こんな感じに画像が保存されます。 スクリーンキャプチャした動画。なんとMPEG4とアニメーションGIFが同時に保存されます。 その他、apkファイルをインストールしてくれる機能があります。 この他、定型のスクリプトを実行する機能やバグレポートの収集機能が備わっ
MkDocs – プロジェクトドキュメントジェネレータ
MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました プロジェクトのドキュメントをどう記述し、どう管理するかは重要な問題です。やってはいけないのは一つのドキュメントにまとめて管理することです。大きな文書は修正しづらく、全体が密に連携するので一つの修正が他に及ぼす影響が分かりづらくなります。 文書はなるべく疎結合に、分割して管理されるべきです。しかもMarkdownフォーマットであればテキストファイルなので更新も検索も用意です。ということでMkDocsを紹介します。 MkDocsの使い方 MkDocsのインストールはpipで行います。 $ pip install mkdocs まずはヘルプを出してみます。 $ mkdocs help MkDocs (version 0.12.2) mkdocs [help|new|build|serve
markdown-pdf - MarkdownをPDFに変換
MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました Markdownのシェアが増えるのに従って、とりあえずメモはMarkdownでしておくという人も多いでしょう。しかし業務で提出する資料や公開資料などはHTMLではなく、PDFベースでの提出を求められることが多いです。 Webブラウザに出して、それをPDFに変換しても良いですが、それならばmarkdown-pdfを使ってみましょう。markdown-pdfはその名の通り、MarkdownファイルをPDFに変換するソフトウェアです。 markdown-pdfの使い方 markdown-pdfはnpmを使ってインストールできます。 npm install -g markdown-pdf 使い方は以下の通りです。 $ markdown-pdf Usage: markdown-pdf [op
ai2html – IllustratorのAIファイルをHTML化
MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました Webサイトのデザインをする際にPhotoshopまたはIllustratorを使う人に分かれるかと思います（Fireworks派もいますが）。どちらのツールを使ったとしても、できあがったデザインに対してHTML化をするのは一苦労します。 そこでベースをプログラマブルに生成してしまうのはいかがでしょう。そのためのツールがai2htmlです。Illustratorファイルを読み込んでHTML化します。 ai2htmlの使い方 ai2htmlはIlustrator CCで使えるスクリプトになります。Windows、Mac OSXのどちらでも動くようです。設置するパスは /Applications/Adobe Illustrator CC 2014/Presets/en_US/Scrip
Shireframe - これは良い！タグを書いて作れるワイヤフレームライブラリ MOONGIFT
Webサイトの企画を行う際にワイヤフレームを作成することが多いです。そこで部品を配置したり、移動したりしながら色々と考察します。そのために使うワイヤフレーム作成ツールも多数あります。個人的によく使っているのはBalsamiq Mockupsです。手書き風でラフな感じは細かい所にこだわらず、どんどん創作意欲をかき立ててくれます。 Balsamiq Mockupsの欠点として、最近よくあるようなSPAの縦長なページが作りづらいというのがありました。そこで使ってみたいのがShireframeです。 Shireframeの使い方 ShireframeはHTMLベースでワイヤフレームを作成するソフトウェアです。使い方は簡単で、 <script src="http://rawgit.com/tsx/shireframe/master/shireframe-r.js"></script> を読み込みつつ
DevOOPS - 多数のパターンを用意したBootstrap管理画面
デザインでシステムの品質が決まるわけではありません。しかし、それでも全くデザインされていないシステムよりも見た目が整っている方が安心して使えるでしょう。それは管理画面でも同様です。 通常、管理画面は利用者が限定的なため、デザインが適当になってしまいます。そんな寂しい管理画面もDevOOPSを使えば一気に見た目が向上するでしょう。 DevOOPSの使い方 DevOOPSには多くのテンプレートが用意されています。これらを組み合わせるだけで格好良い管理画面ができあがりそうです。Bootstrapベースなので、カスタマイズもそれほど難しくはないと思います。 DevOOPSはHTML5/JavaScript製、GPL v3のオープンソース・ソフトウェアです。 devoopsme/devoops
Amethyst - キーボードでウィンドウを操作するMac OSX用ユーティリティ MOONGIFT
GUIのOSにおいてウィンドウが重なって表示されたり、たくさんのウィンドウが並ぶと作業効率が非常に悪くなります。そのたびにマウスで探したり、新しいウィンドウを開いたりするのはとても面倒です。そこでウィンドウマネージャが必要になります。 今回紹介するAmethystはMac OSX用のウィンドウマネージャで、xmonadを真似た作りになっています。 xmonadの使い方 起動するとアクセシビリティでの設定を求められます。 ウィンドウの並びは変更できます。 ウィンドウのレイアウトはTall、Wide、Fullscreen、Column、Row、Floating、Widescreen Tallが用意されています。この中から使いたいものだけをピックアップしておきます。 後はキーボード操作でウィンドウの配置をダイナミックに変更できます。 例えばこんな感じに綺麗にタイル状に並べられます。 キーボードシ
Realms·リアルタイムコラボレーション機能付きのPython製Wikiエンジン MOONGIFT
Wikiエンジンは5年くらい前は大流行りだった訳ですが、今ではあまり新しいソフトウェアは出てきません。下火なのでしょうか。いえ、とんでもない、Wikiの機能を使ったソフトウェアはとても数多く存在し、そのコンセプトは様々なソフトウェアにとけ込んでいます。 今回はそのWikiエンジンの最新版、Realmsを紹介します。キーワードはリアルタイムコラボレーションです。 Realmsの使い方 こちらがメイン画面です。Markdownベースでシンプルな表示です。 編集画面。プレビュー付きです。 エディタのテーマを変えられます。 コラボレーション機能があります。さっそく開始します。 コラボレーション中。お互いのマウスまで見られます。 右側にはチャット機能があります。 履歴管理もあります。Gitを使っています。 差分表示。これはGitHubっぽい感じですね。 RealmsはBootstrap3、Markd
Vagrantを設定ファイルをWeb上で作成·PuPHPet MOONGIFT
PuPHPetはPHP製、MIT Licenseのオープンソース・ソフトウェアです。 Vagrantが注目を集めています。簡単に仮想サーバを立ち上げられますが、設定ファイルを書けばさらにコマンド一つで環境まで整ってしまいます。そんなVagrantの設定ファイルを設定を行うだけで生成してくれるのがPuPHPetです。 最初にディストリビューションを決めます。 次に最初にインストールするパッケージや設定を決めます。 HTTPサーバです。Apacheまたはnginxから選択します。 PuPHPetなのでPHPメインです。バージョンも5.3/5.4/5.5から選択できます。 PHPのモジュールです。入力補完がついているので簡単に選択できます。 PEARを組み合わせることもできます。 データベースです。MySQLまたはPostgreSQLが使えます。 後は設定ファイルをダウンロードするだけです。Zi
Googleアナリティクスを使ったA/Bテストを簡単に実現させる MOONGIFT
easyABはjQuery/JavaScript製、MIT Licenseのオープンソース・ソフトウェアです。 ボタンの色が赤であるべきか、青であるべきか、キャッチコピーはどちらの方が良いか。そんなことは正直試してみないと分かりません。そこで必要なのがA/Bテストで、easyABを使えばGoogleアナリティクスを使って容易に測定できます。 使い方です。スロットと呼ばれるのがテスト設定になります。A/Bの2パターンに限らず多数の値で試す事ができます。 テストコードです。valueがGoogleアナリティクスで取得できる値になります。 easyABを使えばGoogleアナリティクスへ渡すデータと、そのデザイン上の変更ポイントを簡単に管理できるようになります。JavaScriptでの指定なので画像を変えてみたり、ラベルを変えたりと様々な項目を変更した結果をテストできるでしょう。 MOONGIF
JavaScriptによる自動振仮名入力·autokana MOONGIFT
autokanaはjQuery/JavaScript製のオープンソース・ソフトウェア（MIT License）です。 フォーム入力というのはユーザにとって相当なストレスになります。ちょっとでも面倒だと思うと諦めてしまいます。そこでなるべくユーザのストレスを減らして入力できるライブラリを用意すべきです。今回はフリガナ入力補助ライブラリautokanaを紹介します。 “な”と入力すると、ふりがなの欄に“ナ”と自動入力されます。 続けて入力して変換。ナカツガワときちんと入力されました。 例えばミスしてバックスペースを押せば、フリガナもその部分が削除されます。 振仮名ではひらがな、片仮名の両方が利用できます。KeyDownのイベントを使っていますので、コピー&ペーストされた文字列に対しては動作しません。また、現時点ではローマ字には非対応とのことです。 MOONGIFTはこう見る 入力フォームは総じ
ソートやフィルタにも対応したレスポンシブなテーブル·FooTable MOONGIFT
FooTableはレスポンシブなテーブルデザインを行うライブラリです。 レスポンシブWebデザインにおける最大の難関はテーブルかも知れません。PCならば幅広く表示できたカラムがスマートフォンではうまく表示しきれません。そこで使い勝手を維持しつつ見栄えもいいテーブル表示にFooTableを使ってみましょう。 PCで表示したテーブル。 スマートフォン向けに縮めた場合。+記号が表示されています。 +記号をクリックすると、追加情報が表示されます。 HTMLを組み合わせた行。 こちらでもスマートフォンで表示できます。 タブレットでも調整されて表示されます。 ソート機能版。 もちろんスマートフォンでもソートが使えます。 フィルタリング。インクリメンタルに適用されます。 PCでももちろん使えます。 ソートとフィルタリングは同時に使えます。 FooTableを使う際にはタブレットやスマートフォンで表示する
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
