D3のテスト

32:[] 31:{"title":"環境構築（2018情報デザインIII）","cells":[{"id":0,"value":"md`# 環境構築（2018情報デザインIII）\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":4,"value":"md`### 環境構築\n\n以下、macOSの場合です。\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":13,"value":"md`#### ターミナルの起動\n\nターミナルを起動します。\n\nターミナルはつぎの場所にあります。\n\n> /アプリケーション/ユーティリティ/ターミナル.app \n> (/Applications/Utilities/Terminal.app) \n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":18,"value":"md`#### Homebrewのインストール\n\n開発用のプログラムをインストールするパッケージマネージャーHomebrewをインストールします。\n\n> [macOS 用パッケージマネージャー — macOS 用パッケージマネージャー](https://brew.sh/index_ja)\n\nWebサイトにあるように、以下のスクリプトをターミナルに貼り付けて実行します（リターンキーを押します）。\n\n /usr/bin/ruby -e \"$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)\"\n\n Press RETURN to continue or any other key to abort\n\nリターンキーを押します。\n\n Password:\n\nパスワードを入力してリターンキーを押します。\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":21,"value":"md`#### Visual Studio Codeのインストール\n\n開発用のエディタVisual Studio Codeをインストールします。\n\n> [Visual Studio Code – コードエディター | Microsoft Azure](https://azure.microsoft.com/ja-jp/products/visual-studio-code/)\n\nさきほどインストールしたHomebrewを使うと簡単にインストールできます。\n\n $ brew cask install visual-studio-code\n\n（$はタイプしません。brewからタイプしてリターンキーを押します。）\n\nVisual Studio Codeはつぎの場所にインストールされました。\n\n> /アプリケーション/Visual Studio Code.app \n> (/Applications/Visual Studio Code.app) \n\nアプリケーションの名前が長いので、省略して「VS Code」と呼ぶことがあります。\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":144,"value":"md`#### Visual Studio Codeの日本語化\n\nbrew経由でインストールすると英語版になりますので、日本語化します。\n\n1. Codeメニュー→Preferences→Extensions\n2. 左上のボックスで、「japanese」を検索\n3. いちばん上に表示される「Japanese Language Pack for Visual Studio Code」をインストール\n4. VS Codeを再起動\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":101,"value":"md`#### iTerm2のインストール（オプション）\n\nOS標準のターミナルよりも使いやすいiTerm2のインストールもおすすめします。\n\n $ brew cask install iterm2\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":46,"value":"md`#### D3のダウンロード\nこの授業で中心で扱うJavaScriptライブラリD3をダウンロードします。\n\n> [D3.js - Data-Driven Documents](https://d3js.org/)\n\nD3のWebサイトから[d3.zip](https://github.com/d3/d3/releases/download/v5.7.0/d3.zip)をクリックして最新版をダウンロードします。\n\nダウンロードしたzipファイルを展開してください。\nつぎのようなファイル構成になっているはずです。\n\n d3/\n d3.min.js\n d3.js\n API.md\n CHANGES.md\n LICENSE\n README.md\n\n今回使用するファイルは、**d3.js**のみです。\n\nなお、Webサイトに書いてあるように、HTMLに次のように書いてもD3を実行することができます。\n\n \n\nただし、オフラインのときやネットワーク障害のときには正常に読み込まれないため、ダウンロードしておくことをおすすめします。\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":62,"value":"md`#### プロジェクト・フォルダの作成\n\nこれから自分で制作するプロジェクトのフォルダを作成します。\n場所はどこでもかまいませんが、一般的に書類フォルダのなかをおすすめします。\nフォルダの名前は英数字のみにしてください。\nプロジェクトフォルダの中にd3フォルダを作成し、さきほどダウンロードしたd3.jsをd3フォルダのなかにコピーします。\nフォルダ構成は次のようになります。\n\n project-folder/ （←プロジェクトの名前）\n d3/　（←D3を入れるフォルダ）\n d3.js　（←D3本体）\n index.html　（←HTML。これから作ります）\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":74,"value":"md`#### HTMLの作成\n\nVisual Studio Codeを開いて、ファイルメニュー→新規ファイルで、新規ファイルを開きます。\nつぎの内容を入れます。（コピーペーストでOKです）\n\n \n \n \n \n D3のテスト\n \n \n \n \n \n \n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":82,"value":"md`ファイルメニュー→保存で、プロジェクトフォルダのなかにファイル名「index.html」で保存します。`","pinned":false,"hidden":false,"mode":"ojs"},{"id":85,"value":"md`#### Webページの確認\n\nindex.htmlファイルをダブルクリックしてください。\nブラウザが起動して、「D3のテスト」というタイトルバーの白紙のウィンドウが開けば成功です。\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":88,"value":"md`#### Webページの確認・その2\n\n外部ファイルを読み込んでいるプログラムの場合、HTMLファイルを開いてもブラウザで実行できないことがあります。\nこれはセキュリティの制限がかかっているためです。\nこれを回避するにはローカルでWebサーバを起動します。\n\nいろいろな方法がありますが、とりあえず簡単な方法は以下のとおりです。\n\nターミナルを開きます。\nプロジェクト・フォルダに移動します。\n\n $ cd ~/Documents/project-folder/\n\ncd(半角スペース)の後に、プロジェクト・フォルダのパスを入力します。\nパスを入力する代わりに、Finderのプロジェクト・フォルダのアイコンをターミナルにドロップしてもOKです。\n\nつぎのコマンドを実行します。\n\n $ python -m SimpleHTTPServer\n\nまたは、\n\n $ python3 -m http.server\n\n実行するとつぎのようなメッセージが表示されます。\n\n Serving HTTP on 0.0.0.0 port 8000 (http://0.0.0.0:8000/) ...\n\nここにあるアドレス http://0.0.0.0:8000/ をブラウザに入力してください。\n\n中止するには、コントロールキー＋Cキーを押します。\n\n参考：[Macでローカルサーバー構築あれこれ](https://qiita.com/YuukiWatanabe/items/f89fe047ace61d2d2b45)の一番手っ取り早い方法\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":108,"value":"md`#### おつかれさまでした！\n\nこれで手元のマシンでD3を使う準備は終わりました。\n今後は、project-folderフォルダを複製して、自分の作品を作っていきましょう。\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":40,"value":"style = html``","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W32","stdlib":"1","titling":"auto"}