Vagrantをインストール

Chocolateyが便利なので使う。MacのHomebrewみたいなもの。

参考：

【レビュー】Windowsアプリをコマンド一発で導入できるパッケージ管理システム「Chocolatey」 - 窓の杜

Chocolateyインストール後、vagrantをインストールする。

> cinst vagrant

このあと、パスを通さなければならない。

PATHにC:\HashiCorp\Vagrant\binを追加すること。

プラグインを入れる

> vagrant plugin install <プラグイン名>

vagrant-proxyconf

会社のようなプロキシの中で使うのに便利。

VagrantのかんたんProxy設定 - Qiita [キータ]

vagrant-vbox-snapshot

気軽に環境を保存でき、元に戻したりできる。

Vagrantにスナップショット機能を加えるplugin、vagrant-vbox-snapshotの紹介 - Qiita [キータ]

Vagrantfileを編集する

仮想マシンにログインする

puttyをインストールする

> cinst putty

以下のように設定する。

あとはユーザ名：vagrant、パスワード：vagrantでログインできる。

作業したマシンを保存する（1）

> vagrant package

> vagrant box add customized_debian package.box

参考：

Vagrantのboxに少しだけ手を加えたものをboxとして取っておきたい - Qiita [キータ]

ちなみにボックスを切り替えるときは、まず

> vagrant destroy

が必要。

このように作成されたboxを追加すれば、同じようにvagrant init [box名]に使うことができる。

> vagrant init customized_debian

作業したマシンを保存する（2）

ボックスとして保存するよりもサクッと保存できる。

スナップショットをとる

> vagrant snapshot take <スナップショット名>

スナップショットの一覧を出す

> vagrant snapshot list

指定したスナップショットの状態に移行する

> vagrant snapshot go <スナップショット名>

スナップショットを削除する

> vagrant snapshot delete <スナップショット名>

参考：

Vagrantにスナップショット機能を加えるplugin、vagrant-vbox-snapshotの紹介 - Qiita [キータ]

DropboxでWinでもMacでも使えるようにする

とりあえず

Macで作ったボックスをWinで普通に使うことができる

Winで.vagrant.dフォルダの場所をDropboxの中にする

コントロール パネル

→システムとセキュリティ

→システム

→システムの詳細設定

→環境変数

→ユーザー環境変数

→新規

で、VAGRANT_HOMEという変数を作り、C:\Users\weed\Dropbox\vagrant.dのような値を設定する

参考：

Vagrantのboxなどが格納されるディレクトリを変更する - Qiita [キータ]

VirtualBoxのVMの格納場所をDropboxの中にする

スナップショットをとった後だとうまくいかないので、スナップショットをとったマシンをVirtualBox VMsフォルダから手作業で削除する。

1. Shutdown the manager
2. Copy the directories under Virtualbox VMs where you want them (full directory - logs, .vdi, *.vbox, etc...)
3. Locate .Virtualbox folder (mine was in c:\users[username].VirtualBox
4. Backup VirtualBox.xml and VirtualBox.xml-prev
5. Edit VirtualBox.xml with your favorite editor (or wordpad)
6. Locate
7. Change the SRC location to the new one... before after
8. Save
9. Remove files from original location eg C:\Users[username]\Virtualbox VMs\XP SP3\

参考：

virtualbox.org • View topic - How to move "Virtualbox VMs" files

Virtual Boxを設定する

VirtualBoxの環境設定を開いて「VirtualBox VMsフォルダの場所」をDropboxの中にする。

VirtualBoxを追加する

Vagrantを設定する

環境変数VAGRANT_HOMEを/Users/weed/Dropbox/.vagrant.dのようにする。

.bash_profileにexport VAGRANT_HOME=/Users/weed/Dropbox/vagrant.dのように加筆すればよい。

参考：

Vagrantのboxなどが格納されるディレクトリを変更する - Qiita [キータ]

プログラマーズカフェでLTした資料を読みやすくしてアップしました。

JSオフラインアプリケーションの作り方を調査し、実際に作ってみた、という内容です。

スライド中のハイパーリンクはクリックできるので、試してみてください。

最終的に今回作成したHTML5オフラインアプリケーションもダウンロードできます。

ご参考になれば幸いです。

NokogiriのNode.js版がないかと思って探してみたら6種類もありました。

出展：parsing - HTML-parser on nodejs - Stack Overflow

実は私、Node.jsに賭けてみようかな、と最近考えています。

まだ経験の蓄積がWeb上にたまっていないので、少なくとも5年くらいはRubyの方が使いやすい状況が続くでしょうが、その先はNode.jsにも可能性があるのではないか、と。

なぜそんなことを考えるかというと、30代後半からプログラマに転職した私としては、あるていど賭けに出ることをしないと仕事の経験の深堀りができないかな、と思っています。

どうでしょう？

以下はサーチエンジン対応です。

If you want to build DOM you can use jsdom.

There's also cheerio, it has the jQuery interface and its a lot faster than jsdom.

You might wanna have a look at htmlparser2, which is an streaming parser, and according to it's benchmark, it seems to be faster than others, and no DOM by default. It can also produces DOM, as it is also bundled with a handler that creates a DOM. This is the parser that is used behind cheerio.

And if you want to parse HTML for crawling, you can use YQL. There is a node module for it. YQL I think would be the best solution if your HTML is from a static website, since you are relying on a service, not your own code and processing power. Though note that it won't work if the page is disallowed by the robot.txt of the website, YQL won't work with it.

If the website you're trying to crawl is dynamic then you should be using a headless browser like phantomjs. Also have a look at casperjs, if you're considering phantomjs. And you can control casperjs from node with SpookyJS.

Beside phantomjs there's zombiejs. Unlike phantomjs that cannot be embedded in nodejs, zombiejs is just a node module.

There's a nettuts+ toturial for the latter solutions.

ちょっと皆さんのご意見を伺いたいです。

最近はQiitaやJavaScriptを公開するjsdo.itやマイナーどころではLaTeX文書を共有するwriteLaTeXなんてサービスなんてのもあります。

しかし、こういう便利なサービスを利用していると自分のやったことが分散してします。

やはり、すべて自分のブログに集中させて、セルフブランディングした方がいいのでしょうか。

例えばこの記事のように、WordPressを自分で立ててMarkdown＋Syntax Highlightは可能です。

WordpressでMarkdown & Syntax Highlight | KumanBlog

また、はてなブログでもMarkdown＋Syntax Highlightは可能です。

はてなブログでシンタックスハイライト - 開発初心者メモ( ..)φ

Qiitaとかコードのシンタックスハイライトが便利でついつい書いてしまうのですが、書くたびにモヤッとしたものが残ります。ちなみにQiitaのトラフィックは割と多めで、いろんな人に見てもらいたいならばQiitaの方が優れていると思います。

まとめると、選択肢は3つ。

1. Qiitaでトラフィックの恩恵を受ける
2. WordPress＋独自ドメイン＋プラグインで新ブログを立ち上げる
3. はてなブログに引っ越す

ちなみに私のブログは3つあり記事数は3000ほどあります。特に画像はクローラを書かないと無理なレベルです。引っ越し、超大変・・・

ご意見いただけると幸いです。

1996年に書いた自分のTeX文書が出てきました。これをPDFにしたいなと思ったので、いろいろやってみたんですが・・・

TeX を使ってみよう

一見味気ないサイトですが、きちんとPDFファイルを作ってくれます。

いいですよ！

15年前のフォルダからLaTeX文書が出てきました。少しローカルで出力しようかとも考えたのですが大変そうだったので、Web上で出力できるサービスを探してみました。

見つかったサービスは2つ。

1. writeLaTeX
2. TeXを使ってみよう

1つめの「writeLaTeX」はGoogleドキュメントのようにリッチなインターフェースで共有、共同作業もできます。画像を挿入したりすることもできます。

複数人で論文の執筆をする際などに便利そうですね。

writeLaTeX: Online Collaborative LaTeX Editor with Integrated Rapid Preview

しかし私が使ったのは2つめの「TeXを使ってみよう」でした。見て下さい、このトップページの閑散ぶり。

でも、機能は十分でした。texファイルをPDFファイルに次々と変換できます。画像の挿入とかはできなさそうですが、簡単なPDF化なら、こちらの方が良さそうです。

TeX を使ってみよう

リンク: Objective-C - StoryBoardを使ったiOSアプリをGHUnitでテストするには - Qiita.

リンク: Objective-C - Storyboardを使ったアプリをGHUnitでテストするときviewDidLoadは呼ばれない - Qiita.

我が社ではiPhone、iPadアプリの案件を受注しております。機器の活用に関するご相談も受け付けていますので、お気軽にご連絡下さい。 メールか Twitterで お願いいたします。

我が社の業務履歴については以下のページをご参照下さい。

• 業務履歴書

なお我が社は積極的な開発コミュニティへの貢献をおこなっています。よろしければご覧下さい。

• Qiita
• Stack Overflow
• GitHub
• coderwall

AngularではHTMLタグの属性にspinal-case（すべて小文字、ハイフンで連結）を使い、対応する実装にはcamelCase（1文字目が小文字、語の区切りは大文字にする）を使う。 #angularStudy

— 植田 達郎 (@weed_7777) 2014, 8月 8

ng-app指示子の内部だけがAngularJSによって監視され、モデルやビューの変更が行われる。#angularStudypic.twitter.com/cMloSn2mgA

— 植田 達郎 (@weed_7777) 2014, 8月 8

scriptタグでangular.jsを読み込むと、自動的にHTMLがすべて読み込まれた後に実行される。#angularStudy

— 植田 達郎 (@weed_7777) 2014, 8月 8

中括弧（{}）はカーリーと読む#angularStudy

— 植田 達郎 (@weed_7777) 2014, 8月 8

Angular式は、JavaScriptに似たコードで、その式のあるモデルのスコープで評価される（グローバルなスコープでは評価されない）。#angularStudy

— 植田 達郎 (@weed_7777) 2014, 8月 8

AngularJSアプリケーションを開始するにはngApp指示子を使うのがとても簡単だが、他にも方法はある。#angularStudy

— 植田 達郎 (@weed_7777) 2014, 8月 8

依存性の注入（Dependency injection）とは、コンポーネント間の依存関係をプログラムのソースコードから排除し、外部の設定ファイルなどで注入できるようにするソフトウェアパターンである。英語の頭文字からDIと略される。#angularStudy

— 植田 達郎 (@weed_7777) 2014, 8月 8

DIとは。とあるクラスが、固定した他の(定数、変数、クラスなど)に依存している。依存性をなくすために、動的に動作を注入する。つまり、あるクラス内の決め打ち定数、変数、インスタンスを排除して、外から注入することで、動的に動作を変えられるようにする。#angularStudy

— 植田 達郎 (@weed_7777) 2014, 8月 8

$injectorは、次のような用途に使われる：プロバイダーによって定義されたオブジェクトのインスタンスを呼び出す、型を示す、メソッドを呼び出す、モジュールを実行する #angularStudy

— 植田 達郎 (@weed_7777) 2014, 8月 8

Dependency Injectorのやること。 #angularStudypic.twitter.com/KcsGx5dcWo

— 植田 達郎 (@weed_7777) 2014, 8月 8

AngularJSの公式チュートリアルをやり始めたのだが、DIとかファクトリーとかシングルトンとか出てきて「これ本当にチュートリアル？」という感想。iOS学習でいきなりデリゲートが出てくるのに似ていて、率直なところどちらも大変インテリ臭い。 #angularStudy

— 植田 達郎 (@weed_7777) 2014, 8月 8

インテリ臭いものは普及しない・・・こともないのが、iOSとWindows 8ストアアプリの比較。Windows 8の開発環境は様々なことをうまく隠蔽して、最小限のことさえわかっていればアプリを書けるようにしてくれている。 #angularStudy

— 植田 達郎 (@weed_7777) 2014, 8月 8

これに対し、iOSの開発環境はデザインパターンを知っていることが前提、と大変とっつきにくい。しかし現実にはiOSが圧倒的優勢。AngularJSは、スタートダッシュとしてはかなり良いし、デファクトを取れるのかもしれない・・・などと考えた一日だった。 #angularStudy

— 植田 達郎 (@weed_7777) 2014, 8月 8

#angularStudy angular-seedというひな形があり、これを使うとアプリケーションを一から書かずにすむ。このチュートリアルでは、angular-seedを以下のように修正して使う。 https://t.co/XkqmlkzSwr

— 植田 達郎 (@weed_7777) 2014, 8月 9

ここ2年間にはてなブックマークしたツール/Webサービスをまとめてみました。

（目次のリンクから飛ぶには、まず最後の「続きを読む」をクリックして下さい）

目次

1. スマホアプリ制作
2. JavaScript開発
3. サーバ管理
4. Rails開発
5. その他開発
6. GitHub
7. Web制作
8. PCやiPadからMacにssh接続
9. プレゼンテーション
10. 数式、TeX
11. PDF
12. Mac miniのPCキーボードを使いやすく
13. 仕事効率化
14. ブログ執筆
15. その他便利ツール
16. 趣味

スマホアプリ制作

1. 1枚の画像からiOSやAndroid用の各種サイズの画像をまとめて生成してくれるWebサービス

あの作業って、鬱陶しいですよね。それが一発でできてしまいます。らくちん！

Makeappicon - Generate app icons of all sizes in a click! via kwout

2. スマホアプリのペーパープロトタイピングみたいなことができるツール

使ったことないですが、便利そう。

Balsamiq. Rapid, effective and fun wireframing software. via kwout

3. iPhone アプリを効率的にデザインするのに便利だったツール

まとめてくださっているものです。

iPhone アプリを効率的にデザインするのに便利だったツール | ウエツハラ via kwout

4. モバイルアプリのテストを自動化

アプリの受け入れテストを自動化することができます。ただ、なかなかハマりどころが多いとも聞きますが・・・

Appiumでモバイルアプリのテストを自動化【概要編】 - Intelligent Technology's Technical Blog via kwout

5. iPhone アプリを効率的にデザインするのに便利だったツールたち

これもまとめてくださっているものです。いろいろあるんですねー。どれも便利そう！

iPhone アプリを効率的にデザインするのに便利だったツール | ウエツハラ via kwout

6. 主にスマホアプリのバックエンドに特化したサービス

Backend as a ServiceいわゆるBaaSです。DBをホストしたり、プッシュ通知を簡単に送れたりと、便利です。いろいろ種類はありますが、ここが一番良さげ。

Parse

JavaScript開発

7. 1画面で Js, CSS, HTMLを編集できるWebツール

このページにHTMLやJavaScriptなどを書き込むと、結果となるページも右下に表示されます。オンラインエディタのようなものと説明すればいいのでしょうか。JavaScript界隈では有名なツールです。ちなみにjQueryコミュニティは「バグレポートはjsFiddleを使って再現して提出せよ」となっています。

allWebクリエイター塾　ブログ: 1画面で Js, CSS, HTMLを編集できるツール「jsfiddle」

8. jsfiddleの日本版

7.で説明したjsfiddleと同じようなサービスですが、どちらかというと日本版の方がアート指向です。Canvasをゴリゴリに使ったきれいな作品を多数見ることができます。

jsdo.it - Share JavaScript, HTML5 and CSS

9. Node.jsの開発を支援してくれるGitHubツール3種

どなたかがまとめてくださっていたページです。いつか使いそう・・・

Node.jsの開発を超速化するGitHub連携 三種の神器 - teppeis blog via kwout

10. JSライブラリ導入済みのプロジェクトを自動生成するツール

nodeの自動生成ツールであるBower、Yeomanを使い、様々なライブラリを含んだページを簡単に生成することができます。今後の発展が楽しみ！

HTML5 Boilerplate / jQuery / Backbone.js / RequireJS / Twitter Bootstrapの整った環境を1分でセットアップするには - Qiita via kwout

11. テストツールと組み合わせたJavaScript開発用IDE

JetBrain社のIDE。Idea Intellijを出している会社です。ステップ実行やテスト機能が標準で備わっています。機会があれば買って使いたいですね。

WebStormからtestacularでテストとデバッグをする方法 | Web Scratch

12. 特定ブラウザでの表示をオンラインでエミュレートできるWebサービス

でも最近はモバイルの隆盛もあって、EcmaScript5で行こうという流れになりつつありますね。これだとIEは9以降ということになります。

［ウェブサービスレビュー］特定ブラウザでの表示をオンラインでエミュレートできる「browserling」 - CNET Japan

13. Adobe製HTML/CSS/JavaScriptアニメーション作成ソフト

使ってみたいのですが、お金を出してまで使ってみたいかというと、「Adobeだしなあ」となってしまいます。Adobe系をバリバリ使っている方には良いのではないでしょうか。

押井守氏が“電子書籍”初監督、「Adobe Edge Animate」でHTMLアニメ化 -INTERNET Watch

14. HTMLとJavaScriptを入力するたびに出力ページを表示してくれるWebサービス

これもjsfiddleによく似たサービスで、HTMLとJavaScriptを入力すると結果の画面が表示されます。一文字一文字キーストロークごとに結果の画面を描画し直すので、わりと便利だったりします。StackOverflowにJavaScriptの質問を投げるときは、こちらにサンプルを作っておくと喜ばれます。

JS Bin - Collaborative JavaScript Debugging

15. 読みにくいJavaScriptのコードを読みやすく整形してくれるWebサービス

これはまあ、よくあるやつですね。

Online JavaScript beautifier

サーバ管理

16. 大規模システム構築を自動化するツール

2013年の春くらいから盛り上がったツールで、あらかじめサーバの設定を書いておけば、実際のセットアップを自動化するツールです。Webサービスのデベロッパーは、このツールのおかげでかなり助かっているようです。

大規模システム構築に求められる自動化とChefの基本的な考え方とは | Think IT（シンクイット）

17. PaaS6社

Platform as a Serviceということで、Webアプリケーションのコードをアップロードすると、後はよしなにやってくれるサービスです。サーバの設定を一からしなくてすむのが便利ですが、やや高価という話も聞きます。

【製品紹介】主要PaaSベンダー6社が語る「うちの強みはこれだ！」 − TechTargetジャパン クラウド

18. Webアプリケーションの負荷を監視し、重くなると通知してくれるサービス

例えばメモリが足りなくなったらメールで通知するようにすることができます。設定が簡単で、無料プランでも結構いろいろ使うことができるので、試してみてはいかがでしょう。

Heroku - パフォーマンス監視サービスのNew Relicが超便利な件 - Qiita

Rails開発

19. WindowsでもMacでもRailsを一発で入れてくれるインストーラ

主にRailsのホストを行っているEngine Yard社製ということで、安心して使うことができます。MacはともかくWindowsでRailsが動くのは素晴らしいですね。

RailsInstaller

20. Rails開発用IDE

これもInteriJ Ideaを開発しているJetBrainが出しているIDEです。scaffoldやテストがGUIでできるので、Rails初心者にも優しい環境といえます。もちろんコード補完もしてくれます。

Ruby on Rails IDE :: JetBrains RubyMine

その他開発

21. おしゃれCLIを作るためのnpmモジュール達

例えばYeomanを実行するとおじいさんのアスキーアートが表示されるのですが、そんなみたいなおしゃれなコマンドラインインターフェースのアプリを作るためのツールです。

おしゃれCLIを作るためのnpmモジュール達 - from scratch via kwout

22. 言語リファレンスの該当箇所を一瞬で表示するツール

とにかく速いのが特徴です。

Mac App Store - Dash (Docs & Snippets)

23. CIサービス

CIサービスというとJenkinsが真っ先に思い浮かびますが、これはそれを代行してくれるサービスです。

Coveralls - Test Coverage History & Statistics

24. テキストをUML図に変換してくれるWebサービス

WebサービスということでブラウザさえあればUMLが書けるのですが、WebアプリではないAstah* Community（フリー）の方が便利かな・・・

テキストをUML図に変換してくれる『js-sequence-diagrams』 | IDEA*IDEA

25. Gitの使い方をグラフィカルかつインタラクティブに学べる学習ページ

大変グラフィカルです。少しずつお題が出て、それを達成すると次のお題へ進むことができます。

Learn Git Branching

26. iPad上でプログラミングできるMicrosoft製のHTML5アプリ

iOS上でプログラミングはいかんというAppleの方針を受けてか、このアプリはHTML5アプリです。インターフェースがすっきりとまとまっていてきれいです。WebアプリやWeb APIを使ったアプリなども作ることができます。

iPad上でアプリ開発は、どこまでできるのか（2）：TouchDevelopでプログラミングを始めるための基礎知識 (1/4) - ＠IT

27. 仮想マシンを簡単に用意するツール

仮想マシンをコマンド一発で生成します。壊れてもすぐに初期化できるので、気軽に使うことができます。

Vagrant 入門 - Mac 上に仮想マシンを簡単に用意する - 僕は発展途上技術者

28. ソースの中にMarkdownでコメントを書いて、きれいなコメント付きソースWebページを生成するツール

こんな感じのページを生成します：CoffeeScript, Meet Backbone.js: A Tutorial。ソースコードだけでなく、普通のreadmeファイルなどにも使えるようです。ちなみにdoccoはnodeパッケージで、rubyのgemではRoccoというのがあります。他にもいろいろあるようです。

Docco

29. ターミナルを使ってコーディングするときに役立つツール群

tmuxは一つのターミナルをリモートで離れているプログラマーたちでシェアできます。ペアプログラミングに最適ともいわれています。実際先日使ってみましたが、便利でした。

近頃の開発環境 : Mosh、z、tmux、Emacs、Perl について - naoyaのはてなダイアリー

30. ソースコード用フォント

WindowsにSublime Textを入れるとフォントが残念なことになるのですが、このフォントを入れると、ソースコードがとても読みやすくなります。

［速報］ ソースコードを表示するためのフォント「Source Code Pro」をアドビがオープンソースで無料公開 － Publickey

31. WebブラウザベースのEclipse IDE

Visual Studio Onlineも出てますし、これからはWeb IDEの時代なんでしょうかね。gitも簡単に使うことができるようです。

WebブラウザベースのIDE「Eclipse Orion 5.0」が登場 | SourceForge.JP Magazine

32. UML作成アプリケーション

これはただなのにこんなに使えていいの？と聞きたくなるアプリケーションです。私はUMLは好きなので、しょっちゅう使っています。

astah* community - 無償UMLモデリングツール

33. Markdownエディタ

Macでは定番のMarkdownエディタです。私は、普通のちょっとした文書を作るときもWordではなく、こちらを使っています。

Mou - Markdown editor for web developers, on Mac OS X

GitHub

34. スクリーンキャストをGIFアニメに変換するWebサービス

スクリーンをキャプチャしてGIFアニメに変換してくれます。GitHubのreadmeに埋め込んで使えそうですね。

Gifzo - 宇宙一簡単なスクリーンキャスト共有 via kwout

35. iOSシミュレータからanimation GIFを作るツール群

iOSシミュレータをキャプチャしてGIFアニメに変換してくれるツール。GitHubでレポジトリのreadmeに使うのが便利そうですね。

iOSシミュレータからanimation GIFを作るツール群 via kwout

36. GitHubにプッシュすると自動的にテスト回してデプロイまでやってくれるサービス

要するにCIサービスです。Herokuにデプロイするところが少し変わっていますかね。

Welcome to wercker

37. GitHub上 のソースコードを眺めるための iPhone アプリ

普段の生活ではGitHub上のソースコードなんてあまり見たくないですが、どこでも見ることができるようになるアプリです。

OctSurfer という GitHub上 のソースコードを眺めるための iPhone アプリをリリースしました - yo_waka's blog

Web制作

38. Webページのスピードを測定してくれるWebサービス

様々な面についての評価をしてくれます。

GTmetrix | Website Speed and Performance Optimization

39. ブラウザ上のマウスクリックなどを座標ベースで行うテスト自動化ツール

受け入れテストの自動化のために使います。しかし、実際に使うとなると、なかなかめんどくさいそうですが・・・

Selenium WebDriver via kwout

40. GoogleのWebページ作成ソフト

Google謹製で良さそうだけど、使っている人を見たことないなあ・・・

Google Web Designer via kwout

41. Webページ作成ソフト

これも便利そうなのですが、触ってないなあ・・・

Pinegrow Web Designer via kwout

42. OGP画像の見え方を簡単操作でシミュレートするツール

OGPというのはOpen Graph Protocolの略で、OGP画像というのは、要するにFacebookで引用したときに出る画像のことです。どんなときに使うんだろう・・・

OGP画像の見え方を簡単操作でシミュレート！ - tsmallfield's diary via kwout

43. Webページのいろいろなテストができるツール

AdobeがCreative Cloudになってから出してきたツールです。便利そうだけど高いんだよな・・・

Adobe Edge Inspect：様々なデバイスで手軽にブラウザーテスト | Adobe Developer Connection

44. 画像ファイルからfaviconを生成するWebサービス

faviconというのはWebページをブックマークしたときに表示される小さな四角のアイコンです。小さな画像ファイルなのですが、それを大きな画像から自動生成してくれるサービスです。これは便利ですね。

FavIcon from Pics -- free, instant favicon for your site

45. 3DモデリングソフトMAYAで作ったデータをWebGL形式に変換してくれるツール

3DのモデルがぐりぐりとWebブラウザ上で動く日が近づいてきている気がします。

これでwebGLも怖くない。僕たちが待ち望んでいたinka3D - リアルとバーチャルの間

46. コードを書かずにWebサイトを作成するアプリケーション

「Adobe Muse CCを使用すれば、コードを書かずにWebサイトを作成できます。オリジナルHTMLページの企画、デザイン、パブリッシュを、印刷物のレイアウト作成と同じ ように簡単に行えます。」

Adobe Muse CC入門ガイド | Adobe Design Magazine

PCやiPadからMacにssh接続

47. iOSデバイスからSSH接続するツール

私は一時期、自宅にMacのサーバを立てて、外からiPadでログインして使っていました。コンソールを使う分には、さほど不自由しません。

Zingersoft

48. iOSデバイスからSSH接続するツール

iSSHより高機能です。

パニック - Prompt（プロンプト）, nice SSH for iOS

49. WindowsからVNCでMacの画面を操作するツール

これはiOS端末からログインするのではなくWindowsからログインする方法です。もちろんターミナルだけではなくてGUIです。デスクトップがちゃんと見えます。

WindowsからVNCでMacの画面を操作する | skmks

プレゼンテーション

50. Markdownで書けるプレゼンテーション・ツール

Rubyのgemです。Markdownで書いて、水平線を入れるとそこで次のスライドに移ります。らくちん！あと、LTなどした後にQiitaなどに文章化してアップするのにも、重宝します。

mdpress（MarkDown Press）を使ったプレゼンテーション作成 via kwout

51. JavaScriptでプレゼンテーション

プレゼンテーションスライドのWebページを作るためのJavaScriptライブラリ。いろいろと細かいアニメーションを付けることができるようです。mdpressはImpress.jsを使っています。mkdpressの方が使う分にはラクチンで気に入ってます。

HTML5アプリ作ろうぜ！（1）：impress.jsでド派手なスライドをつくろうぜ！ (1/3) - ＠IT via kwout

52. iPhone、iPadの画面をMacの画面上に表示するアプリ

iOSアプリの稼働している場面を見せて説明するのに便利です。内部的には、Macの画面をApple TVとして認識させるようです。OS X YosemiteではOSの機能として標準搭載されるそうです。

Reflector Airplay Receiver - Mirror an iPhone or iPad to a Mac, PC or Android

53. プレゼンテーション・スライド共有Webサービス

SlideShareの方がいろいろできて良いらしいです。SpeakerDeckの方は使ったことないのでわかりませんが・・・どなたか教えてください。

スライド共有サイト2つを比較 「Speaker Deck」「slideshare」 - ミグストラノート

54. 動きがやたらウネウネしているプレゼンテーションのWebサービス

プレゼンテーションを複数のスライドで作るのではなく、1枚の大きなスライドの中を移動していくように作ることができます。実は個人的に大好きでした。大きな枠の中に埋めるように書いていくところが、板書のイメージに近いんですよね。ただ、1つのプレゼンテーションを作るのにかなりの時間がかかります。個人的には、今後はmdpressでプレゼンを作ってslideshreに投稿するスタイルにしようかなと考えています。

130309-Preziを始めよう　最初に知っておくと良い、ちょっとしたコツ: Weed software

数式、TeX

55. TeX文書をPDFに変換するWebサービス

TeXコードをフォームに入れてアップロードすると、処理されて整形されたPDFが返ってきます。もうローカルで変換しなくてもいいですね。ローカルのアプリが減ることはいいことです。

TeX を使ってみよう via kwout

56. TeXの式を画像にしてくれるWebサービス

現在作っているサービスでは数式を多用するので、使っています。やはりTeXをインストールしなくても使えるという点が便利です。

TeXclip via kwout

57. 数式の使えるWebサービスまとめ

数式の使うことができるWebサービスをいろいろあげてくれています。なかでも「数式の使えるWiki」は個人的に使うときがありそうですね・・・。

数式の使えるWebサービスまとめ | ナンクル力学系 via kwout

58. 人気のあるTeXのエディタまとめ

TeXというと私の世代はテキストエディタで書いたものでしたが、最近はTeXエディタなんてものがあるんですね。

人気のあるTeXのエディタまとめ - SengNingの日記

PDF

59. オンラインでPDFを自由自在に操れる無料ウェブサービス20選

様々なPDFに関するWebサービスです。繰り返しになりますがローカルのアプリが減ることはいいことです。

［保存版］オンラインでPDFを自由自在に操れる無料ウェブサービス20選 - CNET Japan via kwout

60. PDFを表示するHTML5アプリ

Mozilla謹製HTML5PDFビューア。HTML5アプリの近未来を垣間見ることができます。いろいろカスタマイズができるようです。

Getting Started

Mac miniのPCキーボードを使いやすく

61. Mac miniなどでWindows用キーボードを使うのを便利にするツールその1

caps lockキーと、PCキーボードの「無変換」「変換」「ひらがな」キーのためのユーティリティ。Seilはバージョン10.7.0までPCKeyboardHackという名前でした。必需品！

Seil - OS X用のソフトウェア via kwout

62. Mac miniなどでWindows用キーボードを使うのを便利にするツールその2

しかしまだ「Windows」が「左 Command」に、「左 Alt」が「左 Option」になっていて気持ち悪いので、この2つのキーを入れ替えます。必需品！

のびーの食っちゃね〜だらだらな日々。食っちゃ寝生活してても意外と平気だったりする。 : KeyRemap4MacBook と PCKeyboardHack で MacBook Air のキーボード入力をより快適に！(ﾟ∀ﾟ) via kwout

仕事効率化

63. Office Online

言わずと知れたMicrosoft OfficeのWebアプリ版です。レイアウトがほとんど崩れないのが良いのですが、細かい表の編集などはできず、「それはデスクトップ版を使ってね」という感じです。

Office Online - Microsoft Office ドキュメント、スプレッドシート、プレゼンテーションなどを使ってオンラインで共同作業を行います via kwout

64. Macのメニューバーの右側に表示されるアイコンを階層化するツール

ツールが増えてくるとメニューバーの右側のアイコンが左側のアプリケーションメニューとぶつかってしまい、表示されないものが出てきます。このツールを使うと右側のアイコンを階層化できるので、メニューバーがスッキリします。

Bartender | Mac Menu Bar Item Control via kwout

65. Macに最初から入っている「テキストエディット」をプレーンテキストモードにする

デフォルトではテキストエディットは書式を設定できたり画像を貼り込めたりと高機能なのですが、ちょっとしたテキストファイルを作りたいときやドットファイルをちょっと開きたいときなどに使いたいものです。そこで、このTipsです。地味に便利です。Windowsのメモ帳、という感じでしょうか。

140121-Macに最初から入っている「テキストエディット」をプレーンテキストモードにするには: Weed software via kwout

66. Mac用のポータブルアプリのリスト

Windowsではさんざんお世話になったPortableアプリ。最近の私はUSBメモリよりDropboxに入れることにしています。職場のマシンがMacで、家のマシンとツールを共用したいときなどは、これらのアプリをDropboxに入れておくといいかもしれません。

OS X Portable Applications - FreeSMUG via kwout

67. Windows から Mac へ完全移行。Mac を便利にするアプリや設定 17項目

まとまってます。著者は横浜のコワーキングの店主さんです。

Windows から Mac へ完全移行。Mac を便利にするアプリや設定 17項目 | ウエツハラ via kwout

68. ディスク利用率をグラフィカルに表示するツール

MacBook Airとか使っているとすぐに容量がいっぱいになってしまって、不要なファイルを消さなければならないのですが、このツールを使うとどのフォルダがどれくらい容量を取っているかわかって、大変便利です。最近名前が変わったのかな？「Folder Stat」と表示されています。

ディスク利用率をグラフィカルに表示『diskring』 - Macの手書き説明書 via kwout

69. ファイルを暗号化するツール

暗号化したファイルは流出しても個人情報保護法には引っかからないそうです。顧客情報を持ち歩く場合は必需品ですよね。実は私の友人が作っています。

【＃モリトーク】第41話：暗号化ソフトのススメ - 窓の杜

70. キーを数回押すだけで検索したりアプリケーションを立ち上げたりできるツール

使い込んでいる人はほとんどのオペレーションをこれでやっているようです。私はキーバインドを覚えるのが苦手なのでGUIに走ってしまいますが・・・OS X YosemiteではSpotlightがこれに近くなるみたいですね。

Quick Silverを超えた？AlfredでMacをカチャカチャ使う | 男子ハック

71. ローカルの1ファイルでWikiを作ることができるツール

友人が教えてくれました。sqliteみたいに1ファイルでマイWikiを作ることができます。Dropboxに置いておけばどこからでも編集可能。

TiddlyWikiのススメ - (HSJ.jp) ver.20050714 based on 1.2.28

72. ゴミ箱の削除できないファイルを強制的に削除するツール

Macを使い始めて一番困ってる事が「一部の項目へのアクセス権がないため、操作は完了できません。」と削除できないファイルがあり、ゴミ箱を空に出来ない事でした。その不満を解消してくれるソフト「Trash It!」を使えば強制的に削除する事ができます。

Trash It! for Mac | MacUpdate

73. Evernoteと同期するアウトラインメモアプリ

これ使える！Evernoteと同期するアウトラインメモアプリ『Cloud Outliner』 - リニューアル式

74. 自分の気になるキーワードを登録すると、そのキーワードを含んだ勉強会が対応サイトで告知された時メールでお知らせするサービス

Study Mail　IT勉強会自動チェックサービス

75. Macからアプリケーションをきれいに削除するツール

アプリケーションフォルダ以外にも点在しているファイルを探し出していっしょに削除してくれるツールです。鉄板ですね。

AppCleaner

ブログ執筆

76. 画像付きリンクを作るブックマークレット

文字だけのリンクってあんまりそそりませんよねｗ あるページへのリンクを貼るとき、そのページにある画像をクリップして付けることができます。このページは全部これで作ってます。

kwout | A brilliant way to quote via kwout

77. 3Dグラフを作れるWebサービス

グラフを他の人と共有するのに便利かもしれません。

3d Grapher | Demo Studio | MDN

78. キュートな円グラフ簡単作成Webサービス

自分のブログ記事を書くときに、使いどころがいつかありそうな気がします。

HeartRails Graph | キュートな円グラフ簡単作成サービス via kwout

79. Safari版のCreate Link（機能拡張）

一時期Safariに乗り換えようと思って探した機能です。見ているページへのリンクをクリップボードに入れてくれます。

Create LinkをSafariの機能拡張で『TabLinks & Make Link』 - #RyoAnnaBlog

80. iPhoneでWebページ全体をキャプチャーするアプリ

モバイルサイトのスクリーンショットを上から一番下まで撮ってくれます。ブログでモバイルサイトの紹介をするときなどに使いそうです。

iPhone ページ全体をキャプチャーするアプリ!! 640pxの原寸大で高画質保存 via kwout

81. 写真に文字を書き込んだりモザイクを書けたりできるiOSアプリ

「iPhone版Skitch」と言った方がわかりやすいかもしれませんね。iPadで雑誌を読んでいて気になる記事があったときに、その部分を枠で囲っておいて後から見たときにわかりやすくする、というような使い方ができます。

ブログ更新に使える！iPhone版「Skitch」基本操作マニュアル - iTea3.0

その他便利ツール

82. Windowsだけど、マウスホイールの方向を逆にするツール

これはMacのマウスホイールの方向が身体に染みついてしまっているもので・・・

WheelReverseのダウンロード : Vector ソフトを探す！

83. Mac上の音声を録音するツール

Macのサウンドの出力と入力を奪うことで、本来Macのスピーカから出力される音を録音したりすることができます。Skypeの会話を録音したいときに使っています。実況動画を作るのに使います。

どんぶらこDESIGN　Mac上の音声を録音する　Sound flower via kwout

84. Send to Kindleブックマークレット

長いページは、目にやさしいKindleで読みましょう。ちなみに文書がたまってくると、けっこううざくなるので、Kindle PaperWhiteを初期化してしまうのがオススメです。

140121-Send to Kindleブックマークレットを使って、目にやさしいKindleで長いページは読もう: Weed software via kwout

85. ツイートを内容に応じて円グラフにしてくれるWebサービス

自分に対してしか分析できませんが、おもしろいです。

ツイートプロファイリング via kwout

86. 英文チェッカー「Ginger」、学習不要でネイティブ級のフレーズが書けるWebサービス

「come on at the day before yesterday」と入れたら「atじゃなくてinだ」と指摘されました・・・

Online Proofreading Free Online | Ginger Software

87. MacでLZH形式の圧縮ファイルを解凍するのに使えるWebサービス

MacだとデフォルトではLZH形式の圧縮ファイルを解凍することができません。で、普通は解凍ソフトをインストールすることになるのですが、このWebサービスを使うとLZH形式の圧縮ファイルをZIP形式に変換してくれます。

WOBZIP

88. Safari版はてなブックマーク（機能拡張）

これはSafariに乗り換えようとしたときに探しました。結局Chromeのマルチユーザ機能を使うことにしたのですが・・・

Safariでも快適ブックマーク！はてなブックマークSafari拡張登場！

89. 簿記を知らなくても使える会計Webサービス

私も有料プランを使っています。損益計算書を生成してくれるのが便利です。

簿記を知らなくても使える会計ソフト「freee」、グーグル卒業生が開発 -INTERNET Watch

90. 多人数ビデオチャットを無料で

Skypeだと複数人数ビデオチャットは有料なんですよね。そこでこのアプリケーションの出番です。無料です。

Google+ ハングアウト

91. 5分間リラックスするための模様映像ソフト

画面に表示される模様の動きに応じて呼吸をしていると、だんだん呼吸の間隔が大きくなっていって、気持ちが落ち着くというツール。

Mac App Store - Breathing Zone Free - Relaxing Breathing Exercises

92. Dropbox・Googleドライブ・Mac内などを高速検索するアプリ

むかし作ったファイルはどこに保存したっけ・・・などというときに使えそうなアプリ。EvernoteやGmailなども検索してくれるようです。

僕のポケット: Mac - Dropbox・Googleドライブ・Mac内などを高速検索するアプリ「Found」

93. 豊富な素材で漫画のような物語を簡単に作成できるサービス

豊富な素材でストーリーボードを簡単に作成できるサービス「Storyboard That」*二十歳街道まっしぐら

趣味

94. 4つの国立博物館が所蔵する国宝・重要文化財の画像と解説を見ることができるWebページ、スマホアプリ

「このサイトでは、国立文化財機構の4つの国立博物館 （東京国立博物館、京都国立博物館、 奈良国立博物館、九州国立博物館）が 所蔵する国宝・重要文化財の高精細画像を、多言語（日本語、英語、フランス語、中国語、韓国語）による解説とともに ご覧いただくことができます。」

iOS、Androidアプリもあります。

e国宝について

95. ルートナビHTML5アプリ

初めて「便利なHTML5アプリだな」と思ったのが、これ。サイクリングや道案内のルートを簡単に描いて公開できる。JSアプリケーションなのでiPadで手軽にルートを作成できる。PCいらん。ポストPC時代の先駆けかも。

ルートラボ - LatLongLab

96. iTunesのカバーアートの付いていない曲にカバーアートを検索してきて付けてくれるツール

カバーアートが付いていないと、とても残念な感じになりますよね。そんなときは、このツール。自己満足にひたれますｗ。

「iGCover」を使えばiTunesライブラリの曲にアルバムアートワークを簡単に追加できます！[Mac] | MacWin Ver.1.0

97. 自分で作った曲を録音しておけるWebサービス

要するにFlickrの音楽版です。自分の曲をアップロードし、公開することができます。

SoundCloud - Create, record and share your sounds for free

98. Forkが出来るレシピサイト

関係ないですがクックパッドの有料会員になると人気の高いレシピを探すことができます。そういうレシピは、凝った料理ではなく、ほとんど手間がかからない簡単料理だけどおいしい、というものが多いです。そして、そういうレシピにはたくさんの「つくレポ」つまり「自分はこんなアレンジをしたよ」というのが付きます。これもForkのしくみとよく似ていますよね。

Forkが出来るレシピサイト『Forking Recipes』 | 100SHIKI

99. Macで古いArduinoを使うときに必要になるドライバ

MacBookにはCOMポートがないので、COMポートをUSBに変換するケーブルのドライバをここからダウンロードする

Virtual COM Port Drivers

100. 複数の写真から全天の写真を合成するサービス

これは技術的にすごいな、と感じさせるサービスです。でもビューアはTHETAみたいにHTML5ではないんですよね。

Photosynth - Capture your world in 3D.

まずangular/angular-seedをgit cloneし、手元の環境（VirtualBox上のUbuntu Desktop 14.04）で正常に動くか確認する。

すると最後の「npm run protractor」だけがうまくいかない。「Starting selenium standalone server...」のところで落ちる。

ハマりました。俺の午前中を返せー。しかし良記事だなあ。 / “Protractor が動かなくてハマった | 1000g” http://t.co/yeJQckRpWN

— 植田 達郎 (@weed_7777) 2014, 8月 11

結局のところ Java に PATH が通っていなかったのが原因だった模様。 e2e テストは内部で Selenium Standalone Server を呼んでいますが、そこに Java が必要でした。原因は、具体的には、下記のコマンドでJavaを入れると、protractorのE2Eテストが動くようになる。

$ sudo apt-get install openjdk-7-jre-headless

これで

$ java -version

でバージョンが返ってこれば、パスが通っていることになる。

#angularSeed angular-seedをherokuにデプロイする。まずgit cloneでリポジトリを落とし、 $ npm install で依存関係をインストール。次に、heroku toolbeltをインストール。 herokuにログインし、ssh鍵を登録。

— 植田 達郎 (@weed_7777) 2014, 8月 11

この辺はherokuを使ったことがあればスイスイと。

#angularSeed package.jsonのdevDependencyは本番環境では使われない？ので、新たにdependencyという項目を作って、そこにbowerなどを入れると、herokuにデプロイした時にちゃんとbower installしてくれる。

— 植田 達郎 (@weed_7777) 2014, 8月 11

ここもbowerがどうしても実行できなくてハマりました。

heroku用のProcfileは"web: npm start"で良い。 / “herokuでnode.jsのexpress4アプリを動かすためのProcfileの書き方 - memorandum” http://t.co/eSGocBDBt7

— 植田 達郎 (@weed_7777) 2014, 8月 11

これもよくわからなくて困りました。

#angularSeed package.jsonの以下の行 "start": "http-server -a localhost -p 8000" を以下のようにする "start": "http-server" これで普通に80番ポートから見える。

— 植田 達郎 (@weed_7777) 2014, 8月 11

これでひと段落です。が、http-serverは8080番が使われていると自動的に8081番を使ったりするので、ローカルでは8080番、Herokuではprocess.env.PORTを使うように変更します。

具体的にはgulpを使います。まず、

$ npm install --dev-save gulp
$ npm install --dev-save gulp-shell

でインストールします。

次にpackage.jsonのscripts->startを'http-server'から'gulp'に変え、プロジェクトのルートフォルダにgulpfileを作って以下のようにします。

var gulp = require('gulp');
var shell = require('gulp-shell')

gulp.task('default', function () {
    var port = process.env.PORT ||8080;
    gulp.src('')
    .pipe(shell([
        './node_modules/http-server/bin/http-server -p '+ port
    ]))
})

これで確実にローカルでは8080番、Herokuではよしななポートで干してくれます。

angular-seedはTravis CIでテストできるようになっているので、せっかくなのでやりましょう。Travis CIのサイトに行って、CIにかけたいプロジェクトを選べば、あとはpushするたびにやってくれます。

ついでにTravisでHerokuへのデプロイもやってもらうことにしましょう。.travis.ymlに以下のように記述します。api_keyは「heroku auth:token」コマンドで確かめましょう。

deploy:
  provider: heroku
  api_key: ...
  app: my-app-123

これでGitHubにpushすれば自動的にテストが走りHerokuにデプロイしてくれます。ラクチン！

angular-phonecatとangular-seedの2つのプロジェクトはテストでChromeを起動するため、通常のコンソールのみのマシンだとテストできません。

Macに直接入れてもいいのですが、nodeのモジュールが大量に入ります。まあ、プロジェクト下に入るので問題ない気もするのですが、個人的に前のMacではいろいろインストールしすぎて変な状態になったので、仮想マシンを作ってそこにプロジェクトを入れることにしました。

しかし普通に仮想マシンを作ってもホストマシンであるMacからは何も見えないので、プロジェクトを見るにはいちいち仮想マシンを起ち上げなければならず、大変不便。VirtualBoxの共有フォルダ機能もあるのですが、Ubuntu側のフォルダの所有権がめんどくさいことになっていて、あれこれしてみたのですがどうにも不便。

というわけで、仮想マシンをVagrant仮想マシンにすることにしました。これならプロジェクトの中身が /vagrantフォルダに共有されるので便利です。

普通のVirtualBoxだと共有フォルダが大変使いにくいのでUbuntu DesktopをVagrant化してみる / “Steps to create a Vagrant Base Box with Ubuntu 14.04 …” http://t.co/dUq67mmXhG

— 植田 達郎 (@weed_7777) 2014, 8月 13

途中でこんなことをしたり：

VirtualBoxでOS間のクリップボードを共有する方法 - VirtualBoxの使い方

しかーし・・・

仮想ディスクの大きさをデフォルトの8GBのまま仮想マシンを作ると、ディスク使用率が100%になって、どうにもならなくなりました。仮想ディスクを大きくすることもできるのですが、大変めんどくさいし（いろいろしなければならない）、次のVagrant仮想マシンを作るときも同じことをやらなければならないため、結局boxを作るための仮想マシンを一から作り直しました。

今日4回目か5回目のUbuntuインストール・・・これで終わるといいなあ（泣　基本的にUnix運用は覚えることが多いので、覚えるのが苦手な私は可能な限り避けたい。

— 植田 達郎 (@weed_7777) 2014, 8月 13

今度は仮想ディスクの大きさを20GBに。これなら大丈夫だろう！

・・・大丈夫でした。

しかーし！今日はこれから明日の友人来訪（『組み込みOS自作入門』勉強会）に備えてVagrant Ubuntu上にH8のクロスコンパイル環境を構築しなければならない！間に合うのか、俺！？（てか、ここまでやるならMacを使う意味あるのか？）

その後。

Ubuntu DesktopのVagrant化、ソースを編集するのにMacのSublimeが使えて大変快適。やってよかった。

— 植田 達郎 (@weed_7777) 2014, 8月 13

結論。素のVirtualBoxはダメですね。Vagrant化すればようやく便利便利。

追伸：

vagrantでmountエラーの解決方法 - Qiita

Arduinoを使って作った品々です。しかし振り返ると、たくさん作ったものだ。

1. Maker Faire Tokyo 2012

Kinectを使い、画面の中で自分の体を上から降ってくる輪っかに通すとその色のザラメが出る、というわたがし機を出展しました。SDKとしてMicrosoft公式のものを使ったのですが、ノイズを除去する能力が大変優れており、OpenNIと比較して圧倒的に実用的であることがわかりました。

2. インタラクティブわたがしのしくみ

@usopyonさんが作ったプレゼンテーションの一部です。Kinectからの入力をPCが受け、PCがArduinoを駆動し、最後はモーターが制御されてザラメが落ちる、という仕組みになっています。

3. インタラクティブわたがしOpenNI版

上から落ちてくる輪っかをくぐるとザラメが出るわたがし機なのですが、このときはMicrosoft純正のライブラリを使わずにOpenNIというライブラリを使ったため、会場でノイズを拾いまくって全然ダメでした。あれはショックだった・・・

4. KinectとProcessingでクロマキー

この動画はもちろんNYに行って撮ったわけではなく、Kinectで人だけ感知して抽出して、背景画像の上に描画しています。

5. Kinectでサーボを動かしてみた

Kinectの前に手を出して、それを左右に振るとサーボモーターも左右に動きます。サーボモーターに給電する電流の大きさが意外に大きく、動かすのに苦労しました。

6. Kinectで色検知

スクリーン上の青や赤の枠が、その色の部分が大きいことを示しています。3色全部の枠がない理由は、全部出してしまうと差がわかりにくいからです。そこで、一番小さい色の大きさを基底として残りの2食の割合だけを表示しています。緑色の本を開くと緑色の枠が現れるのがわかりますでしょうか？

7. はんだづけカフェでわたがし作り

はんだづけカフェでわたがし機を制作しているところ。わたがし機の制作は本当に大変でした。試行錯誤を重ねて、わたがしは作ることができるようになったのですが、量が少なく、最終的には業務用のものを使わざるを得ませんでした。

8. アナログGPSスピードメータのバスでのテスト

ArduinoにGPSシールドを載せてアナログメーターと接続し、速度を計測しています。なので、見た目はアナログ速度計です。バスが動き出すと針が振れるのがわかりますでしょうか。当初の予定では「方位指示モード」も付ける予定でしたが、その後私が忙しくなってしまい、幻の企画となってしまいました。

9. アナログ速度計とGarminのGPSを持って歩いてみた

アナログ（嘘）速度メーターを市販されている自転車用の速度メーターと比較してみました。歩き始めると、両方とも時速4キロぐらいになり、止まると0キロに落ちます。この比較で、作っている速度メーターが全然おかしな挙動をしているわけではない、ということがわかってホッとしました。

10. 傾きに応じて点灯したりメロディを流すオモチャを作ってみた

傾きを加速度センサで取得し、その値に応じてフルカラーLEDを光らせたり音を出したりしています。このときはまだ子どもにとって魅力的な電子工作とはどのようなものかわかっておらず、機械むき出しの無機質なものになっています。もっとアンパンマンとかのキャラクターもののインターフェースにすれば、子どもももっと反応してくれたのではないかと思います。

11. GPSモジュールが緯度経度を取得しているところ

GPSシールドを買ってArduinoに接続したのだけど、何の反応も返ってこない・・・悪戦苦闘してどうしても駄目で、あきらめて放っていたら正常な値を返し始めました。なんのことはない、電源を入れると最初の2分くらいは自律的にキャリブレーションしていたのでした。「おおっ、動いた！」という動画ですｗ

12. Arduinoによる子ども向け電子メロディ

ボタンを押すと電子メロディーが流れます。ポイントは、それまでは無機質だったボタンに、たしかNHKのEテレに出てくるキャラクターを貼ったということです。そうすると、子どもの反応がとても良くなりました。大切なのは機能ではなくて親しみなのだと気づかされました。

13. 新幹線の中でArduino工作

よくわからないBGMが付いていてゴメンナサイ。YouTubeの機能でBGMを付けたのですが、ちょっと合ってないですよね。ちなみに新幹線の中で電子工作、というテーマはそれまでも2回ぐらい試したのですが、ピンセットを忘れてブレッドボードのジャンパが付け替えられないなど、失敗し続けてきました。このビデオはようやく成功したときのビデオです。しかしはた目から見たら怪しいだろうなあ・・・

14. koressさんの心拍シールドの出力をProcessingでグラフ化してみた

これはMakeで売っていた心拍測定シールド（たしかフォトトランジスタで光の量の変化を測定している）を買って、何かのサンプルを使ってProcessingのグラフに出力しています。Processingでグラフを作るのって、意外にめんどくさいんですよね。まあ、普通に作るともっと大変だと思いますが。

15. Arduinoでつつくとアンパンマンが顔を上げるオモチャを作ってみた

これはいろいろ付いているように見えますが、実は加速度センサとサーボモーターしか使っていません。自身が動くと、加速度の変化でそれを感知し、サーボを動かす、という流れです。ポイントは、しつこいようですがサーボが動いたときにアンパンマンの顔が持ち上がるようにしたことです。娘の食いつきはだいぶ良かったです。

16. Arduino + Wave Shield + Softalkでしゃべらせてみた

これはAdafruit社のWave Shieldというwavファイルを再生するシールドを使ったものです。SDカードにwavファイルを入れて電源を入れると、wavファイルを再生します・・・のはずなんですが、なかなか再生できませんでした。実はwavファイルと言っても周波数とかビットレートを、wave shieldの再生可能なものに合わせないといけないのでした。しゃべっている内容はフリーソフトのsoftalkを使いました。日本語の文章を入力すると音声ファイルにしてくれます。

17. Arduinoでランダムな色で光るおもちゃ

100均で売っているプラスチック容器に、Arduinoにブレッドボードシールドを乗せたものを入れています。電池も容器に入るのがポイントで、子供が蹴ったりいじくり回しても大丈夫です。娘はちょうど色の名前を覚え始めたときだったので、「黄色！」などと遊んでいました。

18. Arduino子ども用電子メロディに、しまちゃんを描いてみたら・・・

これは弁当箱の中にArduinoとスピーカーを入れ、感圧センサをふたの外側に出し、その上にクリアファイルのようなものを乗せて固定し、しまじろうとうーたんの絵を描いた紙を入れたものです。ほんの思いつきで作ったものなのですが、娘は大変食いつきました。このとき、おもちゃは機能よりもキャラクター性なのだなと私は気づきました。これは大きな気づきでした。

19. Arduino自転車速度計を改良してみた

速度計の表示をよりわかりやすいものに変えました。動画の後半でカチカチやっていますね。実際には自転車の車輪に磁石を付け、自転車のフレームに磁石によってオンオフされるリードスイッチを付けます。リードスイッチがオンオフされるのを、カチカチとタクトスイッチを押すことでシミュレーションしているわけです。あと、容器も大きなものになりました。電池も液晶パネルもふたの中に入るようになり、パラパラとした雨でも大丈夫になりました。こういう容器を100均で探すのが、なかなか楽しいです。

20. Arduinoでサイコンを作って走ってみた

動画の質が悪くなってきました。この頃はW-ZERO3esというスマートフォン（当時は珍しかった）で録画しています。

どうでもいいことですが最近駅の構内のアナウンスで「歩きながらのスマートフォンの閲覧は危険ですのでおやめください」と聞くと、「スマートフォン」という言葉はずいぶん普及したなあ、と思います。さて、この作品ですが、個人的には初のオリジナルなガジェットでした。

当時の私は自転車にハマっており、趣味を延長する形で作ったのでした。途中、@su_exs くんには大変お世話になりました。二人でああだこうだと喫茶店で話したり実験したりしたのは、とても楽しかったです。

メイキングはニコニコ動画の方に上げてます。7600 Viewも付いたのがうれしかったです。

Arduinoで自転車のスピードメーターを作ってみた - ニコニコ動画:GINZA

21. Ruby/Miyako & Arduinoで温度計を作ってみた

左側のPCに目が行ってしまいますが、右側のArduinoの上のブレッドボードに温度センサがのっており、それを指でつまんで暖めているのがポイントです。PCの画面に表示されている温度がだんだん上がっていきます。

左側のPCは、かつて一世を風靡したネットブックです。ASUSのものでした。この前はNASでRAID5を組んでいたのですが、HDDが2台同時に吹っ飛んだので、この頃はDropboxでバックアップをとり、自宅にデスクトップは置かないようにしていました。

PCの画面上のグラフ表示はRubyのライブラリであるMiyakoを使いました。MiyakoはRubyでゲームを作るためのライブラリです。しかし早々と1.9に対応してしまったためにWin32アプリケーションとして配布することができなくなってしまいました。1.8系だと変換できたのですが・・・今はどうなってるんでしょうね。もうRubyと言えばRailsという世の中になってしまいましたからね。なんだか昔話のようになってきたなあ。

22. Arduinoでゾートロープ作り

これは・・・たしかCQ出版のムックだったの思うのですが、「ゾートロープを作ろう」という、今から思えばかなり無茶ぶりな記事が載っていたのです。

しかしそれに気づかない私は、「よし、娘の3歳の誕生日に作ってあげよう」と決意してしまったのでした。大変だった・・・まあでも何とか作りました。しかし当時の録画環境はW-ZERO3es。動いているところをうまく記録するのは・・・不可能でした。

いわゆるゾートロープというものは、以下のようなものです。

23. こども向け電子メロディをArduinoでつくる

Arduinoを初めて動かした私が考えたのは、2歳になる娘のために何かおもちゃは作ってあげられないか、ということでした。そこで、当時の娘が大好きだったアンパンマンのメロディーが流れる電子メロディーを作りました。

ぶっちゃけた話をすると2014年現在、娘の一番のおもちゃはiPhoneです。加速度センサとタッチパネル、その他センサを詰め込まれたiPhoneは、おもちゃとして、太刀打ちできるものではありませんでした。しかしこのころは娘のおもちゃは買わずに作ろう、などと大それたことを考えました。3年間ぐらい頑張ったかな・・・甘酸っぱい思い出ですｗ

24. Arduinoでねぎを振ってみた

最初の最初はネギ振りから始めました。当時は｢ネギ振りとは｣という記事も雑誌に載っていたりして、電子工作の初心者は「とりあえずネギ振ろう」という慣習がありました。

しかし振り返ってみるとWebサービスの世界はこの5年でだいぶ変わりましたが、Arduinoのような組み込みの世界はそれほど変わっていない気がします（Arduinoの登場こそが変化だったのかもしれませんが）。まだ触ったことのない方は、一度やってみることをおすすめします。

不思議なもので、何人かに一人は「ハードウェア」属性を持っています。ハマるのです。ハマると大変楽しいので、ぜひ一度お試しください。

機会と資材があれば名古屋近辺でもArduino講習を開きたいと思います。よろしくお願いします。

まずFeedlyの左のペインから一つのブログをクリックします。すると、そのタイトルが画面上に表示され、その右側にアイコンが3つ表示されます。

１．右端の歯車のアイコンをクリックします。

２．「Edit Subscription」を選びます。

３．すると左端から「どのように登録するか？」というペインが出てきます。その中の「Title」に注目です。

４．このように著者の名前を付けます。

これで、「このブログ、誰のだっけ？」を防ぐことができます。

今日はOgaki Mini Maker Faireに行ってきました。

わーお、ガールズ＆パンツァーだ@OMMFpic.twitter.com/UxTVg8PNFL

— 植田 達郎 (@weed_7777) 2014, 8月 23

今回の大垣でいちばんお気に入り＆リツイートされたツイートでしたｗ

激しく意味のわからないキャッチコピー #OMMFpic.twitter.com/5jSt5JeMQn

— 植田 達郎 (@weed_7777) 2014, 8月 23

Arduinoの構成部品を一辺に寄せて、残りの部分をバニラシールド化した作品。Universalnoという商品名で販売しているそうです。 #OMMFpic.twitter.com/uXCYVwx4Lr

— 植田 達郎 (@weed_7777) 2014, 8月 23

写真撮り直し #OMMFpic.twitter.com/2ZfnMNpm9A

— 植田 達郎 (@weed_7777) 2014, 8月 23

これはアイデアものですね。ベースボードのスペースを有効に使おうという趣旨です。スイッチサイエンスさんでも販売しているそうです。

この点灯しているLEDは何を意味するのかというと、4時と5時と6時に雨が降ると予想されていることを示しています。いけてる！ #OMMFpic.twitter.com/4dcONsY3yi

— 植田 達郎 (@weed_7777) 2014, 8月 23

こちらもアイデアもの。見事なIoTです。じゅうぶん商品化できるのでは？

これはキーボードに貼るPhotoshopとIllustratorのショートカットシールです。 #OMMFpic.twitter.com/NCr4M1D1st

— 植田 達郎 (@weed_7777) 2014, 8月 23

Webでも売っているそうです！ http://t.co/q3l4lpu2Jy@kousakukoubou

— 植田 達郎 (@weed_7777) 2014, 8月 23

これは買って知り合いのPhotoshoper＆Illustratorerに送りました。反応が楽しみです。他にもキーボードに貼るシールはいろいろあるみたいなのですが、Amazonではおしなべて品切れでした。残念！

冷えミク。冷蔵庫を開けるたびに喋りかけてくる。グループを作り商品化し、コミケで販売。 http://t.co/NEQE747J5F#OMMF

— 植田 達郎 (@weed_7777) 2014, 8月 23

これはフォトレジスタで冷蔵庫の開閉を感知し、冷蔵庫の扉が開かれるとしゃべる、というしくみです。ネタとして作ってみたら大反響で、グループを活用していろいろな方の支援を受けて商品化したそうです。

グループのホームページはこちらです：

TechnoAlta

自分の作品が商品化できるかも？とお考えの方は是非アクセスしてみてはいかがでしょう。

Arduinoシールドが乗るFPGAボード。書き込みはChrome(WIN)アプリでできるという！ #OMMFpic.twitter.com/b0Odbh1O5W

— 植田 達郎 (@weed_7777) 2014, 8月 23

FPGAってChromeアプリで書き込めるんですね。なんとモダンな・・・そういう視点ではArduinoはまだまだレガシー。mbedはさらに進んでいますけどね。しかしブラウザ上で動くChromeアプリがなんでシリアルポートを操作できるんでしょう？

（再掲）秋月で売っている音声合成LSIとUniversalnoを組み合わせた作品。 http://t.co/Or0gnTe0Cw

— 植田 達郎 (@weed_7777) 2014, 8月 23

このLSIの存在は知りませんでした。便利ですね。夢が広がります。音声合成と言えばVoiceTextのWeb APIも個人的に気になっています。でもハンドリングするには高レートのWaveファイルを処理できなければダメなので、Raspberry Piじゃないと厳しいかな・・・

（再掲）UniversalnoとマトリクスLEDを組み合わせた作品。 http://t.co/gu50SSS3q3

— 植田 達郎 (@weed_7777) 2014, 8月 23

Universalnoの空きスペースにマトリクスLEDを載せて、ワンボードで作品を完結させています。いいですね！

（再掲）Arduino駆動のロボット「ラピロ」。Raspberry Pi駆動も可能。 http://t.co/WIbABq0Bca

— 植田 達郎 (@weed_7777) 2014, 8月 23

4万円。でも面白そう！何かとてもいいことがあったら買おうかな・・・

というわけで、大変楽しめたイベントでした！解説して下さった皆さん、ありがとうございました！

The Dropbox Blog » Blog Archive » Introducing a more powerful Dropbox Proの日本語訳です。

新しい共有制御

シンプルなコラボレーションは人々がDropbpx Proを選ぶ理由の一つです。しかし、共有してるものを守るための方法が他にもないかという要望が私たちに寄せられていました。それで、私たちは新しい共有制御をDropbox Proに提供することにしたのです。

共有リンクのパスワードはセキュリティをさらに一層追加するので、パスワードを知っている人だけがあなたのリンクにアクセスすることができます。

共有リンクの期限切れは、あなたのリンクがどれくらいの期間有効なのかを設定することで、あなたの大切なファイルを守ります。

共有フォルダの閲覧のみ可能なパーミッションは、どの受信者があなたの共有フォルダのファイルを編集することができるのか、さもなくば見ることができるだけなのか、選ぶことができます。

デバイスが失われたときのセーフガード

遠隔消去は、失われたか盗まれたデバイスからあなたのDropboxファイルを消すことができます。それらのファイルは、Dropboxの中では安全にバックアップされます。例えば、あなたが飛行機にノートPCを置いてきてしまっても、心配することはありません。— you’re worried about the stuff that’s on it。

一つのプランで、より多くの容量を

私たちはあなたをどのプランが適切かどうかとか、十分な容量があるかどうかといったことを心配させたくないです。そこで今日、私たちはDropboxをシンプルに1つのプランだけにします。そのプランは月$9.99のままで、容量は1 TB (1,000 GB) となります。

ここ1週間ほどAfloatというアプリ拡張を使っているのですが、なかなか便利なのでご紹介します。

Afloatはウィンドウを最前面に表示し、半透明にしてくれるアプリ拡張です。

例えば、テストを更新したときにテストを走らせたり、JavaScriptの文法をチェックしたりといった、バックグラウンドで行う処理をいちいちウィンドウを切り替えなくても見ることができます。

このアプリ拡張を使うにはまずSIMBLのインストールが必要です。

• SIMBL

次にAfloatをインストールします。

• Download Afloat 2.4

そして該当のウィンドウを選択してWindowメニューを開きます。

個人的にはSublimeの隅に置いておくことが多いです。ぜひ使ってみて下さい。

Google Analyticsでは意外にいろんなことがわかります。

例えば、このブログの「ユーザーの性別」を見てみましょう。

こんなことがわかります。

んん？

最後のを見ると同一ドメインで運用している他の私のブログのユーザーも混じっている気がするのですが・・・内容は興味深いですね。

モバイル機器からどれくらい来ているのか見てみましょう。

デスクトップが圧倒的ですね。他のサイトはどうなんだろう・・・？

どんな機種で来ているか見てみましょう。

4位5位がともにNexusというのが硬派でいいですね。

OSのバージョンも見てみましょう。プライマリディメンションを「オペレーティングシステム」にします。お、Windows Phoneで来てる方がおられますね。WindowsはWindowsタブレットでしょうか。

てな感じで、見ていてなかなか面白いです。皆さんもぜひ見てみてください。