お世話になります。えびすい@ALPHAです。
なぜ、このタイトルでツール紹介をしようと思ったか。
ある、年若い呑み友達が青年海外協力隊員として、開発途上国に赴任することになりました。
その彼から、赴任前の集合研修の一環として、どこかしら調子の悪くなったPCをあてがわれ、そのPCのどの部分が故障しているか診断しリカバリーする、ということをやってるんです、という話を聞いたからです。
日本だとじゃあもう新しいPC買っちゃえよとなるところを、近くで売っていない、Amazonでの配達も期待できない、予算とるのも一苦労、という環境なんですね。
その彼もIT技術者なので、非常に差し出がましいですが、
ついでに、その国で、もし、キラキラした目でパソコンを見つめる子どもがいたのならこのツール一式教えてあげて、サイト作ったり、プログラム組んだりする楽しさを伝えてほしい、と思った。
そのための、2016年3月版・スタートキット、一式まとめてみます。
ちょっと長いので、興味のある方はとりあえずブックマークとかしといたほうがいいかもです。
前提条件として、こちらを意識しました。
- Windows/Mac(OS X)どちらでもOK
- 多言語対応（最低限英語版あり）
- Open source もしくはfree
- 機能や性能が限定され、解除が有料のソフトではない
- できればインストールできるソフト
Web制作作業のこちらの工程ができるツールをセレクトしました。
- コードを書く
- 画像を加工する
- プレビューと修正＆デバッグ
- ファイルのアップロード
- 自学自習する
1.コードを書く（テキストエディタ）：Atom
Atom: A hackable text editor for the 21st Century
アトムは、Googleが開発元のテキストエディターです。Windows/Mac(OS X)どちらでもOK。そしてオープンソースです。
上の画像は、Macでサイトを開いたので、自動判定されてMac用の画面が表示されています。
環境設定で、画面表示の「テーマ」と、作業したいことに応じて自分に最適な「パッケージ」を必要に応じてダウンロードし、設定することができます。ここで、言語設定（画面表示を英語や日本語やetcに設定）したり、開発するプログラミング言語に応じてサポートツールを設定したりできます。
画面右側が、環境設定で、パッケージの選択画面を開いたところです。
このスクリーンショットは、表示が３分割されていますが、好みで変更可能です。
たいていのプログラミング言語は初期設定で、キータイプを補ってくれる入力補完と、画面表示時のキーワードの色分けが設定済みです。
2.画像の加工：GIMP
GIMP: GNU IMAGE MANIPULATION PROGRAM
ギンプは、オープンソースで無料の画像加工ソフトです。Windows/Mac(OS X)どちらでもOKです。祝20年とあるので、Adobeの画像加工ソフト、Photoshopと数年しか違わない、古くからあるソフトです。
Web制作時などに画像加工でよく利用する機能は、画像サイズの変更やファイルの圧縮、明るさやコントラストを調整したり、ぼかしなどのフィルタを入れたり、ですが、問題なく処理できます。
また、画像加工ソフト全般に言えることですが、Photoshopとツールの内容やファイルメニューの順番や内容がだいたい同じです。
難を言えば、日本語の文字を画像にのせて加工するのが使いづらいことぐらいでしょうか。
画像加工ソフトでもう１つ、紹介したいものがあります。
ダウンロード型のソフトという前提条件をつけているので、それに反していますが、ブラウザで利用出来る画像加工ソフト（Webアプリケーション）です。
PIXLR EDITOR:Work in layers, replace color, transform objects, and more - all from your browser.
ピクスラーエディター（と発音するのでしょうか？）は、AUTODESKという、古くからCADソフトを出している会社から提供されている無料の画像加工WEBアプリケーションです。
リンクは、EDITORの方に直接つなげています。（ちなみに上の画像の右「EXPRESS」は画像補正のWEBアプリケーションです。）
通信環境が問題無いなら、こちらが断然使い良いです。
メニューがきちんと日本語化されています。なのでおそらく、ローカライズされている言語があるとすれば、その言語表示もきちんとされていると思われます。
メニューやツールの配置なども、Photoshopに近いです。文字をのせての加工も、直感的でわかりやすいです。
Desktop版がWin/Mac共あるのですが、サブスクリプション型の有料です。ただ、Photoshop購入するよりかなり安いです。
3.プレビューと修正：Google Chrome Developer tools
Google Chrome: Developer tools
グーグルクロームです。言わずと知れた、Googleが出しているWebブラウザソフトです。
Windows/Mac(OS X)どちらでもOKで、無料です。
もし、Internet ExplorerやEdgeを使っていたらこちらに乗り換えたほうがいいです。世界では、Chromeのシェアは５割以上です。
そして、エディターでHTMLを書いて、画像を配置したら、Chromeで開いてみてください。
開いたら、「F12」を押すか、右上の三本線のボタンをを押して、「その他のツール」→「デベロッパーツール」をクリックしてください。
これが、デベロッパーツールの画面です。
このツールで、表示がおかしく無いか、スマホでも大丈夫か、適切にコーディングできているかどうか、確認できます。エラーが出ていれば、教えてくれます。ローカルのファイルであれば、ここから直接編集可能です。
4.ファイルのアップロード：FileZilla
FileZilla: the free FTP solution.
ファイルジラは、オープンソースでフリーのFTPソフトです。
Windows/Mac(OS X)どちらでもOKで、無料です。
Webサイトの表示を確認してOKだったら、サーバーにアップロードします。
FTPソフトとは、ファイルをサーバーにアップロードするソフトのことです。
サーバーへの接続情報を設定した後、接続すると、こんな感じで表示されます。
左がローカル（作業しているPC）、右側がリモート（ファイルをアップロードするサーバー）です。
5.自学自習する：オンライン教材＆困った時
UDACITY Be in demand.
Get a new job or advance your career with courses built by industry leaders like Google, Amazon and Facebook.
最後に、どうやって学んでいくか、です。
ウダシティは、GoogleやAmazonやFacebookで活躍するような人材を育成する教材を提供します、といっています。なのでメインはIT分野の教材です。
無料のメニューでもかなりの数と種類の教材が動画で用意されていて、簡単にダウンロードすることもできます。
動画は、字幕がつけられているので、字幕表示にすればヒアリングが苦手であってもなんとかついていくことができると思います。
画面はこんな感じです。
そしてもう一つは、行き詰まった時どうするか。
stack overflow Stack Overflow is a community of 4.7 million programmers, just like you, helping each other.
スタックオーバーフローは、プログラミング方面のヤフー知恵袋です。
様々なプログラミング言語や、IT方面の技術分野ごとに、利用者がタグをつけて質問します。
早いものだと数秒で回答を得られたりします。
たとえば、これはjavascriptのタグが付いたものですが、今までの質問数が1,067,192件です。
こういうサイトで、疑問を解決することができます。
これ一式あれば、開発途上国の彼/彼女もなんとか最初の一歩をふみだせると思います。
あとは、定期的に何時間かパソコンを使える環境と、多少の通信環境があればいいのですが。
これ一式、USBに入れておくというのもいいかもしれません。
最後に。リンクをまとめておきます。
