第一回ネットワークチーム講座資料

第一回ネットワークチーム講座資料ソフト導入

目次 • ブラウザについて • エディタ導入 • パッケージ導入など

ブラウザについてコンソールや要素の検証など、開発者ツールをよく使用するため、 • Google Chrome • Firefox このどちらかは使用できるようにしておいてください。

開発者ツール

ブラウザインストール • Google Chrome : https://www.google.co.jp/chrome/browser/desktop/index.html • Firefox : https://www.mozilla.org/ja/firefox/new/

エディタ導入 • 愛用のエディタがあるならそれを使用する • 特に無い場合、SublimeText3 を推奨

SublimeText3導入 • 「https://www.sublimetext.com/3」にアクセス • 自分の使用するPCに対応したリンクをクリック

SublimeText3導入 • ダウンロードしたexeファイルを実行 • こだわりがなければNext連打でOK

SublimeText3導入 • インストールしたエディタ（sublime_text.exe）を起動（デフォルトだと” C:¥Program Files¥Sublime Text 3” に存在する） •
起動しやすいようにショートカット等作っておくとよい

SublimeText3起動画面

使い方 • コードを入力して、「File」→「Save」で保存 • 「File」→「Open Folder」で作業用フォルダをサイドメニューに表示することができる • 「http://wakamsha.github.io/dev.cm/appendix/cheatsheet/sublimet ext.html」で、ショートカットキー一覧を見ることができる。

Package Controlのインストール Package というプログラム群をインストールすることで、コーディングに役立つ様々な拡張機能を使用することができる SublimeTextでは、Package Control という管理ツールを使用しインストールを行う

Package Control インストール • SublimeText3起動中に「Ctrl」キー + 「＠」キー同時押しし、エディタの下部に ↓
のようなコンソールを開く

Package Control インストール • 「https://packagecontrol.io/installation」にアクセスし、 “import urllib.request,os,hashlib; h =“ （一行目）から
“)write(by) “ （最終行）までを全てコピーする（次ページの赤枠部分） • その後、先ほどのコンソールにペーストしてエンターキーを押す

Package Control インストール

Package のインストール • SublimeText起動中に「Ctrl」+「Shift」+「P」を同時押しし、コマンドパレットを起動する

Package のインストール • 入力フォームに「install」と入力すると、「Package Control: Install Package」という項目が出るのでそれを選択

Package のインストール • 出てくる入力フォームに語句を入力すると候補となるパッケージが表示されるので、選択するとインストールすることができる

メニューの日本語化(任意） • パッケージのインストールフォームを開き、「Japanize」をインストールする。

メニューの日本語化（任意） • Package Control Messagesというテキストが開かれるので、適用手順に記載されているとおりに操作する

メニューの日本語化（任意） • うまくいっていればメニューが日本語化される

便利なパッケージ • Emmet • IMESupport • SublimeLinter 各種（css, js関連など） •
AutoFileName • BracketHighLinter …ほか、任意で必要なパッケージを入手する

第一回ネットワークチーム講座資料

第一回ネットワークチーム講座資料

北海道科学大学　電子計算機研究部

More Decks by 北海道科学大学　電子計算機研究部

Other Decks in Education

Featured

Transcript