Save 37% off PRO during our Black Friday Sale! »

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

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

Transcript

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

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

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

  4. 開発者ツール

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

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

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

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

  9. SublimeText3導入 • インストールしたエディタ(sublime_text.exe)を起動 (デフォルトだと” C:¥Program Files¥Sublime Text 3” に存在する) •

    起動しやすいようにショートカット等作っておくとよい
  10. SublimeText3起動画面

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

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

  14. Package Control インストール • SublimeText3起動中に「Ctrl」キー + 「@」キー 同時押しし、 エディタの下部に ↓

    のようなコンソールを開く
  15. Package Control インストール • 「https://packagecontrol.io/installation」にアクセスし、 “import urllib.request,os,hashlib; h =“ (一行目)から

    “)write(by) “ (最終行) までを全てコピーする (次ページの赤枠部分) • その後、先ほどのコンソールにペーストしてエンターキーを押す
  16. None
  17. Package Control インストール

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

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

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

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

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

  23. メニューの日本語化(任意) • うまくいっていればメニューが日本語化される

  24. 便利なパッケージ • Emmet • IMESupport • SublimeLinter 各種(css, js関連など) •

    AutoFileName • BracketHighLinter …ほか、任意で必要なパッケージを入手する