ここ2年間にはてなブックマークしたツール/Webサービスをまとめてみました。
（目次のリンクから飛ぶには、まず最後の「続きを読む」をクリックして下さい）
目次
- スマホアプリ制作
- JavaScript開発
- サーバ管理
- Rails開発
- その他開発
- GitHub
- Web制作
- PCやiPadからMacにssh接続
- プレゼンテーション
- 数式、TeX
- Mac miniのPCキーボードを使いやすく
- 仕事効率化
- ブログ執筆
- その他便利ツール
- 趣味
スマホアプリ制作
1. 1枚の画像からiOSやAndroid用の各種サイズの画像をまとめて生成してくれるWebサービス
あの作業って、鬱陶しいですよね。それが一発でできてしまいます。らくちん！
2. スマホアプリのペーパープロトタイピングみたいなことができるツール
使ったことないですが、便利そう。
3. iPhone アプリを効率的にデザインするのに便利だったツール
まとめてくださっているものです。
4. モバイルアプリのテストを自動化
アプリの受け入れテストを自動化することができます。ただ、なかなかハマりどころが多いとも聞きますが・・・
5. iPhone アプリを効率的にデザインするのに便利だったツールたち
これもまとめてくださっているものです。いろいろあるんですねー。どれも便利そう！
6. 主にスマホアプリのバックエンドに特化したサービス
Backend as a ServiceいわゆるBaaSです。DBをホストしたり、プッシュ通知を簡単に送れたりと、便利です。いろいろ種類はありますが、ここが一番良さげ。
JavaScript開発
7. 1画面で Js, CSS, HTMLを編集できるWebツール
このページにHTMLやJavaScriptなどを書き込むと、結果となるページも右下に表示されます。オンラインエディタのようなものと説明すればいいのでしょうか。JavaScript界隈では有名なツールです。ちなみにjQueryコミュニティは「バグレポートはjsFiddleを使って再現して提出せよ」となっています。
8. jsfiddleの日本版
7.で説明したjsfiddleと同じようなサービスですが、どちらかというと日本版の方がアート指向です。Canvasをゴリゴリに使ったきれいな作品を多数見ることができます。
9. Node.jsの開発を支援してくれるGitHubツール3種
どなたかがまとめてくださっていたページです。いつか使いそう・・・
10. JSライブラリ導入済みのプロジェクトを自動生成するツール
nodeの自動生成ツールであるBower、Yeomanを使い、様々なライブラリを含んだページを簡単に生成することができます。今後の発展が楽しみ！
HTML5 Boilerplate / jQuery / Backbone.js / RequireJS / Twitter Bootstrapの整った環境を1分でセットアップするには - Qiita via kwout
11. テストツールと組み合わせたJavaScript開発用IDE
JetBrain社のIDE。Idea Intellijを出している会社です。ステップ実行やテスト機能が標準で備わっています。機会があれば買って使いたいですね。
12. 特定ブラウザでの表示をオンラインでエミュレートできるWebサービス
でも最近はモバイルの隆盛もあって、EcmaScript5で行こうという流れになりつつありますね。これだとIEは9以降ということになります。
13. Adobe製HTML/CSS/JavaScriptアニメーション作成ソフト
使ってみたいのですが、お金を出してまで使ってみたいかというと、「Adobeだしなあ」となってしまいます。Adobe系をバリバリ使っている方には良いのではないでしょうか。
14. HTMLとJavaScriptを入力するたびに出力ページを表示してくれるWebサービス
これもjsfiddleによく似たサービスで、HTMLとJavaScriptを入力すると結果の画面が表示されます。一文字一文字キーストロークごとに結果の画面を描画し直すので、わりと便利だったりします。StackOverflowにJavaScriptの質問を投げるときは、こちらにサンプルを作っておくと喜ばれます。
15. 読みにくいJavaScriptのコードを読みやすく整形してくれるWebサービス
これはまあ、よくあるやつですね。
サーバ管理
16. 大規模システム構築を自動化するツール
2013年の春くらいから盛り上がったツールで、あらかじめサーバの設定を書いておけば、実際のセットアップを自動化するツールです。Webサービスのデベロッパーは、このツールのおかげでかなり助かっているようです。
17. PaaS6社
Platform as a Serviceということで、Webアプリケーションのコードをアップロードすると、後はよしなにやってくれるサービスです。サーバの設定を一からしなくてすむのが便利ですが、やや高価という話も聞きます。
18. Webアプリケーションの負荷を監視し、重くなると通知してくれるサービス
例えばメモリが足りなくなったらメールで通知するようにすることができます。設定が簡単で、無料プランでも結構いろいろ使うことができるので、試してみてはいかがでしょう。
Rails開発
19. WindowsでもMacでもRailsを一発で入れてくれるインストーラ
主にRailsのホストを行っているEngine Yard社製ということで、安心して使うことができます。MacはともかくWindowsでRailsが動くのは素晴らしいですね。
20. Rails開発用IDE
これもInteriJ Ideaを開発しているJetBrainが出しているIDEです。scaffoldやテストがGUIでできるので、Rails初心者にも優しい環境といえます。もちろんコード補完もしてくれます。
その他開発
21. おしゃれCLIを作るためのnpmモジュール達
例えばYeomanを実行するとおじいさんのアスキーアートが表示されるのですが、そんなみたいなおしゃれなコマンドラインインターフェースのアプリを作るためのツールです。
22. 言語リファレンスの該当箇所を一瞬で表示するツール
とにかく速いのが特徴です。
23. CIサービス
CIサービスというとJenkinsが真っ先に思い浮かびますが、これはそれを代行してくれるサービスです。
24. テキストをUML図に変換してくれるWebサービス
WebサービスということでブラウザさえあればUMLが書けるのですが、WebアプリではないAstah* Community（フリー）の方が便利かな・・・
25. Gitの使い方をグラフィカルかつインタラクティブに学べる学習ページ
大変グラフィカルです。少しずつお題が出て、それを達成すると次のお題へ進むことができます。
26. iPad上でプログラミングできるMicrosoft製のHTML5アプリ
iOS上でプログラミングはいかんというAppleの方針を受けてか、このアプリはHTML5アプリです。インターフェースがすっきりとまとまっていてきれいです。WebアプリやWeb APIを使ったアプリなども作ることができます。
27. 仮想マシンを簡単に用意するツール
仮想マシンをコマンド一発で生成します。壊れてもすぐに初期化できるので、気軽に使うことができます。
28. ソースの中にMarkdownでコメントを書いて、きれいなコメント付きソースWebページを生成するツール
こんな感じのページを生成します：CoffeeScript, Meet Backbone.js: A Tutorial。ソースコードだけでなく、普通のreadmeファイルなどにも使えるようです。ちなみにdoccoはnodeパッケージで、rubyのgemではRoccoというのがあります。他にもいろいろあるようです。
29. ターミナルを使ってコーディングするときに役立つツール群
tmuxは一つのターミナルをリモートで離れているプログラマーたちでシェアできます。ペアプログラミングに最適ともいわれています。実際先日使ってみましたが、便利でした。
30. ソースコード用フォント
WindowsにSublime Textを入れるとフォントが残念なことになるのですが、このフォントを入れると、ソースコードがとても読みやすくなります。
31. WebブラウザベースのEclipse IDE
Visual Studio Onlineも出てますし、これからはWeb IDEの時代なんでしょうかね。gitも簡単に使うことができるようです。
WebブラウザベースのIDE「Eclipse Orion 5.0」が登場 | SourceForge.JP Magazine
32. UML作成アプリケーション
これはただなのにこんなに使えていいの？と聞きたくなるアプリケーションです。私はUMLは好きなので、しょっちゅう使っています。
33. Markdownエディタ
Macでは定番のMarkdownエディタです。私は、普通のちょっとした文書を作るときもWordではなく、こちらを使っています。
GitHub
34. スクリーンキャストをGIFアニメに変換するWebサービス
スクリーンをキャプチャしてGIFアニメに変換してくれます。GitHubのreadmeに埋め込んで使えそうですね。
35. iOSシミュレータからanimation GIFを作るツール群
iOSシミュレータをキャプチャしてGIFアニメに変換してくれるツール。GitHubでレポジトリのreadmeに使うのが便利そうですね。
36. GitHubにプッシュすると自動的にテスト回してデプロイまでやってくれるサービス
要するにCIサービスです。Herokuにデプロイするところが少し変わっていますかね。
37. GitHub上 のソースコードを眺めるための iPhone アプリ
普段の生活ではGitHub上のソースコードなんてあまり見たくないですが、どこでも見ることができるようになるアプリです。
Web制作
38. Webページのスピードを測定してくれるWebサービス
様々な面についての評価をしてくれます。
GTmetrix | Website Speed and Performance Optimization
39. ブラウザ上のマウスクリックなどを座標ベースで行うテスト自動化ツール
受け入れテストの自動化のために使います。しかし、実際に使うとなると、なかなかめんどくさいそうですが・・・
40. GoogleのWebページ作成ソフト
Google謹製で良さそうだけど、使っている人を見たことないなあ・・・
41. Webページ作成ソフト
これも便利そうなのですが、触ってないなあ・・・
42. OGP画像の見え方を簡単操作でシミュレートするツール
OGPというのはOpen Graph Protocolの略で、OGP画像というのは、要するにFacebookで引用したときに出る画像のことです。どんなときに使うんだろう・・・
43. Webページのいろいろなテストができるツール
AdobeがCreative Cloudになってから出してきたツールです。便利そうだけど高いんだよな・・・
Adobe Edge Inspect：様々なデバイスで手軽にブラウザーテスト | Adobe Developer Connection
44. 画像ファイルからfaviconを生成するWebサービス
faviconというのはWebページをブックマークしたときに表示される小さな四角のアイコンです。小さな画像ファイルなのですが、それを大きな画像から自動生成してくれるサービスです。これは便利ですね。
45. 3DモデリングソフトMAYAで作ったデータをWebGL形式に変換してくれるツール
3DのモデルがぐりぐりとWebブラウザ上で動く日が近づいてきている気がします。
46. コードを書かずにWebサイトを作成するアプリケーション
「Adobe Muse CCを使用すれば、コードを書かずにWebサイトを作成できます。オリジナルHTMLページの企画、デザイン、パブリッシュを、印刷物のレイアウト作成と同じ ように簡単に行えます。」
Adobe Muse CC入門ガイド | Adobe Design Magazine
PCやiPadからMacにssh接続
47. iOSデバイスからSSH接続するツール
私は一時期、自宅にMacのサーバを立てて、外からiPadでログインして使っていました。コンソールを使う分には、さほど不自由しません。
48. iOSデバイスからSSH接続するツール
iSSHより高機能です。
49. WindowsからVNCでMacの画面を操作するツール
これはiOS端末からログインするのではなくWindowsからログインする方法です。もちろんターミナルだけではなくてGUIです。デスクトップがちゃんと見えます。
プレゼンテーション
50. Markdownで書けるプレゼンテーション・ツール
Rubyのgemです。Markdownで書いて、水平線を入れるとそこで次のスライドに移ります。らくちん！あと、LTなどした後にQiitaなどに文章化してアップするのにも、重宝します。
51. JavaScriptでプレゼンテーション
プレゼンテーションスライドのWebページを作るためのJavaScriptライブラリ。いろいろと細かいアニメーションを付けることができるようです。mdpressはImpress.jsを使っています。mkdpressの方が使う分にはラクチンで気に入ってます。
52. iPhone、iPadの画面をMacの画面上に表示するアプリ
iOSアプリの稼働している場面を見せて説明するのに便利です。内部的には、Macの画面をApple TVとして認識させるようです。OS X YosemiteではOSの機能として標準搭載されるそうです。
53. プレゼンテーション・スライド共有Webサービス
SlideShareの方がいろいろできて良いらしいです。SpeakerDeckの方は使ったことないのでわかりませんが・・・どなたか教えてください。
54. 動きがやたらウネウネしているプレゼンテーションのWebサービス
プレゼンテーションを複数のスライドで作るのではなく、1枚の大きなスライドの中を移動していくように作ることができます。実は個人的に大好きでした。大きな枠の中に埋めるように書いていくところが、板書のイメージに近いんですよね。ただ、1つのプレゼンテーションを作るのにかなりの時間がかかります。個人的には、今後はmdpressでプレゼンを作ってslideshreに投稿するスタイルにしようかなと考えています。
130309-Preziを始めよう 最初に知っておくと良い、ちょっとしたコツ: Weed software
数式、TeX
55. TeX文書をPDFに変換するWebサービス
TeXコードをフォームに入れてアップロードすると、処理されて整形されたPDFが返ってきます。もうローカルで変換しなくてもいいですね。ローカルのアプリが減ることはいいことです。
TeX を使ってみよう via kwout
56. TeXの式を画像にしてくれるWebサービス
現在作っているサービスでは数式を多用するので、使っています。やはりTeXをインストールしなくても使えるという点が便利です。
57. 数式の使えるWebサービスまとめ
数式の使うことができるWebサービスをいろいろあげてくれています。なかでも「数式の使えるWiki」は個人的に使うときがありそうですね・・・。
58. 人気のあるTeXのエディタまとめ
TeXというと私の世代はテキストエディタで書いたものでしたが、最近はTeXエディタなんてものがあるんですね。
人気のあるTeXのエディタまとめ - SengNingの日記
59. オンラインでPDFを自由自在に操れる無料ウェブサービス20選
様々なPDFに関するWebサービスです。繰り返しになりますがローカルのアプリが減ることはいいことです。
60. PDFを表示するHTML5アプリ
Mozilla謹製HTML5PDFビューア。HTML5アプリの近未来を垣間見ることができます。いろいろカスタマイズができるようです。
Mac miniのPCキーボードを使いやすく
61. Mac miniなどでWindows用キーボードを使うのを便利にするツールその1
caps lockキーと、PCキーボードの「無変換」「変換」「ひらがな」キーのためのユーティリティ。Seilはバージョン10.7.0までPCKeyboardHackという名前でした。必需品！
62. Mac miniなどでWindows用キーボードを使うのを便利にするツールその2
しかしまだ「Windows」が「左 Command」に、「左 Alt」が「左 Option」になっていて気持ち悪いので、この2つのキーを入れ替えます。必需品！
のびーの食っちゃね〜だらだらな日々。食っちゃ寝生活してても意外と平気だったりする。 : KeyRemap4MacBook と PCKeyboardHack で MacBook Air のキーボード入力をより快適に！(ﾟ∀ﾟ) via kwout
仕事効率化
63. Office Online
言わずと知れたMicrosoft OfficeのWebアプリ版です。レイアウトがほとんど崩れないのが良いのですが、細かい表の編集などはできず、「それはデスクトップ版を使ってね」という感じです。
64. Macのメニューバーの右側に表示されるアイコンを階層化するツール
ツールが増えてくるとメニューバーの右側のアイコンが左側のアプリケーションメニューとぶつかってしまい、表示されないものが出てきます。このツールを使うと右側のアイコンを階層化できるので、メニューバーがスッキリします。
65. Macに最初から入っている「テキストエディット」をプレーンテキストモードにする
デフォルトではテキストエディットは書式を設定できたり画像を貼り込めたりと高機能なのですが、ちょっとしたテキストファイルを作りたいときやドットファイルをちょっと開きたいときなどに使いたいものです。そこで、このTipsです。地味に便利です。Windowsのメモ帳、という感じでしょうか。
66. Mac用のポータブルアプリのリスト
Windowsではさんざんお世話になったPortableアプリ。最近の私はUSBメモリよりDropboxに入れることにしています。職場のマシンがMacで、家のマシンとツールを共用したいときなどは、これらのアプリをDropboxに入れておくといいかもしれません。
67. Windows から Mac へ完全移行。Mac を便利にするアプリや設定 17項目
まとまってます。著者は横浜のコワーキングの店主さんです。
68. ディスク利用率をグラフィカルに表示するツール
MacBook Airとか使っているとすぐに容量がいっぱいになってしまって、不要なファイルを消さなければならないのですが、このツールを使うとどのフォルダがどれくらい容量を取っているかわかって、大変便利です。最近名前が変わったのかな？「Folder Stat」と表示されています。
69. ファイルを暗号化するツール
暗号化したファイルは流出しても個人情報保護法には引っかからないそうです。顧客情報を持ち歩く場合は必需品ですよね。実は私の友人が作っています。
70. キーを数回押すだけで検索したりアプリケーションを立ち上げたりできるツール
使い込んでいる人はほとんどのオペレーションをこれでやっているようです。私はキーバインドを覚えるのが苦手なのでGUIに走ってしまいますが・・・OS X YosemiteではSpotlightがこれに近くなるみたいですね。
71. ローカルの1ファイルでWikiを作ることができるツール
友人が教えてくれました。sqliteみたいに1ファイルでマイWikiを作ることができます。Dropboxに置いておけばどこからでも編集可能。
TiddlyWikiのススメ - (HSJ.jp) ver.20050714 based on 1.2.28
72. ゴミ箱の削除できないファイルを強制的に削除するツール
Macを使い始めて一番困ってる事が「一部の項目へのアクセス権がないため、操作は完了できません。」と削除できないファイルがあり、ゴミ箱を空に出来ない事でした。その不満を解消してくれるソフト「Trash It!」を使えば強制的に削除する事ができます。
73. Evernoteと同期するアウトラインメモアプリ
74. 自分の気になるキーワードを登録すると、そのキーワードを含んだ勉強会が対応サイトで告知された時メールでお知らせするサービス
75. Macからアプリケーションをきれいに削除するツール
アプリケーションフォルダ以外にも点在しているファイルを探し出していっしょに削除してくれるツールです。鉄板ですね。
ブログ執筆
76. 画像付きリンクを作るブックマークレット
文字だけのリンクってあんまりそそりませんよねｗ あるページへのリンクを貼るとき、そのページにある画像をクリップして付けることができます。このページは全部これで作ってます。
77. 3Dグラフを作れるWebサービス
グラフを他の人と共有するのに便利かもしれません。
3d Grapher | Demo Studio | MDN
78. キュートな円グラフ簡単作成Webサービス
自分のブログ記事を書くときに、使いどころがいつかありそうな気がします。
79. Safari版のCreate Link（機能拡張）
一時期Safariに乗り換えようと思って探した機能です。見ているページへのリンクをクリップボードに入れてくれます。
80. iPhoneでWebページ全体をキャプチャーするアプリ
モバイルサイトのスクリーンショットを上から一番下まで撮ってくれます。ブログでモバイルサイトの紹介をするときなどに使いそうです。
81. 写真に文字を書き込んだりモザイクを書けたりできるiOSアプリ
「iPhone版Skitch」と言った方がわかりやすいかもしれませんね。iPadで雑誌を読んでいて気になる記事があったときに、その部分を枠で囲っておいて後から見たときにわかりやすくする、というような使い方ができます。
その他便利ツール
82. Windowsだけど、マウスホイールの方向を逆にするツール
これはMacのマウスホイールの方向が身体に染みついてしまっているもので・・・
WheelReverseのダウンロード : Vector ソフトを探す！
83. Mac上の音声を録音するツール
Macのサウンドの出力と入力を奪うことで、本来Macのスピーカから出力される音を録音したりすることができます。Skypeの会話を録音したいときに使っています。実況動画を作るのに使います。
84. Send to Kindleブックマークレット
長いページは、目にやさしいKindleで読みましょう。ちなみに文書がたまってくると、けっこううざくなるので、Kindle PaperWhiteを初期化してしまうのがオススメです。
85. ツイートを内容に応じて円グラフにしてくれるWebサービス
自分に対してしか分析できませんが、おもしろいです。
ツイートプロファイリング via kwout
86. 英文チェッカー「Ginger」、学習不要でネイティブ級のフレーズが書けるWebサービス
「come on at the day before yesterday」と入れたら「atじゃなくてinだ」と指摘されました・・・
87. MacでLZH形式の圧縮ファイルを解凍するのに使えるWebサービス
MacだとデフォルトではLZH形式の圧縮ファイルを解凍することができません。で、普通は解凍ソフトをインストールすることになるのですが、このWebサービスを使うとLZH形式の圧縮ファイルをZIP形式に変換してくれます。
88. Safari版はてなブックマーク（機能拡張）
これはSafariに乗り換えようとしたときに探しました。結局Chromeのマルチユーザ機能を使うことにしたのですが・・・
89. 簿記を知らなくても使える会計Webサービス
私も有料プランを使っています。損益計算書を生成してくれるのが便利です。
90. 多人数ビデオチャットを無料で
Skypeだと複数人数ビデオチャットは有料なんですよね。そこでこのアプリケーションの出番です。無料です。
91. 5分間リラックスするための模様映像ソフト
画面に表示される模様の動きに応じて呼吸をしていると、だんだん呼吸の間隔が大きくなっていって、気持ちが落ち着くというツール。
92. Dropbox・Googleドライブ・Mac内などを高速検索するアプリ
むかし作ったファイルはどこに保存したっけ・・・などというときに使えそうなアプリ。EvernoteやGmailなども検索してくれるようです。
93. 豊富な素材で漫画のような物語を簡単に作成できるサービス
趣味
94. 4つの国立博物館が所蔵する国宝・重要文化財の画像と解説を見ることができるWebページ、スマホアプリ
「このサイトでは、国立文化財機構の4つの国立博物館 （東京国立博物館、京都国立博物館、 奈良国立博物館、九州国立博物館）が 所蔵する国宝・重要文化財の高精細画像を、多言語（日本語、英語、フランス語、中国語、韓国語）による解説とともに ご覧いただくことができます。」
iOS、Androidアプリもあります。
95. ルートナビHTML5アプリ
初めて「便利なHTML5アプリだな」と思ったのが、これ。サイクリングや道案内のルートを簡単に描いて公開できる。JSアプリケーションなのでiPadで手軽にルートを作成できる。PCいらん。ポストPC時代の先駆けかも。
96. iTunesのカバーアートの付いていない曲にカバーアートを検索してきて付けてくれるツール
カバーアートが付いていないと、とても残念な感じになりますよね。そんなときは、このツール。自己満足にひたれますｗ。
97. 自分で作った曲を録音しておけるWebサービス
要するにFlickrの音楽版です。自分の曲をアップロードし、公開することができます。
98. Forkが出来るレシピサイト
関係ないですがクックパッドの有料会員になると人気の高いレシピを探すことができます。そういうレシピは、凝った料理ではなく、ほとんど手間がかからない簡単料理だけどおいしい、というものが多いです。そして、そういうレシピにはたくさんの「つくレポ」つまり「自分はこんなアレンジをしたよ」というのが付きます。これもForkのしくみとよく似ていますよね。
99. Macで古いArduinoを使うときに必要になるドライバ
MacBookにはCOMポートがないので、COMポートをUSBに変換するケーブルのドライバをここからダウンロードする
100. 複数の写真から全天の写真を合成するサービス
これは技術的にすごいな、と感じさせるサービスです。でもビューアはTHETAみたいにHTML5ではないんですよね。
