ブログやサイトを運営していると「ここをこういう風に動的に動かしたいのにどうやってコードを書いたらいいのかがわからない」、「こんな画像編集がしたいんだけどどうやったらいいのかわからない」と言った問題や疑問がたくさん出てくると思います。
で基本はググる。
そうすると過去の先人たちの知恵がたくさん出てきます。特にはてなブログのカスタマイズにおいてはみなさんかなりの試行錯誤した結果をUPいただいているので、自分が求めていた答えがたくさん出てきます。
そしてコピペ、またコピペ…とどんどんサイトのカスタマイズがいい感じにコピペされていきます。そしてコピペばかりしていくと、ちょっと気に入らないところとか出てきて直そうと頑張るのですが、そううまくはいきません。
で、調べてみるのですが、どうすればいいのかわからない、そもそもコードの１つ１つの意味がわからないそう言った状況になると思います。
だからと言って本を買って、「よし、一から頑張ろう」と奮い立たせても三日坊主。
かくいう僕もそんな一人です。
本を買っても長続きしないし、やる気も出ない、何かやる気を出させてくれるような学習ツールはないのだろうか？と探していた時に出会ったのがオンラインで全てが完結するプログラミング学習WEBサービス「TechAcademy」でした。
「どうせそんな学習サービスに申し込んだところで習得することなんてできないんでしょ？」とか言われそうだが、javascript、jQuery初心者でも安心して学ぶことができたました。まだ学習途中ですが、一応成果物（笑）も後で書かせていただこうと思うので、参考にしていただければと思います。
今回はこのTechAcademyで「Photoshop トレーニング」と「フロントエンドコース」を２つを申し込んで学習したのでその体験談を交えつつ、TechAcademyを紹介していきたいと思います。
実際にはてなブログ用の関連記事挿入コードも作成できたので、そちらは後で紹介しますね！
オンラインのサポートがしっかりしていてめちゃくちゃおすすめですよ！
そもそも「TechAcademy」とは
「TechAcademy」とは、プログラミングやアプリ開発などを学校に物理的に通うことなく、全てインターネット上で学ぶことができるオンラインプログラミングスクールです。
Webcampなど他のプログラミングスクールは実際に学校に通う事が必須ですが、TechAcademyでは全てをオンラインで完結させて学習する事ができます。
一人で自宅で孤独に勉強するだけだとなかなか続かないのでは？と思ってしまうと思いますが、その問題を解消するためにメンター制度が設けられています。
メンター制度とは？
各コースを受講すると、「メンター」と呼ばれる各分野の現役スペシャリストエンジニアがサポーターとしてついてくれます。
ビデオ通話による、週２回のマンツーマンメンタリングによって、受講者が目的の成果物を作ることができるように全力でサポートしてくれるので安心して学ぶことができます。
素朴な疑問にも親切丁寧に答えてくれるのでメンタリング時にはガンガン質問して理解を深めていきましょう。
※トレーニングと呼ばれる一週間完結型のコースにはメンター制度はありませんが、チャットで手厚くサポートしてくれるため問題ありません。よりチャットで簡単に意思疎通が図れるように、PC画面のスクリーンショットやコードの添付ができるようなシステムでしっかりとチャットで問題を解決することができるようになっています。
TechAcademyのオススメポイント
意味を理解しながら学習できる
調べ物をして、うまく動いた、修正できたけど意味がわからない。そんなことはよくあると思います。TechAcademyの講座を受講すればその「意味がわからない」という点をチャットサポートとメンター制度ですっきりと 解決しながら進めることができます。
意味がわからないから放置する→やりたくなくなるという負のループから抜け出すことができ、体に技術が染み付いていくようになります。
短期集中で一気に技術を習得できる
長い期間のプログラムもありますが基本的には7日間〜一ヶ月の短期集中型のプログラムです。
その短い期間という中で集中的に勉強することになるので、だらだらと間延びせずにギュッと学習することができます。
チャット、メンター制度でやる気アップ!!
講義資料は全て見られるようになっているので、「後からやればいいや」ってなりそうですが、見られるのは講義資料だけでアドバイザーに質問ができなくなってしまいます。
その点を踏まえて一気に集中して進めてわからないところはチャットやメンタリングで質問して一気にモヤモヤを解決して進めていきましょう。
やる気が出ない時に、「やる気が出ないんですよ〜」と雑談形式で話すのもありっぽいです。笑
自宅で学習しているとモチベーションの低下もかなり考えられるので、それを助けてくれるのがチャットとメンタリングと考えるといいでしょう。
※ちなみにチャットで質問した履歴は期間終了後も見ることができます。
▼ お申し込みはこちらから ▼
Photoshopトレーニング体験談
実はPhotoshopをかれこれ半年くらい使っているんですが、画像を切り抜いたりモザイクをかけたり、保存形式を変換する程度でまるでPhotoshopの機能を使っていませんでした。笑
さすがにこれは宝の持ち腐れと思い、Photoshopトレーニングも同時に受講することにしたのであります。
こちらはトレーニング形式ということで、7日間という短期間でPhotoshopの基本的な機能を体系的に学習することができます。
この７日間という点が結構みそで、PhotoShopを持っていない方は無料で7日間体験できるので、その無料体験期間を利用して学習することも可能です。
Photoshopを持っていなくてもこれを機に一度無料体験して学習してみるのもいいかと思います。
視覚的に理解しながら学習できる
Photoshopのメニューはかなりたくさんあるので、初めての人が利用しようとすると何から触ったらいいのか全くわからなくなります。
で、フォトショでやりたいことそのままググると出てはくるんですが、その説明文の意味をまた調べるなどして非常に面倒臭い状況になります。でその後自分で何をやってここまで作れたのかが訳がわからなくなります。笑
このトレーニングでは、そういったメニューバーの説明や各ツールの名称、使い方まで丁寧に教えてくれるので、すごくわかりやすく、意味を理解しながら使い方をマスターしていくことができるのでとてもいいです。特にこのように画像を用いて視覚的に説明してくれるのは大変ありがたいです。
実践形式なので経験的に身につけることができて実用的
トレーニングは実際に用意してくれているpsdファイルを使用して、画像に編集を加えていきながら実践的に進めていくことになります。
講義文を見るだけではなく、実際に画像に手を加えていくことになるので、体で使い方を覚えることができるので習得効率が高いと思います。
課題を提出で技術を定着
トレーニングで学んだ画像編集方法を駆使して与えられた課題に取り組み、技術の定着を図ります。
これが実際に僕が直した画像ですが、どうですか、天才的でしょう？笑
教えてもらった技法+αを自分で考えて直していくので、本当に身につくのが早いです。
これならあんなところやこんなところにある女の方の写真も綺麗にできちゃいますね。（あそこのパネルはこういう仕組みだったのね、今まで騙されていたよw）
このような顔画像の修正以外にも食べ物を美味しく見せる手法など、様々な技法を学べるので本当に役に立ちます。
わからないところはチャットでガンガン聞こう
わからないところがあったらチャット機能を利用してアドバイザーの方にガンガン質問しましょう。PCのキャプチャ画像を使用しながらやりとりができるので、すごくわかりやすいです。
特に講義を見ているだけだと「この言葉の意味なんなんだろう？」、「なんでこんな風にするんだろう？」といった疑問がたくさん出てくると思います。
そのような素朴な疑問も直接アドバイザーの方にぶつけて見るといいでしょう。どんな質問でも親切丁寧に教えてくれるので、本当に助かります。
Photoshopトレーニングコースまとめ
・体系的に身に付けられるので意味までをしっかり理解して学習できる
・実践的に身につけることができるので、学習効率が高い
・チャットで気軽にどんなことでも聞けるので初心者でも安心
僕の場合、「こういった画像をこうやって修正したい！」ってなった時にググって調べていましたが、結局その通りにやってなんとか修正するもののPhotoshopの技術としては自分に定着せず、同じ調べ物をなん度も繰り返すということが多々ありました。
このトレーニングを受ければ体に技術が染み付くので、素晴らしいと思います。
また、チャットで気軽に有識者の方に聞けるというのも、「調べるのめんどくさい、やーめた」となる気持ちを無くしてくれるので、受講者にはありがたいです。
1週間完結型という短い期間で学習できるので、Photoshopを始めたいという方には本当にオススメの講座です。
▼ お申し込みはこちらから ▼
フロントエンドコース体験談
フロントエンドというのはWEBページを実際に書くHTMLやCSS、JavaScriptなどのことを指します。WEBサーバやデータベースなどはバックエンドというカテゴリで切り分けられています。
やはりブログを運営しているので、というか今回はJavaScript, JQueryを本格的に学びたいと思ったので、このコースを選択しました。
申し込むとこのようにマイページにカリキュラムが反映され、これを順番に学んでいくこととなります。学習し終えるとこのようにレ点がつくのですが、あまりにもJavaScriptから学びたいという意欲に駆られてHTML/CSSの学習を飛ばしまいました。笑
メンターの方とやりとりした際にも、「実際にブログやサイトを運営している方がここだけを要点的に学習したいという理由でスポットで学習している人もいる」ということなので、自分が身に付けたいところだけを選択して集中的に学習することもできます。
メンターとのメンタリング風景
実際のメンターとのメンタリング風景がこちらになります。
恥ずかしいのでモザイクをかけてありますが、このようにビデオ通話で1対1で相談することができます。
こちらも恥ずかしいのでモザイクをかけましたが、こんな感じで画面を共有して具体的にどこをどうしたいのかを話すことができるので、深いところまで学習することが可能です。
用意してくれているツールを使えば、メンター側がこちらのコードを操作することも可能なので、めちゃくちゃ分かりやすくやりとりすることができます。
具体的にコードを直してもらうことで、効率よく理解することができます。
チャットでの質問も丁寧に教えてくれる
今回は関連記事の表示をJavaScriptで動的に行いたいということで、コードを自分で作成し、レビューをしてもらうためにチャットを利用しました。実際に書いたコードを見てもらって、書き方が変ではないか、その確認をしてもらいました。
最終的にとてもスッキリしたコードに直してもらい、なぜそのように書き換えることができるのかも具体的に教えてもらうことができ、大変満足しました。
実際に僕が作ったはてなブログ用関連記事自動挿入コード
【タイトル：関連記事自動表示プログラム】
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script> <script> addEventListener("DOMContentLoaded", function() { if ($('.category-カテゴリ名１').length) { var html = '<p>カテゴリ名１の関連記事</p>' + '<div>' + '<ul>' + '<li><a href="リンク先URL">リンク先タイトル</a></li>' + '<li><a href="リンク先URL">リンク先タイトル</a></li>' + '<li><a href="リンク先URL">リンク先タイトル</a></li>' + '</ul>' + '</div>'; $(".entry-footer").prepend(html); } else if($('.category-カテゴリ名２').length) { var html = '<p>カテゴリ名２の関連記事</p>' + '<div>' + '<ul>' + '<li><a href="リンク先URL">リンク先タイトル</a></li>' + '<li><a href="リンク先URL">リンク先タイトル</a></li>' + '<li><a href="リンク先URL">リンク先タイトル</a></li>' + '</ul>' + '</div>'; $(".entry-footer").prepend(html); } }, false); </script>
コード内のカテゴリ名に自分のカテゴリを入れて関連記事を設定しておけば、記事を表示した時にそのカテゴリ名に関連する記事を３つ自動で記事下に挿入されるようになっています。
条件分岐（else if）をもっと増やして自分のブログのすべてのカテゴリ別にリンク先を書いておけば、カテゴリの記事別に 関連記事を表示させることができます。
どうですか？超絶便利そうでしょう？笑
見よう見まねで実際に動くコードは自身の力で作ることができましたが、より綺麗に整理して書くとこんな感じ！ということでアドバイスをいただいて修正した結果がこちらになります。コードを綺麗に書くって本当に難しい。笑
【もし利用する場合】
カテゴリ名１、カテゴリ名２、リンク先URL、リンク先タイトルを自分のブログ用に置き換えてください
他のところでJQueryを読み込んでいる方は
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
は必要ないです。
記事下にドギャンとこれを入れてもらえば動くはずです。
CSSは気が向いたら追記しようと思います。笑
実はシロマティ (id:shiromatakumi) さんのこちらの記事を参考にさせていただいて、関連記事を表示しているのですが、
display:noneで見えなくしているだけなのはSEO的にどうなんだろう？と勝手に思って、カテゴリ別に合った記事だけをhtml内に入れておいた方がいいのではないか？と思ってこのコードを書こうと思い立ちました。
このコードを作成して「よっしゃ！！」ってなった後に、TechAcademyの方にこの疑問を直接ぶつけて見たところ、
「どうでしょうか、断言はできないですがそこまでは大差がない気がしますね。」
…
ということなのでご使用はご自由にどうぞ。笑
まだ受講期間もしばらくあるので、これからも色々教えてもらいながらちょこちょこコードを書いていきたいと思います。
フロントエンドコースまとめ
・体系的に学ぶのか、自分の学習したいところを集中的に学ぶのか自由に選択しながら学ぶことができる
・メンタリングやチャットなど、親身になって丁寧に教えてくれるので、早くかつしっかりと学習することができる
フロントエンドコースでは、HTML,CSS,JavaScriptなどのコードの学習からWeb APIや外部ライブラリまで幅広く学習することができます。もちろんそれらを全て網羅して体系的に学習した方はそののように学習できますし、ある一部分を特化して学習したい！という方一点集中型で学習できます。
その人にあった学習の仕方で効率的に技術を習得できるので素晴らしいと思いました。
また、全てがオンラインで完結してしまうとやる気がなくなってしまうこともしばしば。わからない点が多くなると「もういや！」と言ってやる気を無くしてしまい投げ出してしまいますよね。
その点はマンツーマン動画通話によるメンタリングと丁寧親切なチャット機能でわからない点はすぐに相談でき、その場で解決できてしまうので、ガンガン進めることができる点が学習意欲を上げているなと感じました。
▼ お申し込みはこちらから ▼
あとがき
今回はPhotoshopコースとフロントエンドコースの２つを受講しましたが、どれも満足のいく内容でした。
やっぱり一人で調べ物をしながら学習するのはかなりのモチベーションが必要で、その点をTechAcademyのサービスがしっかりサポートしてくれているなと感じました。
フロントエンドコースに関してはまだまだ受講期間があるのでその間にたくさん質問しながら独自の機能を作っていけたらと思っています。
ちょっとプログラミングやって見たいけど、難しそうだし途中で断念しそう…といった方には一度受けて見ることを強くお勧めします。
というのも受講開始から10日間以内であれば、満足いただけない場合は全額返金保証の制度があるからです。（期間延長のメンターサポートおよびトレーニングは除く）
とにかくまずは挑戦して見ることから始めて見てはいかがでしょうか？
▼ お申し込みはこちらから ▼
コメント