プログラミング入門ナビ

プログラミング学習初心者のための情報メディア

You are here: Home / 2018 / Archives for 7月 2018

Archives for 7月 2018

AWS Cloud9によるRuby開発環境構築 イントロダクション

By

AWS Cloud9（エーダブリューエス　クラウドナイン）によるRuby, Ruby on Rails開発環境構築のイントロダクションです。

この記事は、オンラインプログラミング学習講座「Web開発入門完全攻略コース」サポート記事です。

概要

AWS Cloud9 によるRubyの開発の環境構築を行います。
AWS Cloud9を使うと、RubyやRuby on Railsなどサーバサイドでプログラムを実行する必要がある、Webアプリケーションの開発が、Webブラウザでできるものです。
AWS（アマゾンウェブサービス）の無償枠を利用して学習を行います。

動画で学習する

AWS Cloud9の画面

これが、cloud9の画面です。

後のレクチャーで説明しますが、
Atomのようなテキストエディタでプログラムを書くことができ、

ターミナルも利用できて、Linuxのコマンド （命令）を実行することもできます。
Linuxというのは、OS Operation Systemのことで、WindowsやMacのOS Xなどのようなものです。
Webサービスを公開するサーバのOSとしてよく使われます。

さらに、Rubyを始めとするサーバサイド側のプログラムを実行することもできます。

Webの開発環境構築の方法

・クラウド開発環境(Cloud9) を利用
・ローカルPC上に構築して利用

このレクチャーでは、受講生の皆さんのPC環境が様々で特定できないなかで、
環境によらずブラウザがあれば、すぐに開発の学習が始められるCloud9を利用しますが、
ローカルPCに必要なソフトウェアをインストールして、開発する方法もあることは覚えておいてください。

AWSとは アマゾン ウェブ サービス

AWSとは アマゾン ウェブ サービスの略です。
ECサイト大手のAmazonが提供する、クラウドコンピューティング サービスです。

AWSの起源は、社内の通販サイトのAmazonのビジネス課題を解決さするために、生まれました。
なのでECサイトのAmazonもAWSで動いている。

それを、社外にも売りだした、流れになります。

月間 100 万以上のアクティブカスタマー に利用されています。

調査会社のsynergyによると、2016年第4四半期のクラウド市場（IaaSとPaaS）のAWSのシェアは40％以上。Google、マイクロソフト、IBMの3社合計のシェアでも20％強にすぎず、圧倒的なシェアを誇っています。

日本で、商用のWebサービスを公開する時、AWS等のクラウドサービスを使わないという選択は、技術面、コスト面、時間の面で、難しくなってきていると思います。

その信頼性は高く、

銀行

アメリカ政府

例えば、NASAが利用するくらいです。

クラウドのメリット

必要な時に、必要なだけ、低価格で IT リソースを利用できること。

クラウド以前

数週間・数ヵ月も前から、サーバーや他の IT インフラストラクチャを計画・調達

クラウド時代

即座に何百・何千ものサーバーを数分で起動し、迅速に結果を出すことができます

多くのWebエンジニア、インフラエンジニアは、物理サーバを見ることほとんどなくなりました。

Cloud9とは

  • ブラウザでIDE(integrated development environment , 日本語では、統合開発環境 ）を提供。
  • AWSがCloud9の買収を発表したのが2016年7月。
  • AWSが2017年12月にAWSと統合したサービスをリリース。

Cloud9の利用に必要なもの

  • AWS 登録用のメールアドレス
  • AWS 登録用のクレジットカード (無料枠の範囲内で使用すれば、課金されない）
  • AWS 登録用のユーザー認証用の電話番号
  • ブラウザ Google Chrome

サーバが、不正に利用されない観点から、クレジット・カード登録や、電話番号認証が行われるようになっているのは、面倒ですが、時代の流れなので、致し方ないところです。

ブラウザについて

Google Chromeをおすすめします。
以前 Cloud9を使って、Ruby on Railsの勉強会をやった時に、Chrome以外のブラウザを使っいて、動作がおかしかった方がいました。

おわりに

AWS Cloud9によるRuby開発環境構築のイントロダクションを行いました。
それでは、学習をすすめていきましょう。

オンライン講座「Web開発入門完全攻略コース」では、AWS Cloud9によるRuby, Ruby on Railsの開発環境構築方法を動画を使って学習できます。
無料プレビューを1時間分用意しています。ぜひご確認ください！

関連記事

AWS Cloud9を利用する時に気をつけるべき注意点

動画で学ぶプログラミング入門

オンラインスクールProglus（プログラス）でプログラミングを学んで、創れる人になろう！

在宅学習応援！今なら複数の基礎コースが無料！！

今すぐ詳細を確認する

JavaScriptのプログラムをコメントにする方法

By

JavaScriptのコメントについて、プログラミング入門者向けに説明いたします。

HTMLやCSSとコメントの仕方が異なる部分があるので、注意してください。

この記事は、オンラインプログラミング学習講座「Web開発入門完全攻略コース」サポート記事です。

コメントとは

コメントとは、文字列の記載はあるけれども、　実行するときに無いものとして扱うことです。
文字列をコメントにすることを、コメントアウトと言います。

動画でJavaScriptのコメントを学習する

コメントの用途

  • デバック等のために、プログラムを一時的に無効にしたい。
  • プログラムの動作に関して、メモ書き（コメント）を残したい。

JavaScriptのコメント

JavaScriptで文字列をコメントにするには、

一行コメント

１行の時は、// を記載します

例)
// console.log(‘Hello!’);

復習行コメント

複数行の時は コメントしたい箇所を/* */ で囲います。

例)

/*
console.log(‘Hello1’);
console.log(‘Hello1’);
console.log(‘Hello1’);
*/

テキストエディタ（Atom）のショートカット

下記のショートカットで、コメントのON/OFFを切り替えられます。
コメントしたい箇所を選択、または、コメントしたい行にカーソルを移動
してから、

macOS環境

commandキー + スラッシュキー

Windows環境

controlキー + スラッシュキー

おわりに

このレクチャーでは、JavaScriptコメントについて、プログラミング入門者向けに説明いたしました。

オンライン講座「Web開発入門完全攻略コース」では、GitとGitHubの使い方について動画をつかって丁寧に説明しています。
無料プレビューを用意しています。ぜひご利用ください！

動画で学ぶプログラミング入門

オンラインスクールProglus（プログラス）でプログラミングを学んで、創れる人になろう！

在宅学習応援！今なら複数の基礎コースが無料！！

今すぐ詳細を確認する

macOSでスクリーンショット（画面キャプチャ）を撮る2つの方法

By

macOSでスクリーンショット（画面キャプチャ）を撮る方法について説明します。
たとえば、世界最大級のオンライン学習サイトUdemy（ユーデミー）でプログラミング学習する時に、Q&Aコーナーにスクリーンショットを添付すると、よりよいサポートが受けやすいです。

アジェンダ

次の2つについて説明します。
1) macOSの標準機能を使う方法
2) Skicthアプリを使う方法←おすすめ

1) macOSの標準機能を使う方法

macOSが標準でスクリーンショットを撮る方法を提供しています。
追加でアプリのインストールが不要なメリットがあります。

画面全体のスクリーンショットを撮る方法

1.「shift + command (⌘) + 3」キーを押す。
1. スクリーンショットがデスクトップに .png ファイルとして作成される

画面の選択した部分のスクリーンショットを撮る方法

  1. 「shift + command + 4」キーを押す。
  2. ポインタが十字型に変わる。
  3. スクリーンショットの撮影範囲の始点となる位置に十字ポインタを移動し、そのままドラッグして範囲を選択する
  4. マウスまたはトラックパッドのボタンを放す。取り消すには、ボタンを放す前に「escape (esc)」キーを押す。
  5. スクリーンショットがデスクトップに .png ファイルとして作成される。

ウインドウのスクリーンショットを撮る方法

  1. 「shift + command + 4」キーを押す。
  2. ポインタが十字型に変わる。
  3. スペースキーを押す。
  4. ポインタの形がカメラに変わる。
  5. カメラポインタを目的のウインドウに移動して、そのウインドウをハイライトする
  6. マウスまたはトラックパッドをクリックする。取り消すには、クリックする前に「escape (esc)」キーを押す、
  7. スクリーンショットがデスクトップに .png ファイルとして作成される。

2) Skicthアプリを使う方法

macOSが提供するスクリーンショットを撮る方法は、ショートカットを覚える必要もありますし、複雑で、慣れるまで使い勝手がよくありません。
そこで、Evernoteが提供する画像編集アプリSkitch（スキッチ）を使うと便利です。
無料で使えます。
以前はmacOSとWindows版があったのですが、今はmacOSのみサポートしています

Skitch

ショートカットを覚えなくても、macOSのメニューに表示されるSkitchアイコンをクリックすることで、スクリーンショットが撮れます。ショートカットも使えます。

画像編集機能

簡単な画像編集ができます。

  • 矢印を入れる
  • テキストを入れる
  • 四角形や線を書く。
  • モザイクを入れる
  • トリミングする

といったことが、簡単操作で可能です。

Photoshopのように、1pxまで精密に加工することはできませんが、
実務上、スクリーンショットをもとに何かを説明するには、Skitchで十分なことが多いです。

おわりに

macOSでスクリーンショット（画面キャプチャ）を撮る方法について説明しました。

動画で学ぶプログラミング入門

オンラインスクールProglus（プログラス）でプログラミングを学んで、創れる人になろう！

在宅学習応援！今なら複数の基礎コースが無料！！

今すぐ詳細を確認する