TechAcademy（テックアカデミー） Webデザインコース Webデザイン Photoshop Photoshopでガイドを数値指定して表示する方法を現役エンジニアが解説【初心者向け】
オーダーメイドコース
icon
icon
Photoshop

Photoshopでガイドを数値指定して表示する方法を現役エンジニアが解説【初心者向け】

初心者向けにPhotoshopでガイドを数値指定して表示する方法について解説しています。ガイドを使用することで文字や画像を適切な位置に配置することができます。ガイドの作成方法、数値を指定した操作方法を学びましょう。

テックアカデミーマガジンは受講者数No.1のプログラミングスクール「テックアカデミー」が運営。初心者向けにプロが解説した記事を公開中。現役エンジニアの方はこちらをご覧ください。 ※ アンケートモニター提供元：GMOリサーチ株式会社　調査期間：2021年8月12日～8月16日　 調査対象：2020年8月以降にプログラミングスクールを受講した18～80歳の男女1,000名　 調査手法：インターネット調査

Photoshopでガイドを数値指定して表示する方法について、TechAcademyのメンター（現役エンジニア）が初心者向けに解説します。

なお本記事は、TechAcademyのオンラインブートキャンプPhotoshop講座のカリキュラムをもとに執筆しています。

 

田島悠介

今回は、Photoshopに関する内容だね！

大石ゆかり

どういう内容でしょうか？

田島悠介

ガイドを数値指定して表示する方法について詳しく説明していくね！

大石ゆかり

お願いします！

目次

 

ガイドとは

ガイドは実際の画像には反映されない目印用の線で、文字やオブジェクトをきれいに配置したいときなどに役に立ちます。

 

[PR] Webデザインで副業する方法とは

基本的なガイドの表示方法

ウィンドウ内に表示されている定規をドラッグするとウィンドウ内に水色の線が作成されます。

定規が表示されていない場合メニュー「表示」ー「定規」をクリックすると、ウィンドウ内に表示されます。

ガイドを削除したい場合メニュー「表示」ー「ガイドを消去」をクリックすると、作成された全てのガイドが消去されます。

ガイドを非表示にしたい場合メニュー「表示」ー「表示・非表示」ー「ガイド」をクリックすると、ガイドの表示と非表示を切り替えることができます。

 

数値指定してガイドを表示する方法

メニュー「表示」ー「新規ガイド…」をクリックします。

ダイヤローグボックスで、作成したいガイドの方向と位置を設定します。方向：「水平方向」を選択すると横の線が、「垂直方向」を選択すると縦の線が追加されます。位置：水平方向の場合は画像の一番上、垂直方向の場合は画像の一番左からの距離になります。

 

まとめ

ガイドを使用すると、テキストや画像といった形や大きさの違うオブジェクトの位置も正確に合わることでき便利です。

 

監修してくれたメンター

メンターOM

Webデザインの勉強のためロサンゼルスに留学。その後、現地のWeb制作会社に就職し、Webデザイナーとしてのキャリアをスタート。

現在もロサンゼルスで働く傍ら、フリーランスのWebデザイナーとして、アメリカだけでなく日本からのWeb制作も請け負う。
また、画像のリタッチが得意なので、しばしばリタッチの依頼も請け負う。

 

大石ゆかり

内容分かりやすくて良かったです！

田島悠介

ゆかりちゃんも分からないことがあったら質問してね！

大石ゆかり

分かりました。ありがとうございます！

 

TechAcademyでは初心者でも1週間でフォトレタッチをマスターできるオンラインブートキャンプ Photoshop講座を開催しています。

現役デザイナーに毎日チャットで質問することができます。

記事を検索

関連するキーワード

関連する記事

初心者でも簡単！Photoshopで画像を合成する方法

初心者の方でもAdobe Photoshopの使い方がわかる記事です。 今回のテーマは「画像を合成（結合）する方法」です。 この方法を覚えると、画像...
Photoshop

Photoshopで写真の反射による映り込みを消す方法を現役エンジニアが解説【初心者向け】

Photoshopで写真の反射による映り込みを消す方法について、TechAcademyのメンター（現役エンジニア）が初心者向けに解説します。 なお本記事は...
Photoshop

初心者でもすぐにできる！Photoshopで円を描く方法

初心者の方でもPhotoshopの使い方がわかる記事です。 今回のテーマは「円を描く方法」です。 Photoshopの線で丸を書くこともできますが、...
Photoshop

意外と便利！Photoshopで顔写真にモザイクをかける方法

Webサイトに載せる写真などで、写っている人を認識させないなためにモザイクをかけることはないでしょうか？ Photoshopでは「フィルター」機能を使うこ...
Photoshop

Photoshopのバッチでファイルを一括で処理する方法【初心者向け】現役Webデザイナーが解説

Photoshopで同じような作業を繰り返すときに、もっと楽にできればいいのにと思ったことはないでしょうか？ そんな時に便利なのが「バッチ」の機能です。 ...
Photoshop

Photoshopで写真をミニチュア風に加工する方法【初心者向け】

Photoshopでは元の写真を加工して他の写真のようにすることができます。今回ご紹介するのはミニチュア風の加工です。 ミニチュア風にするために、「色調補...
Photoshop

あわせてよく読まれている記事

WordPressでアイキャッチ画像を設定する方法【初心者向け】

WordPressでは、記事1つ1つにサムネイル画像（アイキャッチ画像）を設定できます。 ブログの記事冒頭や記事一覧ページに配置されている、一番目を引く画像です。   テックアカデミーマガジンの場合は、このように表示されています。   アイキャッチ画像を設定すると、下記のメリットがあります。 記事の内容がひと目で分かる 記事一覧の画面でわかりやすい 記事のクリック率が上昇する SNSなどでシェアされた時に目立つ   そこで今回は、アイキャッチ画像の設定方法について簡単にご紹介します。 目次ガイドとは基本的なガイドの表示方法数値指定してガイドを表示する方法まとめ監修してくれたメンター   大石ゆかり 田島メンター！！記事一覧で見た時に記事ごとに画像が表示されていると思うんですけど、あれってどうやって表示するんですか〜？ 田島悠介 アイキャッチ画像のことだね。それなら記事ごとに設定するんだけど・・・ちょっとやってみようか。 大石ゆかり はい、お願いします！   Gutenberg（標準ブロックエディタ）でWordPressのアイキャッチ画像を設定する方法 WordPressバージョン5.0から、標準エディタがブロックエディタ（通称Gutenberg）に変更になっています。 ここでは、ブロックエディタでアイキャッチ画像を設定する方法をご説明します。   【Gutenberg】アイキャッチ画像の設定エリアを表示する Gutenbergでは、アイキャッチ画像は記事投稿画面でデフォルトで表示されています。 アイキャッチ画像の右側の∨マークをクリックすると、∧マークに切り替わり、「アイキャッチ画像の設定」ボタンが表示されます。     【Gutenberg】アイキャッチ画像を設定する 「アイキャッチ画像の設定」ボタンをクリックします。 上部の「ファイルのアップロード」タブをクリックすると、次のような画面が表示されます。   「ファイルの選択」ボタンをクリックして、設定したい画像を選択しアップロードしてください。 アップロードが完了したら、右下に表示される「アイキャッチ画像を設定」のボタンをクリックします。   投稿画面に、設定したアイキャッチ画像が反映されます。 これで設定は完了です。   設定する画像を間違えた場合には、「画像の置換」ボタンをクリックし、選択し直すことができます。 また、「アイキャッチ画像の削除」というテキストリンクをクリックして、設定の削除もできます。 設定は右上の「下書き保存」ボタンをクリックするまで保存されませんのでご注意ください。   旧エディタ（Classic Editor）でWordPressのアイキャッチ画像を設定する方法 WordPressは5.0から、標準のエディタがブロックエディタ（Gutenberg）になりました。 しかし旧バージョンから使用している方は、いままでの旧エディタ（Classic Editor）のほうが使い慣れている方も多いでしょう。 Classic Editorはプラグインとして追加することで、切り替えが可能です。 ここでは旧エディタ（Classic Editor）でアイキャッチ画像を設定する方法をご説明します。 アイキャッチ画像は記事投稿画面で設定できるのですが、デフォルトの記事投稿場面で表示されていない場合には、以下の手順で表示させてみましょう。   投稿編集画面で、右上に表示される「表示オプション▼」というボタンをクリックします。   すると、投稿画面で表示されるオプションリストが表示されます。 その中から「アイキャッチ画像」を探し、チェックボックスにチェックしましょう。   すると、投稿画面の右サイドに、「アイキャッチ画像」のエリアができます。 これでアイキャッチ画像追加の準備はできました。   【旧エディタ】アイキャッチ画像を設定する アイキャッチ画像設定エリアの、「アイキャッチ画像を設定」というテキストリンクをクリックします。 すると、画像追加画面が立ち上がるので、設定したい画像を選択しアップロードしてください。   アップロードが完了したら、右下に表示される「アイキャッチ画像を設定」のボタンをクリックします。   投稿画面に、設定したアイキャッチ画像が反映されます。 間違ってアップロードしてしまった場合は、「アイキャッチ画像を削除」というテキストリンクをクリックし、またやり直せば大丈夫です。   記事を公開し、どのように反映されているかを見てみましょう。 これでアイキャッチ画像の設定は完了です。   [PR] Webデザインで副業する方法とはWordPressのアイキャッチ画像が表示されないときの対処法とは 大石ゆかり 田島メンター！！アイキャッチ画像を設定したんですけど、表示されません…！ 田島悠介 原因はいくつかあるから順番に対処法みていこうか。 大石ゆかり お願いします！   ここではWordPressのアイキャッチ画像が表示されないときの対処法をご説明します。 前述した設定の通りアイキャッチ画像が保存されているのであれば、テーマの設定にアイキャッチ画像の機能を有効化する関数が設定されていない場合が考えられます。 オリジナルで作成したテーマなどを利用している場合などにも、functions.phpの設定の有無でアイキャッチ画像は表示されない場合があります。   functions.php /** * アイキャッチ画像の機能を有効化 */ add_theme_support( 'post-thumbnails' ); いままで表示されていたアイキャッチ画像が表示されなくなったような場合は、プラグインの競合が起きている場合がほとんどです。 このような場合は、有効化しているプラグインを順番に無効化していきます。 これにより、影響をおよぼしているプラグインを特定できます。 プラグインが特定できたら、しばらくそのプラグインを無効化して、次のバージョンアップなどで問題が修正されるのを待つのが方法の1つです。 または代替できるようなプラグインを探して、そちらに差し替えるなどの方法があります。 最後にもう一度各投稿記事を開いて、アイキャッチ画像が正しく設定できているかも確認してみましょう。   WordPressのアイキャッチ画像の最適なサイズとは アイキャッチ画像のサイズは、デフォルトでは「設定」の「メディア設定」の数値で決まります。   画像はWordPressにアップロードすると、この設定によりメディアライブラリにオリジナルサイズを加えて指定されたサイズで登録されます。 縦横比が上記の設定と違う場合は、以下のように横の長さを基準としてそれぞれの画像サイズで保存されます。 この例では、元の画像は横620pxで縦349pxの画像です。 この場合、メディア設定の大のサイズ指定よりも小さい画像なので、フルサイズはオリジナルのサイズ、中が横300pxを基準として縦横比で縮小したもの、サムネイルは横150pxを基準として中央で正方形にトリミングした画像です。 4番目の例は、「サムネイルを実寸法にトリミングする」のチェックマークをオフにした場合の画像です。 この場合は、サムネイルは同じ縦横比を保ったまま縮小されます。 固定または投稿ページに画像ブロックで配置した画像のサイズは、右側のプルダウンメニューから選択できます。 アイキャッチ画像はSNSのOGP画像としても使われることも多いので、最適なサイズは横1200px × 縦630pxとされています。 様々なSNSでの画像の表示を確認したい場合は、以下のサイトなどを利用すると便利です。 OGP画像シミュレータ   まとめ：アイキャッチ画像を設定して魅力的なサイトを作ろう 標準のブロックエディタ、旧エディタでのアイキャッチ画像の設定方法、アイキャッチ画像が表示されない場合の対処方法、最適なアイキャッチ画像のサイズと設定や確認方法をご紹介しました。 アイキャッチ画像はこのように記事の冒頭に表示されるので、テキストだけよりぐっと見た目が華やかになりましたね。 アイキャッチ画像を適切に設定して、より魅力的なサイトにしていきましょう。   他のカスタマイズ方法として、WordPressのウィジェット編集方法の記事もあります。   大石ゆかり アイキャッチ画像があると、記事のイメージがつかめていいですね♪ 田島悠介 そうだね。　アイキャッチ画像は一覧にすると特に印象に残りやすいから、必ず設定しておいたほうが良いね！ 大石ゆかり はい、分かりました！   WordPressを学習中の方へ これで解説は終了です、お疲れさまでした。 つまずかず「効率的に」学びたい 副業や転職後の「現場で使える」知識やスキルを身につけたい WordPressでのサイト制作を学習していて、このように思ったことはありませんか？ テックアカデミーのWordPressコースでは、第一線で活躍する「プロのエンジニア/Webデザイナー」が教えているので、効率的に実践的なスキルを完全オンラインでしっかり習得できます。 合格率10%の選考を通過した、選ばれたエンジニアの手厚いサポートを受けながら、WordPressを使ったオリジナルサイト構築を学べます。 まずは一度、一週間の無料体験で学習の悩みや今後のキャリアについて話してみて、「現役のプロから教わること」を実感してみてください。 時間がない方、深く知ってから体験してみたい方は、今スグ見られる説明動画から先に視聴することをおすすめします。  
WordPress

HTMLに挿入した背景画像を繰り返さない方法を現役デザイナーが解説【初心者向け】

HTMLに挿入した背景画像を繰り返さない方法について、テックアカデミーのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。   目次ガイドとは基本的なガイドの表示方法数値指定してガイドを表示する方法まとめ監修してくれたメンター   そもそもHTMLの記述方法がわからない場合は、 HTMLの書き方について解説した記事を読むとさらに理解が深まります。   田島悠介 今回は、HTMLに関する内容だね！ 大石ゆかり どういう内容でしょうか？ 田島悠介 挿入した背景画像を繰り返さない方法について詳しく説明していくね！ 大石ゆかり お願いします！   HTMLに背景画像を挿入できるbackground-imageとは？ CSSのbackground-imageを使うと、HTMLに背景画像を挿入できます。 背景画像を入れると、より表現豊かなWebサイトにすることができ、Webデザイナーを目指す初心者の方はぜひ習得したいCSSの1つです。 Webサイトの背景に画像を指定するときには「CSS background-image」を使います。 また、背景の指定方法にはいくつかの種類があります。 HTMLに挿入した背景画像を繰り返さないために、どのようなコードを書けばいいのか詳しく見ていきましょう。   背景画像のサイズと表示される幅の関係 背景画像は、表示させる要素の左上端をx, y座標の0, 0と位置付けて表示します。 最初の準備として、下記のサンプルコードを記述します。 このコードでは、赤枠の内側左上端がx, y座標の0, 0です。 HTML <header></header> CSS header { border: 5px solid #aaa; /* 要素の表示領域を枠として視覚化するための補助線を付けます。 */ height: 500px; /* 要素の内部が空なので、高さを固定します。 */ }   次に背景画像を絶対パスで読み込ませます。 CSS header {   border: 5px solid #aaa; /* 要素の表示領域を枠として視覚化するための補助線を付けます。 */   height: 500px; /* 要素の内部が空なので、高さを固定します。 */   background-image: url("https://assets.techacademy.jp/assets/mentor-about-3-47c6a0fa70343abebff1c25f81298efeabc8f2d9da7a595fb1d8cf9f50780694.jpg"); }   背景画像のサイズより、表示領域のサイズが大きい場合には、表示領域の余りの面積に繰り返しで背景画像が表示されます。 この現象となる理由は、標準的な初期値として、以下の設定が付与されるためです。 CSS background-repeat: repeat; /* 背景画像を繰り返し表示します。 */   background-repeat: repeat;　が初期値として設定されていると、画像が繰り返し表示されてしまい、思い通りのレイアウトにならない場合があります。 そんな時は下記の方法をお試しください。   [PR] Webデザインで副業する方法とは画像を繰り返さないためには 背景画像を繰り返し表示させたくない時は、下記のCSSを追加しましょう。 CSS background-repeat: no-repeat; /* 背景画像を繰り返し表示しません。 */ 初期値として、画像を繰り返し表示する設定になっているため、background-repeatの値をno-repeatに定義すると1回だけの表示にできます。   以下、背景で画像を繰り返さないための、全体のコード例です。 CSS header {   border: 5px solid
HTML

これからのエンジニアに必要なスキルとは【非エンジニアサミット・イベントレポート】

TechAcademyでは、2015年6月14日に『非エンジニアサミット「プログラミングをシゴトにする」』というイベントを開催しました。これからプログラミングの学習を始める方を対象に、第一線で活躍するエンジニアから直接話を聞けるイベントです。 第1回目となる今回は、株式会社クラウドワークスCTOの大場光一郎氏、株式会社Fablicの堀井雄太氏をゲストとしてお迎えしました。   本記事ではイベントレポートをお届けします。 これからプログラミングの学習を始める方は参考にしてみてください。   ゲスト 大場光一郎氏（株式会社クラウドワークス 執行役員CTO） 2001年、伊藤忠テクノソリューションズ株式会社へ入社。在職中、Rubyの導入支援やRubyを用いたクラウドサービスの開発・運用に従事。 グリー株式会社インフラストラクチャ部門にて、開発環境からプロダクションをつなぐDevOps周りを担当し、GitHub Enterpriseの導入による開発品質の向上や、デプロイメント支援システムをRubyで開発。 Rubyやソースコード管理に関する講演、著書多数。 2014年1月、株式会社クラウドワークスに参画、執行役員CTOに就任。   堀井雄太氏（株式会社Fablic チーフエンジニア）   「Fril(フリル)」を開発しているエンジニア。2007年、株式会社ECナビ （現：VOYAGE GROUP）に新卒入社。比較サイトの運営やディレクトリ検索サービス、広告配信システムの開発などを経験。2012年、株式会社Fablicを創業し女性 向けのフリマアプリ「Fril」を開発、インフラ、サーバーサイドの開発担当。       クラウドワークス大場氏講演 まずは、大場光一郎氏から講演いただきました。講演では、エンジニアになったきっかけ、社内の開発体制、これからエンジニアを目指す人に期待することをお話しいただきました。   エンジニアになったきっかけ 学研の教材に載っていたマンガがきっかけでBASICを使ってプログラムを書いてゲームを作りながら自分でやってみようと思ったのが、一番最初にプログラムを書くことのスタートだったとのこと。 その後は、ハードウェアを組み合わせた業務システムを開発している会社に入社。当時は「プログラムさえ書ければいい」と思って社会人をスタートしたそうです。その時のことを大場氏は「今から考えると当たり前ですが振り返るとコードを書けるだけで会社を選ぶのは良くない」とも語りました。 またその頃、働いていた会社とは別に、オープンソースを開発するプロジェクトに入り、そのプロジェクトの開発者との交流を通じて、組織の垣根を越えてプロジェクトを進めることを経験したそうです。そのため、大場氏の考え方の根本は「オープン」。実際仕事の中でもオープンソースのように仕事をしているのが特徴なんだそうです。   クラウドワークスでの開発体制 クラウドソーシングサービスのクラウドワークスの開発体制はどうなっているのでしょうか。 特徴は、UX改善会を開催してユーザー体験を大切にした開発を重視していること。「UX改善会」は、3、4人のチームを組んで、ユーザー視点でサービスを使い、サービスにおける課題を見つけ、改善案などをプレゼンテーションに落とし込んで全社員に発表するというもの。社員はもちろん、エンジニアインターンの学生から率直な意見を聞いて改善に役立てているといいます。 この取り組みにより、サービスを使い続けていると当たり前になって気づかないことを、改めてフレッシュな気持ちでサービスを見つめられ、実際にサービス落としこんで、日々改善ができているんだそうです。 開発分野の他に、クラウドワークスでは日報の書き方にも工夫があり、お互いがどんな仕事をしているか共有し合えるように、他の部署の人でもわかる言葉で伝えることを推奨しているそうです。   これからエンジニアを目指す人に期待すること 大場氏は「今は技術が折り重なってできているので、深堀りすればするほど深いし、技術の移り変わりも早いので、エンジニアとしては多層的に折り重なる技術を同時に理解できないといけない状況です。」とエンジニアとして必要なことを語りました。 そのような状況の中で、初心者としてプログラミングをはじめるのは、チュートリアルなどが充実しているため、比較的簡単で、初心者から中級者に上がるにはいろいろな技術をキャッチアップする必要がでてくるため、1人では限界があるとのこと。そのため大場氏は、勉強会を通して仲間を見つけることや、プログラミング学習のサービスの活用などを推奨しているそうです。 また、JavaもRubyも最初は「おもちゃ」と言われていた背景があり、「おもちゃ」と言われているような技術を使ってみることの大切なんだそうです。「イノベーションを起こすようなものは最初おもちゃのように思われがちですが、だからこそチャレンジすることが今後のエンジニアに必要なのではないか」と大場氏は締めくくりました。     [PR] Webデザインで副業する方法とはFablic堀井雄太氏講演 続いて、堀井雄太氏に講演いただきました。大場氏と同じく、エンジニアになったきっかけ、社内の開発体制、これからエンジニアを目指す人に期待することお話しいただきました。   エンジニアになったきっかけ もともとは経済学部出身で、大学でもプログラミングの授業で受けていたわけではない、いわゆる文系プログラマーだという堀井氏。それでも大学生のころから漠然とWebサービスを作ってみたいと思っていたそうです。 そこで大学生のうちにいろいろな会社でインターンをとして働いていたのがプログラミングを学ぶきっかけ。最初はHTML/CSSを使ってWebサイトを作るところからはじめ、本を読み込んでサービスを作ってみるなど独学で学んだとのことです。 その後、ECナビ（現在のVOYAGE GROUP）に新卒で入社し、自社プロダクトの開発と運用をして、後半の2年はインフラの部署に所属されていました。会社に所属することのメリットとしては、独学よりも体系的に学べる、先輩や同僚がいることで成長できるなどを挙げていました。 堀井氏が講演の中で話した、「エンジニアとしては遅咲きだが、遅いということはない。意志があれば、とりあえずやってみるのが大事」という言葉が印象的でした。   Frilの開発体制 株式会社Fablicは、2012年7月にフリマアプリのFril（フリル）をリリース。累計ダウンロード数が300万を越えているといいます。現在は、12、13人のメンバーで開発しているそうです。エンジニアはまだまだ増やしたいとのことで、募集も随時行っているとのこと。 開発体制として特徴的なことは、ユーザーと一緒に開発すること。実際にFrilを使っているユーザーをカスタマサポートとして採用しているそうです。開発の現場にユーザーがいて、「困ったことがあったらユーザーに聞く」が信条で、実際の開発フローにユーザーが関わるようにしているといいます。   これからエンジニアを目指す人に期待すること どんなエンジニアになるかを意識することが大事とのことです。 会社のフェーズによってエンジニアに求められることは違うので、技術の経験たくさんを積むことが大事。堀井氏自体も、サーバーサイドもインフラも関わってきましたが、今では全てが関係しているそうです。それぞれの領域を学んでいく中で、強みを形成していくのが良いとのことでした。 また、技術を学ぶだけでなく、行動して実践することも大事。チームで開発できる、社内で共有できる、社外にアウトプットできる、リーダーシップを発揮できるなど、技術をもとに行動することが今後のエンジニアに求められていると語っていました。 また、最後には「ものづくりは楽しいので、楽しみながら開発していくのが大事」というメッセージで堀井氏は締めくくりました。     パネルディスカッション「これからのエンジニアに必要なスキルとは」 続いて、大場氏、堀井氏によるパネルディスカッションです。モデレーターはTechAcademyを運営するキラメックス株式会社の代表取締役社長の村田がつとめました。   パネルディスカッションでは、事前に参加者から募集した質問をもとに回答いただきました。質問はこれからエンジニアになっていくことを想定して、下記のセクションに分けて進めています。 エンジニアになる前の段階 エンジニアとして働く段階 エンジニアとしてさらにスキルアップする段階     エンジニアになる前の段階 （村田）それではパネルディスカッションを始めていきます。非エンジニアの方のプログラミング学習が一歩前に進むきっかけになればいいなあと思っています。最後には会場のみなさんからの質問も受け付けます。   （村田）まず1つ目の質問ですが、「どのプログラム言語から勉強するべきか」という疑問にお答えいただこうと思います。これみなさん非常に悩ましい点だと思うのですが、このあたりお二人はどのようにお考えでいらっしゃいますか？   （堀井）最初はPHP、Perl、Rubyあたりから始めるといいのかなあと思っています。理由は、コミュニティが活発なので困ったらそういうコミュニティに相談して聞く環境があることですね。あとは、実際に企業に入ってみて使われていることも多いです。実際、私が新卒で入った会社も主要な言語がPHPであとPerlとRubyも少しあったので就職するときも有利だと感じています。   （村田）なるほど。大場さんはいかがでしょうか？エンジニア歴も長いと思いますが。   （大場）最初に触る言語としては僕はなんでもいいかなと思ってるんですけど、子供向けや教育向けと呼ばれる機能が制限された言語よりは汎用的な言語を使った方がいいかなと思っています。それがコンピュータが本来持っている能力を引き出せる可能性があるという理由です。なので、あんまり学びやすさとか初心者向けといった軸で選ぶよりは、なんでもできるような言語を選ぶのがいいのではないでしょうか。   （村田）では続いてプログラミングを勉強する段階になった際に「どこから着手すればいいか」という質問に入っていきたいと思います。具体的にあれば教えていただけますか？   （大場）さっき話したことと関係しているのですが、一つのサービスを成り立たさせるためにはいろんな技術の積み重ねがあって、一部分だけわかっててもサービスとしては成り立たないことがあります。だから、どこからというよりは「これが作りたい」とか「こんなサービスをやってみたい」といったところを目指して、それに足りないのはどこなのか、簡単そうなのはどこなのか、一番難しそうなのはどこなのか、そういう切り分けでちょっとずつ自分がどこにいるかわかるように進めるのがいいんじゃないかなと思います。 この言語を覚えたいといった学習の仕方だとモチベーションが続かないと思うんですよね。   （村田）それはありますよね。   （大場）コンピュータという分野も3ヶ月勉強した人や10年仕事で使ってますという人とか経験にいろいろあっても、その中で「マスターしました」って自分で言える人はあんまりいないと思うんですよね。すごい奥が深い世界なんで。だからこの言語をマスターするまでやろうとなると結構どこまでいっていいかわからない。なので、道具として何をやりたいかというところを目標にすると続きやすいんじゃないかなと思います。   （村田）目的ありきでその言語をツールとして使って、形にしていくところから足りない部分を補うのがいいんじゃないかということですよね。堀井さんはいかがでしょうか？   （堀井）大場さんも仰ったように一つを学べば終わりというものではないですね。プログラミングをするモチベーションを保たないと結局意味ないので、自分がこういうのがあったら便利だなというものをとりあえず手を動かしながら作るのがいいと思います。   （大場）さっきTechAcademyのオンラインブートキャンプの説明の中で、Twitterクローンを作るというお話しでしたが、あれってどこまでのクローンなんですかね？投稿するだけだと簡単だけどTwitterを真面目に作ると結構難しいと思うのですが。   （村田）Ruby on Railsチュートリアルに載ってるくらいのマイクロポストみたいなレベル感ですね。ユーザー登録ができてフォローして、その投稿がそれぞれタイムラインに一列に出てくるクローンです。   （大場）フォローもするということは、ある程度データベースの関係性もグラフみたいなところもやるんですね。そういう意味では歯ごたえのある感じですね。   （村田）そうですね。実際に世界中で使われているようなサービスに近い形で作る方がモチベーションが上がると思っています。全く使わなそうな図書館データベースを作るよりもTwitterクローン作る方がイメージがわきやすいし面白いなと感じてもらえるはずです。プログラミングを学習するときのモチベーション、特に一人で勉強する時間が長いので、自分がやる気になるようなところから始めるのがいいのかもしれませんね。   （村田）では次にいきましょう。「プログラミング習得をする上でつまずきやすいポイントとその解決方法」について聞いてみたいと思います。堀井さんいかがですか？   （堀井）つまずくところいっぱいありますね。特に、環境構築が一つのハードルになるかなと思ってます。弊社でもインターンに来てもらうことが多いのですが、プログラミングを書き始めるまでの開発体制を整えるところで時間がかかることがあります。 ただ、今はEC2とかHerokuとか、必要なパッケージがそろっている状態で始められるものもありますね。無料プランを使うか、少しお金を出せばサーバーが簡単に手に入るので、うまく使って最初のハードルを乗り越えてから本を一冊写経してみるといったことから始めるのがいいのかなと思ったりしますね。   （大場）個人的には難しいところって技術と技術の境目の部分かなと。 例えば、Rubyだとアプリケーション開発の知識がいるし、データベースにアクセスするときにSQLみたいな言語をわかってないといけないし、両方わかってないといけないようなシチュエーションがサービス開発の中でたくさんあります。両方の知識が求められるところでハードルがぐっと上がって、新しいことを覚えるのが難しいのかなと思いますね。 その解決方法としては繰り返すということですかね。繰り返していると、「これはこのことだったんだ」みたいに理解できることもあるので、反復するところがコツかなと思っています。   もう一つつまずきやすいところとしては、技術の中でそもそも難しいところです。C言語だったらポインタ、Rubyだったらブロックとかですね。そもそも考え方が難しいものがいくつかあって、それを変な例えで理解しようとしても、結局どこかで嘘が入っていたりして本質的には理解できないところがあります。それは難しいものだと受け入れて、わかるまで何回も繰り返すところが必要なんじゃないかなと思っています。   （村田さん）そうですね。僕も最初はPHPから始めたんですけど、クラスみたいな概念がそもそも理解できなかったです。その時は、10日くらいわからないまま続けたら理解できました。繰り返しながらやっていくと、ピーンとわかるときがくるので諦めずに繰り返すのが重要ですね。   （大場）悟るまでですね（笑）   （村田）悟りが降りてきますからね。さて次の質問ですが、「おすすめのプログラミング学習方法はありますか」ということです。いま繰り返しやるとありましたけれど、もうちょっと具体的に聞きたいと思います。大場さんは仕事を始めてから学んだという感じですか？   （大場）まあプログラムを書くのがもともと好きでゲームをつくるなかで学びました。Windows3.1が出たときに「マインスイーパ」というゲームが入っていたのですが、当時Windowsが動くパソコンがすごい高かったんですよね。なので、みんなができるように、MS-DOSのキャラクターベースでできるマインスイーパを開発してみんなに配ったとか、そのなかでいろんな技法みたいなものを学んでいったというところです。 今はほんと一つのアプリケーションを成立させるのにいろんな技術が必要なので、競争仲間であるとか教えてくれる先輩とかそういう人がいる環境に身を置くところが大事かなという気がします。   （堀井）小さいところから考えて手を動かすのがいいかなと思っています。会社に入ってみて思ったのが、システムって完璧じゃなくてすでに困っている人がいるんですね。そこで私もわからないなりに、管理画面にあったらいい機能とかを他の部署の人から聞いたりして、改善や機能追加できるところを調べながら徐々に開発技術を学んでいくところがありました。 あとは、勉強会もおすすめです。新卒で入った会社では勉強会を定期的に開催していたので、自分の回が来たら学んできたことを発表しなきゃいけない場がありました。そういう半ば強制的にでも自分のスキルを底上げするようなイベントに身を置いてステップアップしていくのはいいかなと思います。   （村田）なるほど。僕も自分で学習してきていたときは、何かインターネット上で気になるサービスをまねてそれと同じ動きを作ってみることをしていました。あとは、わからないところでずっと迷ってるとやる気がなくなっていくので、すぐ人に聞くというのは結構重要ですね。僕は新卒で楽天に入ったので、エンジニアの部署にいる同期を休日にカフェとかに呼び出して、わからないことを聞くというのを結構な頻度でやってました。   （大場）あとはオープンソースの開発に関わっていくこともいいですね。そんなに難しくなくても手が足りないというプロジェクトはたくさんあって、それこそプログラムだけじゃなくてドキュメントの追加みたいな簡単なところから手伝うこともできます。それでコミュニティの人たちの顔がわかってきて、だんだん開発に協力していく中でいいプログラムをたくさん読んで、自分がやるならどうしようみたいなことを考えたりすることがスキルアップにつながると思います。     エンジニアとして働く段階 （村田）では次の項目に入っていきますね。「採用したいと思うエンジニアの特徴」について聞いてみたいと思います。具体的にこんな人がいいなというものがあれば教えていただけますか？   （堀井）大前提としてプログラミングが好きなことが当てはまるのかなと思っています。やっぱ好きな人って勝手に自分でどんどん技術習得して、自分自身でスキルアップしていくので根本的にプログラミングが好き、ものづくりが好きという素養はまず見てますね。 あとは、Githubとかを使って自分が書いたコードを他の人に見てもらう、シェアするみたいな文化があると思うんですけど、自分の恥をさらすことができる、自分の持っていることをシェアするとかオープンさみたいなものを持っている人は素晴らしいかなと思いますね。   （大場）堀井さんのお話の中でもサービス志向のエンジニアみたいな話題がありましたけども、スキルはすごい優秀だけどうちの事業にそんなに興味ないみたいな人は今のステージでは採用が難しいです。なにかしら共感をもってるところのプラスアルファでエンジニアリングを見て採用してます。   （村田）会社の規模とかフェーズによっても変わってくるかなと思うんですけれども、やっぱりそのそもそものエンジニアとしてのプログラミングが好きであったりとか、サービスが好きみたいなところは基本的には重要ですよっていうことですね。   （村田）では次です。「優秀なエンジニアはどうやって見極めているんですか？」という質問です。大場さんいかがでしょうか？   （大場）正直言って僕もこれだというものはないですけど、一番確実なのは一緒に働いたことがある人ですよね。やっぱりいろんな会社にいると、こいつは本当にすごいみたいな人が何人かいたりします。   （堀井）優秀の定義にもよるかなと思うんですが、見極めるとしたら今はGitHubとかあるので、どういうコードをその人が書いているのか、アプリなど個人でプロダクトを出しているのかとか見たりしますね。   （村田）結局その人がどういう人かとか、どれくらいできるのかっていうのが見えるかどうかっていうのは結構重要なのかもしれませんね。ポートフォリオなりGitHubなり、今だとそういうのが結構アピールしやすい時代かなと思います。   （村田）次に行きますね。「プログラミングスキル以外でエンジニアに求めることはありますでしょうか」という質問です。堀井さんどうでしょうか？   （堀井）これはもうたくさんあります。まず弊社もベンチャーなのでプログラミングだけできる人は結構厳しいのかなと。具体的に言うと、やっぱコミュニケーション能力が高い人がいたら嬉しいです。実際、弊社はユーザーにヒアリングすることがあるので、ちゃんとそのユーザーさんとコミュニケーションが取れるかとか、仕様が上から降ってくるのを待つのではなくて自分で考えたものをデザイナーやディレクターに発表して巻き込んでいく力みたいなのが問われるシーンが多いです。   （大場）エンジニアに求めるコミュニケーション能力でいうと、そもそも人と話すのが苦手だからコンピュータを扱う仕事を選んだみたいなところもあると思うんですよね。 立ち上げ初期のベンチャーだと、とにかく作るというところがメインになっていて、そんなにコミュニケーションする必要がなかったりします。でも組織がちょっと大きくなってサービスが伸びてくると、ある時点からチーム開発みたいなものが求められて個人技だけでは限界がきたりします。そういう時にちゃんと自分に求められている役割の変化を感じて、それについてこれるかは考えてほしいなと思ったりします。 具体的にはさっきの仕様の話だと、ゆるふわで落ちてきた仕様に対してこんな仕様でできるかと思うか、僕が決めてもいいんだというように受け止めるかで大きな違いがあると思うんですよ。それってエンジニアリングのバックグラウンドがあって、そういう幅のある仕様のなかで可能性として見られるかどうかっていうのは大きな違いじゃないかなと。   （村田）自分から能動的に動いて、与えられたものだけじゃなくてしっかりそれ以外も自分で発信できるっていうことを理解した上でスキルを上げていけるような方が優秀になってくるし、それが求められるかもしれないですね。   （村田）次の質問ですが、「エンジニアとして働き始めてからどんな勉強が必要ですか」とのことです。基本的にはエンジニアは日々勉強みたいなところがあると思うんですけど、そういったこと以外に何か具体的にあれば教えていただけますか？   （大場）最近だとエンジニアの向かう方向性としてフルスタックみたいに、いろんな層の技術をまたがって自分一人でもサービス立ち上げができるみたいなところを目指したりもしますけど、実際本当に伸びてくサービス開発のなかでフルスタックになっていくのはめちゃくちゃ難しいと思っています。他に得意な人がいればなかなか手を出すのも難しい、どこをやってもいいよと言われても躊躇してしまうというところがあったりします。 その中でできることは、一つひとつ極めていくところだと思っています。ただ、一個の技術だけで戦ってるとやっぱりリスクも高いので、次はこの専門家になろうみたいな二つ掛け合わせるものが何かあるといいんじゃないかと思います。   （堀井）私はどういう勉強をしてたかなと思い返してみると、やっぱり学んでいくには段階的になると思うんですよね。 一つの言語を学んで、データベースのことも学んで、今度はその言語の上に動いているフレームワークのことを学んだりと段階的に自分が学んだことに派生して勉強してきました。なので、最終的に自分が得意であると言えるくらいのところまで行けるように深掘りして、一つの技術を学んでいくのがいいのかなと思いますね。 エンジニアにもスペシャリストを目指すのか、ジェネラリストを目指すのかいろいろ方向性があると思うんですけど、ひとつ自分はこういうエンジニアだとか自分の代表するプロダクトはこれだとか、そういうものを作れるようになるまでは深掘りすることがいいかなと思いますね。   （村田）やっぱりエンジニアとしてどこか一つでもいいので、ある程度極めるというか、できたというところまでやって、そこからスキルの掛け算みたいなところが重要になってくるということですよね。     エンジニアとしてさらにスキルアップする段階 （村田）最後の項目に入っていきたいと思います。「エンジニアとしてどんなキャリアパスが描けると思いますか」という質問ですが、エンジニアとしてキャリアの長い大場さんお願いできますか。   （大場）いまエンジニアの責任者として会社の中での役割を担っていますが、究極的には「事業のためにエンジニアリングをどうするのか」みたいな話になっていくかなと思っています。なので、技術だけではなくて、最近だとよく読んでいるのはマネジメントの本とかビジネス書みたいなところからキャッチアップするような勉強をしたりしてます。   （村田）技術だけではなくて、その先の事業をテクノロジーで解決していくみたいなところに進めるようなパスがいいんじゃないかという話ですよね。   （村田）では次に、「エンジニアが仕事したいと思う環境はどんなところですか」という質問です。堀井さんいかがでしょうか？   （堀井）やっぱりエンジニア目線でいうと自由度が高いであるとか、個人の裁量が大きい方がチャレンジングなことがしやすいですよね。なのでそういう環境をいまの会社で作っていきたいと思ってます。 弊社ののコアバリューがいくつかあるんですが、「エンジニアもチャレンジする」というのもあります。ある程度エンジニアの裁量でどういう設計をするかなど決められるような体制になっているので、自分がいいと思ったものをすぐ試せる環境があるのはエンジニアにとっていいのかなと思いますね。   （村田）なるほど。では最後の質問として「エンジニアとして成長するためにどんな人がいる会社で働くべきだと思いますか」という質問です。いかがでしょうか？   （大場）前職のように本当にエンジニアリングに関して職人みたいな人がいっぱいいるところにいて感じるのは、自分より優秀な人がいるところに身を置くことですね。自分が一番下手になって、あとは登っていくしかないみたいなイメージです。例えば、学生時代にインターンで初めてプログラミングをして、ベンチャー企業を手伝いながら一番下っ端でがんばってたらいつの間にか自分が一番詳しくなっていた。その後、さらに強い奴に会いにいきたいと言って弊社にジョインしてくれたエンジニアがいます。 僕自身もいかに自分より優秀な人に来てもらうか、自分自身がキャップにならないようにすごく気をつけていて、優秀な人が活躍できるような環境や会社やサービスが大事だなと思っています。   （堀井）これは私もほとんど同意見なんですけれども、自分よりも技術において素晴らしいと思った人がいるところですね。あとは、自分のスキルセットに近しいのを持っている人がいるような環境にいくと、自分のやろうと思っていることが一段引き上げられるのでいいのかなと思っています。 あと最近は勉強会とか発表された資料とかがWebサイトにいっぱい上がっているので、そういうのを参考にしながら企業を選んだりするのはいいかなと思ってます。     会場からの質問 （村田）ここからは会場からの質問を受け付けたいと思います。   ーー大場さんにお伺いしたいのですが、ご自身が英語情報で技術をキャッチアップするために気をつけられていることや、社内の方に英語の情報をキャッチアップするためにどんなことをしているのか教えていただけますでしょうか。   （大場）今やってることでいうと、オープンソースコミュニティがだいたい英語ベースになっています。日本人しかエンジニアがいないプロダクトでもコミットとかは英語じゃないと受け付けない感じだったりします。 社内に関しては、こうしないとみたいなものは今はないのですが、今週の気になる技術みたいなのを社内のGitHubにスレを立てて共有して、みんなが気になった技術は突っ込むようにしています。そういうときに情報ソースが英語のものがたくさんあるので、おのずと危機感が醸成されればと思っています。   （村田）他のご質問はいかがでしょうか？   ーーエンジニアが少なくて採用が大変だみたいなことを何かで読んだのですが、雇われる側としてどう感じておられるかということと、あと村田さんは育てる側としてどう思われるか教えていただけますでしょうか？   （村田）まず育てる側の僕の方から話をさせていただきますね。 まずエンジニアが足りてないところは事実です。エンジニアの採用が難しいっていうのは、そもそもマーケットに人材が少ないから取り合いになってるっていうのが一つあります。あとは統計的にもアメリカでは2020年には100万人エンジニアが足りなくなると言われています。日本でも2020年には20〜30万人ぐらいは足りなくなると言われています。インターネットを使ったビジネスはすごい盛り上がって市場も拡大しているのに、そこで働く人が増えていなければ足りなくなりますよね。 僕らはそれをエンジニアを増やすことで解決したいと思っています。エンジニアになりたいという方は多いと思っていて、それでも増えないのは仕組みの問題もあると思っています。それが解決できる仕組みがあれば、人が足りないということに対してひとつの力になれるんじゃないかなと。 エンジニアが足りないということに対して、大場さんはいかがでしょうか？   （大場）エンジニアが足りないと言ってる会社も、2種類あるかなと思っています。 1つはよくよく聞いてみると、あまりエンジニアを大切にするような文化がなくてエンジニアが定着しない会社です。そういう会社の方は、「来てくれても半年くらいで辞めるから、辞めると思ってアウトソースすればいい」といったことを仰る場合もあります。こういったことが負の循環になって常にエンジニアが足りないことが常態化してしまう。 僕らみたいなエンジニアリングの重要性を理解していて、Webサービス中心の会社だとまったく事情は違っていて、サービスの成長にともなって、さらに成長させるためにエンジニアは、明確に足りていなくてまだまだ必要だと思っています。TechAcademyさんみたいな取り組みでエンジニアが増えていくのはこれからの日本にはものすごい必要だなと思っています。   （堀井）ベンチャーで最近伸びているサービスであれば、やっぱりどうしても人が必要になってきて、実際に弊社でもエンジニアは常にどの職種も募集しています。私もベンチャーの友達とか知り合いも多くて起業する人もいるのですが、その立ち上げにはやっぱりそれなりにWebのことがわかる人がどうしても欲しくなるんですけど、そういうスキルの高い人たちは大手であるとか名の知れた会社とかに勤めています。そもそもその会社からあまり転職市場に出てこないというのは肌感としてはあるので、僕らみたいなベンチャーはいかにいい人たちを見つけて会社のことを知ってもらって、採用につなげるかについていつも苦労しています。なので、需要はかなりあると認識しています。   （村田）最後付け加えますね。プログラミングを習い事の視点でみると、換金性の高い習い事だと思うんですね。というのも、例えば10万円払って勉強してプログラミングが習得できれば10万円以上稼げると思うんですね。もちろんクラウドワークスさんのようなクラウドソーシングサービスで仕事を探してそれに応募して自分で遠隔の仕事をするのも一つだと思いますし、自分でメディアを立ち上げるのというのも一つでしょうし。そういった意味でも企業に入るだけじゃなくて働く方法はいくつかあると思います。   （村田）お時間になりましたので、最後にこの会の締めくくりということで「これからプログラミングを学習するみなさんへのメッセージ」をお二方からお願いします。まずは堀井さんお願いします。   （堀井）私も最初はプログラミング初心者だったんですけど、いろいろ学びながら実際にものづくりができるようになりました。最初はハードルの高い部分もあるのかなと思いますが、楽しみながら学んでいくと自分の可能性も広がって、キャリアを積む上でもいい経験だと思います。ぜひみなさんがんばって欲しいです。プログラミングは楽しいです。   （大場）僕からは作るだけじゃなくて問題解決していこうみたいな話もしましたけれども、一方で何かを作り出す・生み出すということは本質的に楽しいことだなと思っています。例えば、快適に作るための環境を整えることに丸一日費やすとか、自分のエディタの設定とか、これだから開発しやすいみたいなことを考えながらものづくりを純粋に楽しむところも実際にあるんですね。 そういった気持ちってなかなか社会人になってしまうと忘れてしまったり、思い出せなかったりとかあると思います。今だと、エンジニアになろうみたいなフェーズだといくらでも失敗できるので、何度も作ったり壊したりしながら、ぜひものづくりの楽しみというところを大切にエンジニアを目指していただければなと思いました。   （村田）堀井さん、大場さん今日はどうもありがとうございました。     イベントレポートは以上です。 TechAcademyではこれからもプログラミング学習者のためのイベントを開催していきます。
イベントレポート

JavaScriptでオセロゲームを作成する方法を現役エンジニアが解説【初心者向け】

JavaScriptでオセロゲームを作成する方法について、テックアカデミーのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。 実際のコードをもとに解説していきますので、理解を深めていきましょう。 目次ガイドとは基本的なガイドの表示方法数値指定してガイドを表示する方法まとめ監修してくれたメンター そもそもJavaScriptについてよく分からないという方は、JavaScriptとは何なのかについて解説した記事を読むとさらに理解が深まります。   田島悠介 今回は、JavaScriptに関する内容だね！ 大石ゆかり どういう内容でしょうか？ 田島悠介 JavaScriptでオセロゲームを作成する方法について詳しく説明していくね！ 大石ゆかり えっ？オセロゲームを作るなんて、難しそうですね、、、 田島悠介 大丈夫！1つ1つの処理を丁寧に解説するから、一緒に頑張ろう。 大石ゆかり はい！よろしくお願いします！   はじめに 対象読者 本記事は、JavaScriptを学習中であり、変数や関数などひととおりの基礎知識を学習した初心者の方向けに書いています。 本記事が難しすぎると感じた場合や、JavaScriptの基礎を学習してから挑戦したい場合には、以下で紹介しているサイトなどを用いて学習してみましょう！ 入門向けのJavaScriptを学習できるサイト   本記事の目的 本記事の目的は、JavaScriptを用いたオセロゲームの実装を通して、以下のようなスキルを習得・向上させることです。 設計から実装までの、エンジニアの思考プロセスを体験する ゲームロジックに基づいたプログラム実装を通して、論理的思考能力を鍛える オセロゲームの実現に必要な様々な処理を学び、JavaScriptという言語の仕様をより深く理解する 上記の目的を達成するために、本記事は読者のみなさんが実際に手を動かしながら学べるハンズオン形式をとっています。 解説に沿ってコードを書きながら、プログラミングに親しんでいきましょう！   注意点 本記事では、オセロゲームを0から実装するために必要な解説のすべてを記載しているため、記事の分量が多くなっています。 一気に最後まで進めようとせずに、ご自身のペースで学習を進めることを推奨します。 本記事では章ごとに所要時間の目安を記載しているので、学習の区切りを決める参考にしてください。   オセロゲームのルールに基づいて設計をしよう 🕛目安時間：1時間 ゲームに限らず、いかなる実装においても設計は非常に重要です。 機能要件を満たしつつも、できるだけシンプルでメンテナンスしやすい設計を考えるのもエンジニアの醍醐味の1つです。 「その設計、自分ならどうするかな？」ということを考えながら読み進めてみてください。   オセロゲームのルールを確認しよう オセロゲームを実装する上での機能要件は、一言でいうと「オセロゲームのルールに従って盤面の状態が変えられる」ということです。 まずは前提条件となるオセロゲームのルールを確認していきます。   オセロゲームのルール 盤は8×8マスを利用する 初期状態で真ん中の4マスに白黒の石を交互に配置する 先攻を黒とし、黒⇨白⇨黒…の順番で石を置いていく 石を置ける場所は、下記の条件を満たしている 置くマスに他の石がないこと 置くマスの上下左右、斜め1マスの場所に相手の石があること 置いた石、相手の石があった方向の延長上に自身の石があること 石を置ける条件を満たせない場合は、パスをして相手の番になる すべてのマスに石が置かれた時点でゲーム終了（「空きがあるが、白黒どちらも置けない」状況は今回は考えないことにする） ゲーム終了時点で石の数が多い方が勝ちとなる 以上がオセロゲームのルール概要です。   ルール以外の要件を定めよう ゲームのルールのほか、今回の実装では以下の条件を適用することとします。 自動でパスする機能は実装せず、「パス」ボタンを設置する 「現在どちらの手番であるか」を表示する ゲーム終了後、白黒それぞれの石の数と勝敗を表示する ゲームの初期化機能は実装しない 石が裏返るなどのアニメーションは実装しない CPUとの対戦機能は実装しない jQueryなどのフレームワークは使用しない 画像は用いない それでは、要件を確認したところで実際の設計に移りましょう。   要件に沿って実装設計をしてみよう 同じルールや条件でも、それをどのように実装に落とし込むかはエンジニア次第です。 実装設計では、いかに無駄なくすべての要件を満たした実装ができるかを考え尽くします。 それでは、紙やプレゼンスライドなどに、大まかな処理の流れを考えて書いてみてください。 想定されるケースを洗い出し、そのケースに応じてどう処理を分岐するかを矢印で表してみましょう。   本記事の執筆者は、以下のように流れを作成しました。 上図のように場合分けをしつつ、プログラムのフローを書き出すことで、コードに落とし込む際に整理がしやすくなります。 もちろん上記のフロー図が唯一の正解ということではなく、他にもいろいろなパターンの表現方法が考えられます。 想定されるケース・条件を網羅し、かつ無駄のない流れで設計できると、「良いフロー図」と呼ぶことができます。 本セクションは以上です。 休憩・復習などをして、ご自身のペースで次のセクションへ進んでください。   [PR] Webデザインで副業する方法とは開発環境を整えよう 🕛目安時間：30分 今回の開発に必要な環境は以下の通りです。 コードエディタ（図解ではVisual Studio Codeを使用します） Webブラウザ（Google Chrome推奨）   コードエディタを用意しよう コードエディタは普段使い慣れているもので構いませんが、解説に用いるVisual Studio Codeを導入したい方は、以下の記事を参考にセットアップしてください。 Visual Studio Code（VSCode）とは？インストールや使い方も現役エンジニアが解説   Webブラウザの環境を整備しよう 主要なWebブラウザには、コードの構造を確認したり、エラーを発見したりするための開発者用ツールが備えられています。 本記事では、実務現場の多くで使われているGoogle Chromeを用いて開発を進めていきます。 開発者ツールの使い方をまだ学習していない方は、次のセクションに進む前に以下の記事に目を通しておいてください。 Chromeの開発者ツールを使ってJavaScriptのデバッグを行う方法を現役エンジニアが解説【初心者向け】 盤面と石をブラウザ上に表示しよう 🕛目安時間：1時間30分 このセクションでは、オセロゲームに必要な盤および石を表示するための実装を行います。 本格的にHTML / CSS / JavaScriptのコードが登場するので、要点を1つ1つ理解しながらコーディングをしていきましょう。   必要なフォルダとファイルを作成しよう まずはプロジェクトのルートとなるフォルダを1つ、PCの任意の場所に作成してください。 （例ではオセロゲームの一般的な英語名であるreversiというフォルダ名にしました）   フォルダ内には、以下の3つのファイルを作成してください。 index.html style.css main.js 下図のような構成にできていればOKです。   HTMLをコーディングしよう いよいよコーディング作業に入ります！ 今回はサンプルコードに従って、index.htmlの中身を記述してみましょう。 <!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>オセロゲーム</title> <link rel="stylesheet" href="style.css"> </head> <body> <!-- 盤 --> <div id="stage" class="stage"></div> <!-- 各マスを描画するためのテンプレート --> <div id="square-template" class="square"> <div class="stone"></div>
JavaScript

Photoshopでガイドを表示させる方法【初心者向け】

Photoshopで画像の中の好きな場所に、ガイド線を表示させる方法を紹介します。 ガイドは実際の画像には反映されない目印用の線で、文字やオブジェクトをきれいに配置したいときに役に立ちます。 (※今回の作業はすべてAdobe Photoshop CCのバージョンで行っています。) 目次ガイドとは基本的なガイドの表示方法数値指定してガイドを表示する方法まとめ監修してくれたメンター   大石ゆかり 田島メンター！！ 絵や文字を配置するときに、きれいに横に並べるための目印が欲しいんですが…… 田島悠介 そんなときは「ガイド」の機能を使ってみよう。 大石ゆかり 「表示」メニューに「ガイド」というのはあるんですが、なぜか選択できないんです。 田島悠介 「ガイド」を使うには、まずガイドそのものを新規作成する必要があるんだ。 具体的な手順を見てみよう。   Photoshopでガイドを表示させる 今回は例として以下の画像を使用します。   「表示」→「新規ガイド」を選択します。   新規ガイドのウィンドウが表示されます。 「水平方向」を選択すると横の線が追加され、「垂直方向」を選択すると縦の線が追加されます。 「位置」はガイドを作成する場所の設定です。 水平方向の位置は画像の一番上、垂直方向の位置は画像の一番左から、いくつ移動した場所に追加するかを指定できます。   今回は下の画像のように「水平方向」「0 px」と設定します。   設定を完了して「OK」をクリックすると、画像にガイドが追加されました。   ガイドは左メニューの「移動ツール」で動かすことができます。   移動ツールをガイドに合わせると、ポインタが下画像のように変化します。   この状態でドラッグすると移動が可能です。   ガイドは新規作成することによって、複数表示させることができます。   また、Altを押しながらガイドをクリックすることで、水平と垂直を切り替えることが可能です。   田島悠介 ガイドはいくつでも表示できるので、必要なところに追加していくといいよ。 大石ゆかり あ、そうそう！ こんな感じにしたかったんです！ 田島悠介 もちろんこのガイド線は画像本体には描写されておらず、プリントアウトや画像出力をしても何の影響もないからね。 細かい操作も見てみよう。   作成したガイドは「表示」→「表示・非表示」→「ガイド」から表示の有無を変更できます。   「表示」→「ガイドをロック」を選択すると、ガイドが固定され移動の操作が無効になります。 ロックすることで、誤って動かしてしまうことを防ぐことができます。 ガイドの位置を決めたら、ロックしてしまった方が作業はしやすいでしょう。 ロックしたガイドは、「ガイドをロック」のチェックを外すことによって再び移動が可能になります。   ガイドを消去するときは、消したいガイドを画面の外へドラッグすればOKです。   すべてのガイドを消したいときは、「表示」→「ガイドを消去」を使用します。 ガイドの一部、または全体を誤って消してしまった場合はPhotoshopのショートカットキー「Ctrl＋z」を押すことによって元に戻すことができます。   ガイドの色や実線・破線などの設定を変更できます。 「編集」→「環境設定」→「ガイド・グリッド・スライス」から下画像の赤枠内を設定することで変更できます。 自分の作業環境に合った設定にしてみてください。 今回の記事は以上です。   田島悠介 画像によってはデフォルトのガイドの色だと見にくい場合もあるから、色の変更は結構大事だね。 大石ゆかり ガイドの表示と非表示を、パッとすぐに切り替えたりとかはできますか〜？ 田島悠介 そんなときはショートカットキーを使うといいよ。 デフォルトでは「Ctrl＋:」(Macでは「command＋:」)になっているけれど、任意のキーを割り当てることもできるからね。 大石ゆかり 便利な機能なんですね！どんどん使っていきたいです。 ありがとうございました！   Photoshopを学習中の方へ これで解説は終了です、お疲れさまでした。 Photoshopを調べたけど分かりづらい 副業や転職後の「現場で使える」知識やスキルを身につけたい Photoshopの学習や情報収集をしていて、このように思ったことはありませんか？ テックアカデミーのPhotoshop講座では、第一線で活躍する「プロのWebデザイナー」が教えているので、効率的に実践的なスキルを完全オンラインでしっかり習得できます。 合格率10%の選考を通過した、選ばれたWebデザイナーのチャットサポートを受けながら、初心者でもフォトレタッチをマスターできます。
Photoshop

【事例付き】様々なサービスに活用！画像認識技術とは

デジタルカメラのスマイルシャッターや、iPhoneXのFaceIDなど、画像認識の技術は私達の身の回りで多く使われており、生活を便利に豊かにしてくれています。 近年のコンピューターの性能向上、とりわけ人工知能(AI)の技術の向上と共に、画像処理の技術は飛躍的な発展を遂げました。すでに画像／動画認識率において、コンピューターは人間のレベルを凌駕する領域にまで達しています。 それでは画像認識はどのような技術なのでしょうか。仕組みや原理、どのようなシーンで使われているかなど、この記事で確認して行きましょう！   なお本記事は、TechAcademyのオンラインブートキャンプ、AI講座とデータサイエンス講座の内容をもとに作成しています。   目次 画像認識とは 画像認識の仕組み、原理とは 画像認識の事例 画像認識ができるライブラリまとめ   田島悠介 今回は画像認識について解説するよ。 大石ゆかり 田島メンター！画像認識というのは具体的にどのような技術なんですか〜？ 田島悠介 パターン認識技術の1つなんだ。詳しく見ていこう。 大石ゆかり 分かりました！   画像認識とは 画像認識とは、画像や動画から特徴をつかみ、対象物を識別するパターン認識技術の1つです。 人間は、画像に写っているものが何であるか、これまでの経験から「理解」して判断することができます。しかし、コンピューターは画像に何が写っているかを「理解」することができません。 その代わりに、沢山の画像データから、対象物の特徴を学習させることで、未知の画像を与えた時に、対象物が何であるかを「確率」として表現することができるようになります。 画像認識の歴史は古く、1960年頃から研究されて来ました。昔はコンピューターの性能が低く、価格も高価であったため、大学の研究機関などの限られた分野での利用が主でしたが、現在ではパーソナルコンピューターはもちろん、デジタルカメラやスマートフォンなど、多くの電子機器に画像認識機能が取り入れられています。   また、画像認識は人工知能(AI)におけるディープラーニング技術により、近年著しい進化を遂げています。 ディープラーニングによる画像認識が大きく注目されるようになったのは、2012年に開催された「ILSVRC2012」という画像認識の大会です。この大会では、ImageNetという大量のラベル付き画像（画像と写っている物の名前のセット）を基に画像認識率を競い会います。前年度までの正解率は、高くても70%台前半でした。 TensorFlow Inception-v3 ところが2012年、ディープラーニングを使ったモデルが、一気に約85%の正解率を叩き出します。翌年からは、ディープラーニングを使ったモデル同士が競い合うようになり、正解率もどんどん向上して行きました。現在では正解率95%以上、人間を超えるレベルにまで到達しています。 それでは、画像認識の仕組み、原理はどのようなものなのでしょうか。詳しく見ていきましょう。   [PR] Webデザインで副業する方法とは画像認識の仕組み、原理とは はじめに、画像認識を行うためには、その前段階として、画像から対象物（もの）を抽出しなくてはなりません。 人間は画像から対象物を視覚として判断できますが、コンピューターにとっては、画像はピクセル毎の情報（色合い、明るさ）の集合体でしかありません。 また、対象物も様々な角度、大きさ、明るさで画像の中に存在しています。コンピューターに取ってみれば、ノイズだらけの混沌とした情報から、対象物を認識しなければならないのです。   そのため、画像認識の前に、コンピューターが画像を認識しやすくする処理を行います。その作業を画像処理と言います。画像処理は概ね以下のような手順で行われます。 画像のノイズや歪みなどを取り除く オブジェクトの輪郭を強調したり、明るさや色合いを調整することで、オブジェクトを抽出しやすくする 画像からオブジェクトの領域を切り出す（領域抽出） ※領域抽出と画像認識は並行して行われることもあります。 領域抽出を行うことで、オブジェクトを一定の大きさで扱うことが出来るため、画像認識を行いやすくなります。 それでは、いよいよ画像認識についてです。 コンピューターに対象物を認識させるためには、おびただしい量の画像データとラベル（画像データが何を表すか）を与え、対象物を学習させる必要があります。 ここで機械学習が登場します。コンピューターは、画像データとラベルの組み合わせをもとに、ラベル毎の画像データの特徴を学習します。例えば「画像データのどの位置が濃い」といった特徴です。この学習の成果を「モデル」と言います。 Google この時、元の画像を白黒にしたり、傾けたりすることで、学習データを増やすことも良く行われます。 Google 学習が進むと、コンピューターは画像データから、対象物の特徴を判断できるようになります。例えば人であれば「目が2つ」「口が1つ」というような情報をコンピューターが得るわけです。 少し前に、「Googleの研究開発によってコンピューターが猫を認識できるようになった」と話題になりました。その論文では、コンピューターが認識した「人間の顔」も掲載されていますので紹介しておきましょう。少し不気味ですが、目や口、鼻といった特徴が認識されていますね。 Google これらの学習結果をもとに、コンピューターに未知の画像を与えると、コンピューターは未知の画像から対象物を認識し、対象物が何であるかを「確率」として表現することができるようになります。   画像認識の事例 それでは次に、画像認識の事例について見ていきましょう。現在、画像認識技術はとても広い分野で活用されています。 セキュリティ分野 現在最も盛んに研究が行われている分野の1つでしょう。監視カメラの映像分析、顔認証システム、不審者侵入検出など、多くのソリューションが実用化されています。 NEC NeoFace http://jpn.nec.com/physicalsecurity/case.html 監視カメラ映像から顔認証を用いて犯罪者データベースと照合 パナソニック 顔認証ゲート http://news.panasonic.com/jp/press/data/2017/12/jn171215-1/jn171215-1.html 羽田空港での、日本人の帰国手続の合理化に貢献   文字認識 古くから研究されている分野です。文字読み取り技術は「OCR（Optical Character Recognition）」とも呼ばれます。最近は翻訳技術と組み合わせたシステムも多く実現されています。 郵便区分機 https://ja.wikipedia.org/wiki/%E9%83%B5%E4%BE%BF%E5%8C%BA%E5%88%86%E6%A9%9F 機械学習ではありませんが、世界最大規模の文字認識システムは、郵便局の郵便区分機です。OCRだけでなく、物流と組み合わせたソリューションは、一読の価値があるでしょう。 Google翻訳の「リアルタイム翻訳」 https://play.google.com/store/apps/details?id=com.google.android.apps.translate&hl=ja Google翻訳アプリには、カメラを使ってテキストをリアルタイムに翻訳する機能が実装されています。文字認識精度、スピードも意外に速く、オンラインでは約38種類の言語に対応しています。文字認識と翻訳技術を組み合わせた、素晴らしいソリューションです。   その他 その他にも、画像認識技術はとても広く使われています。 工場における異常生産品の検出 SNSや個人売買アプリにおける不適切な画像の検出 自動車の運転アシスト技術 農作物の生育状況把握   画像認識ができるライブラリまとめ 最後に、代表的な画像認識のライブラリをご紹介します。 OpenCV http://opencv.org/ 画像処理、画像認識ライブラリの代表格です。インテルが開発・公開しているオープンソースのライブラリ（一部アルゴリズムは非商用）で、画像認識だけでなく、画像のノイズ除去、3次元画像処理、AR/VR対応等、幅広い画像処理を行うことができます。   TensorFlow https://www.tensorflow.org/ ディープラーニングのライブラリですが、もちろん画像認識にも使うことができます。   Caffe http://caffe.berkeleyvision.org/ こちらもディープラーニングのライブラリです。特に画像認識に強いと言われています。   Chainer http://chainer.org/ Preferred Networksが開発した、国産のニューラルネットワークのライブラリです。   Google Cloud Vision API https://cloud.google.com/vision/?hl=ja Googleの画像認識技術の機能を利用できるAPIです。既に学習済のモデルを利用することができます。多くの対象物を認識できます。1000呼び出し/月まで無料で使えるので、試してみると良いでしょう。   Watson Visual Recognition https://www.ibm.com/watson/jp-ja/developercloud/visual-recognition.html IBMのWatsonの画像認識機能です。こちらも学習済のモデルを利用することができます。また、認識結果を日本語を含む多言語で返すことができるという特徴があります。   田島悠介 画像認識について、理解は深まったかな？ 大石ゆかり 画像認識って、とても多く使われているんですね。勉強になりましたー！ 田島悠介 気軽に利用できるAPIもあるから、使ってみるといいよ。深層学習や機械学習、自然言語処理については、また別のところで説明するね。 大石ゆかり 分かりました。ありがとうございました！   今回は、画像認識について解説しました。 これから画像認識を勉強したい、機械学習を使って何か作ってみたいという方は最初に理解しておきたい内容でしょう。 TechAcademyでは、初心者でも、AI（人工知能）の構築に必要な機械学習・ディープラーニングについて実践的に学習することができる、オンラインブートキャンプAI講座を開催しています。 挫折しない学習方法を知れる説明動画や、現役エンジニアとのビデオ通話とチャットサポート、学習用カリキュラムを体験できる
機械学習

あなたの目的に合わせて学べるコース

副業したい方

Web制作の力を身につけ
副業までサポート

はじめての副業コース

転職したい方

未経験から
Webエンジニアに

Webエンジニア転職保証コース

スキルアップしたい方

AIも統計解析もできる
Pythonを学ぶ

Pythonコース

※ 経済産業省の行うリスキリングを通じたキャリアアップ支援事業の補助金対象コースです。条件を満たすことで支払った受講料の最大70％がキャッシュバックされます。詳しくは こちら のページをご確認ください。

TechAcademyから
現役エンジニアの方へ
お知らせ

オーダーメイドコース
TechAcademy（テックアカデミー） Webデザインコース Webデザイン Photoshop Photoshopでガイドを数値指定して表示する方法を現役エンジニアが解説【初心者向け】