├── main.pdf ├── wakita.pdf ├── figs ├── hello.pdf ├── movie.pdf ├── F1JPaint.pdf ├── movie-ja.pdf ├── core-pochi.png ├── core-pochi.tiff ├── movie-clip.pdf ├── movie-gray.pdf ├── web │ ├── mf-web.pdf │ ├── mft-web.pdf │ ├── tex-web.pdf │ ├── gftopk-web.pdf │ ├── gftype-web.pdf │ ├── glue-web.pdf │ ├── pktype-web.pdf │ ├── pltotf-web.pdf │ ├── tangle-web.pdf │ ├── tftopl-web.pdf │ ├── vftovp-web.pdf │ ├── vptovf-web.pdf │ ├── weave-web.pdf │ ├── dvitype-web.pdf │ ├── gftodvi-web.pdf │ └── pooltype-web.pdf ├── movie-ja-gray.pdf ├── scratch-block.png ├── scratch-block.tiff ├── scratch-sprite.png ├── scratch-state.png ├── scratch-state.tiff ├── core-pochi-gray.png ├── scratch-program.png ├── scratch-program.tiff ├── scratch-sprite.tiff ├── scratch-block-gray.png ├── scratch-scan-array.png ├── scratch-scan-array.tiff ├── scratch-sentential.png ├── scratch-sentential.tiff ├── scratch-sprite-gray.png ├── scratch-state-gray.png ├── scratch-program-gray.png ├── spro10.graffle │ ├── image4.pdf │ ├── QuickLook │ │ ├── Preview.pdf │ │ └── Thumbnail.tiff │ └── data.plist ├── scratch-scan-array-gray.png └── scratch-sentential-gray.png ├── OMakeroot ├── OMakefile ├── README.markdown └── main.tex /main.pdf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wakita/visual_programming_paper/HEAD/main.pdf -------------------------------------------------------------------------------- /wakita.pdf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wakita/visual_programming_paper/HEAD/wakita.pdf -------------------------------------------------------------------------------- /figs/hello.pdf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wakita/visual_programming_paper/HEAD/figs/hello.pdf -------------------------------------------------------------------------------- /figs/movie.pdf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wakita/visual_programming_paper/HEAD/figs/movie.pdf -------------------------------------------------------------------------------- /figs/F1JPaint.pdf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wakita/visual_programming_paper/HEAD/figs/F1JPaint.pdf -------------------------------------------------------------------------------- /figs/movie-ja.pdf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wakita/visual_programming_paper/HEAD/figs/movie-ja.pdf -------------------------------------------------------------------------------- /figs/core-pochi.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wakita/visual_programming_paper/HEAD/figs/core-pochi.png -------------------------------------------------------------------------------- /figs/core-pochi.tiff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wakita/visual_programming_paper/HEAD/figs/core-pochi.tiff -------------------------------------------------------------------------------- /figs/movie-clip.pdf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wakita/visual_programming_paper/HEAD/figs/movie-clip.pdf -------------------------------------------------------------------------------- /figs/movie-gray.pdf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wakita/visual_programming_paper/HEAD/figs/movie-gray.pdf -------------------------------------------------------------------------------- /figs/web/mf-web.pdf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wakita/visual_programming_paper/HEAD/figs/web/mf-web.pdf -------------------------------------------------------------------------------- /figs/web/mft-web.pdf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wakita/visual_programming_paper/HEAD/figs/web/mft-web.pdf -------------------------------------------------------------------------------- /figs/web/tex-web.pdf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wakita/visual_programming_paper/HEAD/figs/web/tex-web.pdf -------------------------------------------------------------------------------- /figs/movie-ja-gray.pdf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wakita/visual_programming_paper/HEAD/figs/movie-ja-gray.pdf -------------------------------------------------------------------------------- /figs/scratch-block.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wakita/visual_programming_paper/HEAD/figs/scratch-block.png -------------------------------------------------------------------------------- /figs/scratch-block.tiff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wakita/visual_programming_paper/HEAD/figs/scratch-block.tiff -------------------------------------------------------------------------------- /figs/scratch-sprite.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wakita/visual_programming_paper/HEAD/figs/scratch-sprite.png -------------------------------------------------------------------------------- /figs/scratch-state.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wakita/visual_programming_paper/HEAD/figs/scratch-state.png -------------------------------------------------------------------------------- /figs/scratch-state.tiff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wakita/visual_programming_paper/HEAD/figs/scratch-state.tiff -------------------------------------------------------------------------------- /figs/web/gftopk-web.pdf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wakita/visual_programming_paper/HEAD/figs/web/gftopk-web.pdf -------------------------------------------------------------------------------- /figs/web/gftype-web.pdf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wakita/visual_programming_paper/HEAD/figs/web/gftype-web.pdf -------------------------------------------------------------------------------- /figs/web/glue-web.pdf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wakita/visual_programming_paper/HEAD/figs/web/glue-web.pdf -------------------------------------------------------------------------------- /figs/web/pktype-web.pdf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wakita/visual_programming_paper/HEAD/figs/web/pktype-web.pdf -------------------------------------------------------------------------------- /figs/web/pltotf-web.pdf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wakita/visual_programming_paper/HEAD/figs/web/pltotf-web.pdf -------------------------------------------------------------------------------- /figs/web/tangle-web.pdf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wakita/visual_programming_paper/HEAD/figs/web/tangle-web.pdf -------------------------------------------------------------------------------- /figs/web/tftopl-web.pdf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wakita/visual_programming_paper/HEAD/figs/web/tftopl-web.pdf -------------------------------------------------------------------------------- /figs/web/vftovp-web.pdf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wakita/visual_programming_paper/HEAD/figs/web/vftovp-web.pdf -------------------------------------------------------------------------------- /figs/web/vptovf-web.pdf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wakita/visual_programming_paper/HEAD/figs/web/vptovf-web.pdf -------------------------------------------------------------------------------- /figs/web/weave-web.pdf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wakita/visual_programming_paper/HEAD/figs/web/weave-web.pdf -------------------------------------------------------------------------------- /OMakeroot: -------------------------------------------------------------------------------- 1 | .PHONY: clean 2 | .PHONY: p 3 | 4 | open build/LaTeX 5 | 6 | DefineCommandVars() 7 | 8 | .SUBDIRS: . 9 | -------------------------------------------------------------------------------- /figs/core-pochi-gray.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wakita/visual_programming_paper/HEAD/figs/core-pochi-gray.png -------------------------------------------------------------------------------- /figs/scratch-program.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wakita/visual_programming_paper/HEAD/figs/scratch-program.png -------------------------------------------------------------------------------- /figs/scratch-program.tiff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wakita/visual_programming_paper/HEAD/figs/scratch-program.tiff -------------------------------------------------------------------------------- /figs/scratch-sprite.tiff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wakita/visual_programming_paper/HEAD/figs/scratch-sprite.tiff -------------------------------------------------------------------------------- /figs/web/dvitype-web.pdf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wakita/visual_programming_paper/HEAD/figs/web/dvitype-web.pdf -------------------------------------------------------------------------------- /figs/web/gftodvi-web.pdf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wakita/visual_programming_paper/HEAD/figs/web/gftodvi-web.pdf -------------------------------------------------------------------------------- /figs/web/pooltype-web.pdf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wakita/visual_programming_paper/HEAD/figs/web/pooltype-web.pdf -------------------------------------------------------------------------------- /figs/scratch-block-gray.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wakita/visual_programming_paper/HEAD/figs/scratch-block-gray.png -------------------------------------------------------------------------------- /figs/scratch-scan-array.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wakita/visual_programming_paper/HEAD/figs/scratch-scan-array.png -------------------------------------------------------------------------------- /figs/scratch-scan-array.tiff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wakita/visual_programming_paper/HEAD/figs/scratch-scan-array.tiff -------------------------------------------------------------------------------- /figs/scratch-sentential.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wakita/visual_programming_paper/HEAD/figs/scratch-sentential.png -------------------------------------------------------------------------------- /figs/scratch-sentential.tiff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wakita/visual_programming_paper/HEAD/figs/scratch-sentential.tiff -------------------------------------------------------------------------------- /figs/scratch-sprite-gray.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wakita/visual_programming_paper/HEAD/figs/scratch-sprite-gray.png -------------------------------------------------------------------------------- /figs/scratch-state-gray.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wakita/visual_programming_paper/HEAD/figs/scratch-state-gray.png -------------------------------------------------------------------------------- /figs/scratch-program-gray.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wakita/visual_programming_paper/HEAD/figs/scratch-program-gray.png -------------------------------------------------------------------------------- /figs/spro10.graffle/image4.pdf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wakita/visual_programming_paper/HEAD/figs/spro10.graffle/image4.pdf -------------------------------------------------------------------------------- /figs/scratch-scan-array-gray.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wakita/visual_programming_paper/HEAD/figs/scratch-scan-array-gray.png -------------------------------------------------------------------------------- /figs/scratch-sentential-gray.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wakita/visual_programming_paper/HEAD/figs/scratch-sentential-gray.png -------------------------------------------------------------------------------- /figs/spro10.graffle/QuickLook/Preview.pdf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wakita/visual_programming_paper/HEAD/figs/spro10.graffle/QuickLook/Preview.pdf -------------------------------------------------------------------------------- /figs/spro10.graffle/QuickLook/Thumbnail.tiff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wakita/visual_programming_paper/HEAD/figs/spro10.graffle/QuickLook/Thumbnail.tiff -------------------------------------------------------------------------------- /OMakefile: -------------------------------------------------------------------------------- 1 | LATEX = platex 2 | LATEXFLAGS = -shell-escape 3 | DVIPDFM = dvipdfmx # -l 4 | BIBTEX = pbibtex 5 | 6 | BIB = $(HOME)/research 7 | TEXINPUTS = :.//:$(BIB) 8 | 9 | LaTeXDocument(main, main) 10 | 11 | .DEFAULT: main.pdf 12 | 13 | .PHONY: debug 14 | echo $(TEXINPUTS) 15 | 16 | clean: 17 | /bin/rm -f *.{aux,bbl,blg,dvi,fls,log,out} 18 | 19 | p: main.pdf 20 | /usr/bin/open -a Preview main.pdf 21 | -------------------------------------------------------------------------------- /README.markdown: -------------------------------------------------------------------------------- 1 | # はじめに 2 | 3 | 2010年度に_夏のプログラミングシンポジウム_（以後，_夏プロ_）が長野県白馬で開催され，私（脇田建）は _Objects, Prototypes, and Liveness_ という題目でヴィジュアルプログラミングに関する話をしました．この年の夏プロでは，会議に開催後に postceedings という形で会議録が作成されることとなりました．この会議録は2011年1月に開催されるプログラミングシンポジウム（冬プロ）の冊子体の会議録の一部として発行されるそうです． 4 | 5 | 会議録の印刷の都合上，モノクロ印刷となること，ページ数が限定され，十分な議論が尽せなかったことので，夏プロの原稿を元に画像をカラーにし，内容を徐々に充実させつつ，github を通して発表することにしました． 6 | 7 | 普通のウェブページで PDF のみを公開するだけでもよかったのですが，github を使い始めたこともあり，論文の全データを公表することとしました．platex で論文を書く参考にしていただいても結構です．ただ，今回はエッセイ風の比較的柔らかい内容と形式をとったので，卒論指導などにはご利用いただかない方がいいでしょう． 8 | 9 | # 悩み 10 | 11 | main.pdf が論文本体なので，これをダウンロードしていただければよいのですが，私が使っている Mac OS X の Safari や Chrome では，これをダウンロードしてもデータが壊れてしまい，表示できません．みなさんにも不便をおかけして恐縮です．どなたか github に詳しい方，適切な設定方法をご存じでしたらご教示下さい． 12 | 13 | # 著作権について 14 | 15 | ここに公開する全データの著作権は脇田建に属し，その権利は著作権法によって保護されています．当然のことながら，無断で内容を改変することは禁じます． 16 | 17 | 脇田建の書面による了解を得た方にのみ，その内容に書かれた範囲での利用を認めます．面白い利用には応じますのでご相談下さい． 18 | 19 | # 連絡先 20 | 21 | ご連絡には電子メール（わきた あっと is.titech.ac.jp）をご利用下さい． 22 | -------------------------------------------------------------------------------- /main.tex: -------------------------------------------------------------------------------- 1 | % vim: foldmarker=\Section,%EndSection 2 | % vim: syntax=off 3 | 4 | \documentclass [11pt] {jsarticle} 5 | 6 | \newcommand\maybegray{} % Color 7 | % \newcommand\maybegray{-gray} % Gray 8 | 9 | \newcommand\Section[1]{\newpage \section {#1}} 10 | 11 | \usepackage [hmargin={2.0cm,2.0cm},vmargin={2.0cm,3.0cm}] {geometry} 12 | \usepackage [dvipdfm] {graphicx} 13 | \usepackage [dvipdfm,table]{xcolor} 14 | \usepackage {amsmath,floatflt,url,alltt} 15 | 16 | \definecolor{bgcolor}{gray}{0.85} 17 | 18 | \pagestyle {empty} 19 | 20 | \newcommand\raisedrule[2][0em]{\leaders\hbox{\rule[#1]{1pt}{#2}}\hfill} 21 | \newcommand\HFill{\hspace {1zw}\raisedrule[1ex]{.5pt}\hspace {1zw}} 22 | 23 | \newcommand\var[1]{\textrm {\textit {#1}}} 24 | \newcommand\rsv[1]{\textrm {\textbf {#1}}} 25 | \newcommand\mth[1]{\textrm {\textsf {#1}}} 26 | \newcommand\cls[1]{\textrm {\textsf {#1}}} 27 | 28 | \renewcommand\abstractname {概要/Abstract} 29 | \title {ビジュアルプログラミングについての一考察\\ A Thought on Visual Programming} 30 | \author {脇田 建/Ken Wakita\\ 31 | 東京工業大学大学院 数理・計算科学専攻\\[1ex] 32 | Department of Mathematical and Computing Sciences, \\ 33 | Tokyo Institute of Technology} 34 | \date {} 35 | 36 | %EndSection 37 | 38 | \begin {document} 39 | 40 | \maketitle 41 | \thispagestyle {empty} 42 | 43 | \begin {abstract} 44 | 今年の夏学期に初年次情報教育で始めてMIT Scratchを用いてプログラミング実習を行った．ビジュアル言語の効果は計り知れなかった．伝統的なプログラミング教育で多くの優秀な学生の理解を阻んだ内容を，専門教育を受けていない学生たちはいとも軽々と乗り越えていった．本稿では，ビジュアルプログラミング言語と従来のプログラミング言語の本質的な差を\emph {構造化}と見定め，ビジュアル言語の利点を説き，その将来性について論じる．\footnote {ページ数の制限から本稿に書ききれなかった内容も多々あります．今後，内容をさらに充実させたものを随時公表していこうと思っております．本稿の内容にご興味をいただきましたら，このURL (\url {feed:https://github.com/wakita/visual_programming_paper/commits/master.atom}) をご購読下さい．}\bigskip 45 | 46 | During a programming course that the author gave to freshmen for this summer semester, he was severely shocked to see them happily learning with MIT Scratch, who often find difficulty in learning traditional text-based programming languages. Based on the insight that the essence of visual programming as \emph {structured-ness}, the article demonstrates advantages of visual programming and its future potential. 47 | \end {abstract} 48 | 49 | \Section {私家版ビジュアルプログラミング 50 | \HFill 構造化と見極めたり} 51 | 52 | \begin {figure} 53 | \centerline {\includegraphics [width=.95\linewidth] {figs/scratch-program\maybegray.png}} 54 | \caption {MIT Scratchで記述したKoch曲線を描くプログラムの記述例} 55 | \label {fig: an example of Scratch program} 56 | \end {figure} 57 | 58 | ビジュアルプログラミング言語とは，従来のテキストで記述するプログラミング言語に対して，そうではないもの，そしてプログラミングにおける諸概念を図示したものとして理解されているように思う．本稿を執筆するにあたって，この漠然とした考え方よりはかなり狭い意味における\emph {私家版ビジュアルプログラミング}を説明したい． 59 | 60 | まず，既存のビジュアルプログラミング言語の代表としてMIT Media Lab. で開発された\emph {Scratch}\cite {esnick09Scratch:-Programming-for-All}\footnote {\url {http://scratch.mit.edu/}}を取り上げる（図\ref {fig: an example of Scratch program}参照）．ScratchはLOGO\cite {Papert80Mindstorms:-children-computers}, Lego Mindstorm\footnote {\url {http://mindstorms.lego.com/}}, Scratch と MIT で 30年にわたる研究活動の最新の成果である．この言語はいくつかの意味でビジュアルである． 61 | 62 | \begin {floatingfigure}[r]{.10\linewidth} 63 | \includegraphics [height=7ex] {figs/scratch-sprite\maybegray.png} 64 | \end {floatingfigure} 65 | 第一に，Scratchを起動すると現れる猫の振る舞いを記述することがScratchにおけるプログラミングの基本である．プログラムの動作の結果は猫の動作として可視的にフィードバックされる意味においてプログラミングの効果がビジュアルである． 66 | 67 | \begin {floatingfigure}[r]{.16\linewidth} 68 | \includegraphics [height=7ex] {figs/scratch-block\maybegray.png} 69 | \end {floatingfigure} 70 | 次に，Scratch におけるプログラムは，ブロックを組み合わせ，パラメターを指定することによって記述される．プログラミング言語の構文要素を文字を連ねて記述するかわりに，構文構造に対応したブロックを\emph {直接操作} (\emph {direct manipulation})して組み合わせる点，すなわちプログラムを構築する作業がユーザインタフェイスを通して行われる点でビジュアルである． 71 | 72 | 最後に，Scratchのプログラムの状態は基本的には，猫の位置と速度と向きといった物理状態の他，コスチュームと呼ばれる見た目の様子などのわずかな状態量を基本としているが，より複雑な振る舞いを記述する目的で変数やリストも利用できる．これらに代入された値を猫の振る舞いから推し量ることは困難である．そのため，Scratchは必要に応じて変数やリストをモニターする機能があり，これを簡易ビジュアルデバッガと見ることもできる．この意味でもビジュアルといえる． 73 | \begin {floatingfigure}[r]{.32\linewidth} 74 | \includegraphics [height=7ex] {figs/scratch-state\maybegray.png} 75 | \end {floatingfigure} 76 | 77 | 本稿が対象とするビジュアルプログラミング言語は，第一，あるいは第三の可視性よりもむしろ，第二の構文要素（抽象構文木の要素）が直接操作できる点を重視する．以下では，この構文要素だけでなく，プログラム実行中のデータを含めた\emph {プログラミングにおける諸概念を直接操作できることをビジュアルプログラミングの本質}とした上で，このことがプログラミング作業，プログラミング言語の設計と実装とどのように関わるのかを論ずる． 78 | 79 | 従来のプログラミング言語処理系はテキストで記述されたプログラムを入力とし，その内容に応じて処理を行ってきた．プログラムの処理においては，普通はプログラムをトークン列に分解してから，構文解析によって抽象構文木を構成する．抽象構文木はプログラムに記載された内容のうち，プログラムの意味を司るすべてを網羅したデータ構造である．この意味で，プログラミング言語においては抽象構文木こそがプログラムの意味を表していると考えるべきであろう．一方，プログラムは抽象構文木の内容をテキストで表現するための形式で記述されている．プログラムのテキスト表現には，構文理論上の曖昧性を排除しつつ，抽象構文木を構成するために十分な情報を含むことが求められる．したがって\emph {具象構文}と呼ばれるプログラムの字面上の文法は抽象構文に比べると格段に複雑である． 80 | 81 | 例えば，整数を含む配列の内容を1ずつ増加するJavaのプログラムについて考えてみよう．以下のコードのなかでいくつの句読点の類いが用いられているだろうか．セミコロンが3箇所，括弧と波括弧が対をなし，あわせて7つの記号が用いられている．これらの記号の目的は，以下のコードを正確に構文解析することにある．実際，Javaの抽象構文木にセミコロン，括弧，波括弧はない．\bigskip 82 | 83 | \begin {tabular}{cc} 84 | \begin {minipage}[b]{.48\linewidth} 85 | \begin{alltt} 86 | \rsv{for} (\rsv{int} \var{i} = 0; \var{i} < \var{v}.\mth{length}; \var{i}++) \{ 87 | \var{v}[\var{i}]++; 88 | \} 89 | 90 | \end{alltt} 91 | \end {minipage} & 92 | \includegraphics [width=.45\linewidth] {figs/scratch-scan-array\maybegray.png} 93 | \end {tabular}\bigskip 94 | 95 | 宮下らが超好意的解釈をする言語処理系\cite{Nakahashi10HMMMML2}の設計にあたって行った調査内容から見えてくるのは，プログラムの実行にとって非本質的な言語要素が初級プログラマを苦しめている事実である． 96 | 97 | 逆に，抽象構文木が直接扱えるということは，従来のプログラミング言語から構文解析のみのために必要とされ，構文解析以後は不要となる瑣末なものを一切除去できることを意味している．これにより，これまで我々を悩ませてきた文法上の間違いは一掃されることであろう． 98 | 99 | 抽象構文木を直接編集する限り，具象構文は不要となる．この意味でビジュアルプログラミング言語は具象構文を持たないプログラミング言語と言ってよい．すでに述べたように，句読点の有無などは具象構文の構文解析にとってのみ必要とされる．したがって，LISPに対する括弧の多寡，行末のセミコロンの省略への対応の有無などといったことはビジュアルプログラミング言語にとっては無意味な議論である． 100 | 101 | %EndSection 102 | 103 | \Section {ビジュアルプログラミング言語が変える言語実装法} 104 | 105 | コンパイラの標準的な教科書を開いてみよう．たとえば，Ahoらにコンパイラの名著の場合\cite {Aho06Compilers:-Principles-techniques}，全12章のうち，第2章から第4章までが字句解析と構文解析などのコンパイラ前処理部に割かれており，さらに付録全体(Appendix A: Complete Front End)も前処理部の事例となっている． 106 | 107 | すでに述べたように，前処理部の目的はテキスト形式で表現されたプログラムを構文解析して抽象構文木を作成することにある．もし，プログラムが抽象構文木を直接編集しながら構成されていたとしたら，テキスト形式のプログラムを構文解析する必要はなくなる．ビジュアルプログラミングが普及すれば，プログラミング言語の開発者は最適化やコード生成のようなプログラミング言語のより本質的な仕事に注力できるだろう． 108 | 109 | それでも注意深い読者は，GUIを通して作成されたプログラムをどのように保存すればよいのか，もしテキスト形式で保存するのであればもとの黙阿弥ではないかと心配になるかもしれない．プログラムの保存方法については，抽象構文木を編集していたときのメモリー状態をそのまま記録すればよい．メモリダンプでも，データの直列化(serialize)でも構わないだろうが，抽象構文木の構造を保存した形式で保存することが重要である． 110 | 111 | ビジュアルプログラミング言語のエディタに求められる中心的な機能は，抽象構文木の編集である．基本的には，複数の子ノードからなる森を親ノードでまとめるボトムアップな編集と，親ノードの穴を漸次埋めていくトップダウンな編集に加えて，既存の子ノードを別の木で置き換える操作が求められるであろう．\cite {sasaki10GUI-component-visual} 112 | 113 | \begin {floatingfigure}[r]{.30\linewidth} 114 | \includegraphics [width=.25\linewidth] {figs/scratch-sentential\maybegray.png} 115 | \end {floatingfigure} 116 | いずれの編集作業においても，編集中のプログラムが未完成であることを考えると，実際に編集している時点では抽象構文木も未完成である．このような未完成の抽象構文木は，\emph {文形式} (\emph {sentential form})として形式化することができる．文脈自由文法で表された抽象構文$G = (N, T, P, S)$の文形式とは，非終端記号$X$から導出される文法記号の列$\alpha$のことである．たとえば，右図は\rsv {while}文に相当する非終端記号から以下のように導出された文形式と考えることができる． 117 | 118 | 119 | \begin {quote} 120 | \rsv {while} □ □ → 121 | \rsv {while} □ \fbox {\rsv {assign} □ □} → \\ \smallskip 122 | \rsv {while} \fbox {□ $<$ □} \fbox {\rsv {assign} □ □} → 123 | \rsv {while} \fbox {□ $<$ □} \fbox {\rsv {assign} \fbox {\var {i}} □} → \\ \smallskip 124 | \rsv {while} \fbox {\fbox {\var {i}} $<$ □} \fbox {\rsv {assign} \fbox {\var {i}} □} → 125 | \rsv {while} \fbox {\fbox {\var {i}} $<$ □} \fbox {\rsv {assign} \fbox {\var {i}} \fbox {\fbox {\var {i}} + \fbox {1}}} 126 | \end {quote} 127 | 128 | そして，図中の穴に変数$n$を表すブロックを埋め込む操作は，最後の文形式のなかの穴（□)からこの変数を表す終端記号$n$を導出する操作に過ぎない．MIT Scratchではブロックの穴に別のブロック群をドラッグ＆ドロップ操作で埋めるときに，この組み合わせが抽象構文において妥当な組み合わせか否かを検査する．この検査は，実は穴に対応する非終端記号からブロック群のもととなっている非終端記号を直接的に導出できるか否かを判定しているにすぎないため容易に実装することができる． 129 | 130 | たとえば，上図の穴に変数を表すブロックをドロップすることは許されるが，文を表すブロックをドロップをドロップすることは許されない．このことは穴に対応する非終端記号が式であるため，「式 → 変数」という導出規則は存在しても，「式 → 文」という導出規則がないことから判定できる． 131 | 132 | %EndSection 133 | 134 | \Section {見えているものは正しい 135 | \HFill 可視性} 136 | 137 | \centerline {\includegraphics [width=.8\linewidth] {figs/core-pochi\maybegray.png}} 138 | 139 | ビジュアルプログラミングにおける\emph {ビジュアル}とはプログラミングに関わる諸概念が可視化されることを意味する．すでにプログラムの構造を可視化し，直接操作することの重要性について論じたが，ここではプログラムが扱う\emph {データの可視化とその直接操作}について論じたい．プログラムが扱う任意のデータを表示し，操作する機能はプログラムのデバッグに欠かすことができない．そこでは，単純なヴィジュアリゼイションと異なり，コンピュータ内のデータの内容を忠実に表示するだけでなく，表示されたものを直接的に操作してデータの内容を更新できることが求められる．すなわち，編集対象となっているコンピュータ内のデータとその画面表示との間の一貫性と保つことが重要である． 140 | 141 | 上図は犬を仮想化したオブジェクトの画面表示である．一般的な犬の概念を表す\cls {Dogs} オブジェクトを元に我が家の愛犬ポチを表す\cls {my dog}オブジェクトが構成されている．この例では一般的な犬は``Bow wow''と吠えるが，ポチは普段は``ワンワン''と吠え，空腹時は``ヒュルルルル〜''と飢餓を訴えることとしている．ポチの空腹感を表すために\cls {my dog}は\mth {hungry}フィールドを用意している． 142 | 143 | この画面の\cls {my dog}の\mth {hungry}欄を修正して``\texttt {true}''と書き換えたならば，その瞬間にコンピュータ内部にあるポチに対応したオブジェクトの\mth {hungry}フィールドも\rsv {true}に更新され，したがってその状態で\mth {bark}メソッドが呼ばれたなら，ポチは``ヒュルルルル〜''と鳴くべきである． 144 | 145 | また一方，プログラム実行の最中に ``\var {my dog}.\mth {hungry} ← \rsv {false}'' が実行され，ポチに対応したオブジェクトの\mth {hungry}の値が\rsv {true}から\rsv {false}に更新されたなら，その瞬間にこのオブジェクトに対応した，上図の\cls {my dog}の\mth {hungry}欄の表示も``\texttt {false}''から``\texttt {true}''に変化すべきである． 146 | 147 | さて，システム内に数百万個ものオブジェクトがあったとして，それらすべての変化を監視しつつ，変化を逐一，画面に反映させるとしたら大変な計算コストがかかってしまう．実際に，そのようなことは不可能ではないだろうか． 148 | 149 | もちろん，システム内のすべてのオブジェクトの変化を画面に実時間で反映させることは不可能である．しかしながら，人間が視認可能な変化に限れば，それは十分に可能である．如何にシステム内に存在するオブジェクトが多かったとしても，画面に表示できるデータの最大数は，画面の大きさと人間の目の解像度に依存した可視的な不動産の面積に制約され，さほど多くはない．どんなに多くても高々数千個といったところであろう．画面に表示されているフィールドに限ってObserverを設定すれば，多くの用途において十分に良好な反応性を実装できるであろう．ごく稀な例として，これらのフィールドが満遍なく，集中的に変化する場合には，仮に十分に高速に表示できたとしても，変化の速さは人間の認知の限界を越えてしまい意味がない．このような場合は情報の抽象化などの対応を検討すべきである． 150 | 151 | % objects vs. visuals: causal relationship 152 | 153 | %EndSection 154 | 155 | \Section {百聞は一見にしかず 156 | \HFill マルチメディア，国際化，複数ビュー} 157 | 158 | ビジュアルプログラミングのもうひとつの利点は，プログラムがGUIを得ることによって，従来，テキストでの表現が困難だったものをプログラムに含めることができる点である．すなわち，テキストでは表現しにくい，マルチメディアコンテンツとしてのプログラムが作成できるようになる．映像コンテンツを表示し連続再生するプログラムを記述するのに，映像コンテンツを直接プログラミングシステムで開き，アイコンとして表示した上で，適宜，再生方式を設定してから，それを参照した関数に再生機能をプログラムできればどんなに楽だろう．\bigskip 159 | 160 | \bgroup 161 | \rowcolors {1}{bgcolor}{lightgray} 162 | \begin {tabular}{cc} 163 | \begin {minipage}[b]{.66\linewidth} 164 | \begin{alltt}\renewcommand\baselinestretch{.85}\normalsize 165 | [\cls{QTMovie} \var{movie} = 166 | [[\cls{QTMovie} 167 | \mth{movieNamed}: @"sample.mov" 168 | \mth{error}: &\var{error}] 169 | \mth{retain}]; 170 | [\var{movie} 171 | \mth{setAttribute}:[\cls{NSNumber} \mth{numberWithBool}:\rsv{YES}] 172 | \mth{forKey}: \rsv{QTMovieLoopsAttribute}]; 173 | [\var{movieView} \mth{setMovie}: \var{movie}] 174 | [\var{movie} \mth{play}] 175 | \end{alltt} 176 | \end {minipage} 177 | & 178 | \includegraphics [width=.25\linewidth] {figs/movie\maybegray.pdf} 179 | \end {tabular} 180 | \egroup 181 | \bigskip 182 | 183 | \begin {floatingfigure}[r]{.30\linewidth} 184 | \includegraphics [width=.25\linewidth] {figs/movie-ja\maybegray.pdf} 185 | \end {floatingfigure} 186 | マルチメディアは複数のメディアを組み合わされてひとつのコンテンツを構成する技術である．このことはごく自然にコンテンツを構造化する技術を生んだ．コンテンツが構造化することによって，さまざまな利用シーンに対応して異なる方法でコンテンツを提示する技術も発展した．そのひとつの応用例が，ソフトウェアの多言語化である．本稿ではビジュアルプログラミングの本質をプログラミングにおける諸概念の構造化としているが，このことはごく自然にプログラムの多言語化を可能にするだろう．これまでも独自の国語を基礎としたプログラミング言語や，アプリケーションの国際化の例はあった．ビジュアルプログラミングの世界では，右図のように同じプログラミング言語を国際化して，複数の自然言語を通して見せることができるようになる． 187 | 188 | ビジュアルプログラミングが提供するもう一つ可能性は，同じ概念に対する複数のビューを提供できる点である．MVC (Model-View-Control) モデルはひとつのデータに対して複数の見せ方を提供できる考え方である．たとえば数値の配列を考えてみよう．この配列の内容を子細に調査したい場合には，その要素のデータを閲覧したいだろう．この配列をソートした直後であれば，要素を折れ線グラフにプロットして表示すれば正しく正準化されているか容易に確認できる．この数値データが日本の海岸線の緯度経度を列挙したものであれば，それを散布図に表示すれば，データのなかに誤りがないか容易に確認できる．同じデータに対して必要に応じて異なるビューを与えることは，アプリケーションのユーザにとって便利なだけでなく，プログラマにとっても都合がよいに違いない． 189 | 190 | % multiple views 191 | 192 | %EndSection 193 | 194 | \Section {頭に入る複雑さ 195 | \HFill 文芸的プログラミングという抽象化} 196 | 197 | 仮にビジュアルプログラミングされたプログラムが理解しやすく，そのためプログラミングの生産性が飛躍的に向上したとしても，大規模なプログラミングができなければあまり大きな意味をもたない．はたして，ビジュアルプログラミングで大規模なシステムを構築することはできるだろうか．残念ながら既存のビジュアルプログラミングで大規模なシステムを記述した例はなく，たとえばビジュアルプログラミングシステムを用いて記述されたビジュアルプログラミングシステムというものも存在しない． 198 | 199 | ビジュアルプログラミングにおいてはプログラミングにおける諸概念を可視化部品として表現して画面上に配置する．ひとつの画面に配置可能な可視化部品の点数には自ずから限度があり，それ以上に複雑なものを構成することはできない．MIT Scratch は巨大な仮想画面を用意してそこに自由に配置することを許しているが，実際に二次元的な広がりを持った仮想画面を上下左右にスクロールして閲覧することは困難である．テキストエディタでのスクロールが成功しているのは，テキストで記述されたプログラムが原則として上下方向の一次元的空間に記述されているためである． 200 | 201 | このため，大規模なビジュアルプログラミングをするためにはソフトウェアを注意深くモジュール化し，画面の限られた空間に配置することが求められる．はたして，そのようなことは可能だろうか．以下では，安定性についての評価が高い中規模のソフトウェアの代表としてKnuth博士が実装した\TeX{}システムを例として見ていきたい． 202 | 203 | 以下の図は，\TeX のソースコード兼文書となる \texttt {tex.web}\footnote {\TeX{}システムのユーザならば，\texttt {"kpsewhich tex.web"}コマンドを実行すれば，このファイルを見つけられる．}のモジュールの大きさを棒グラフで表したものである． 204 | 205 | \centerline {\includegraphics [width=.80\linewidth]{figs/web/tex-web.pdf}} 206 | 207 | \TeX を構成する1379モジュールのうち，100行を越えるものは5つにすぎず，最大のものも237行のみである．しかも，ここでの行数はプログラムだけではなく，極めて念入りに叙述されたプログラムの説明を含めての分量であり，実際のプログラムの量はこれよりもかなり少ない．このことは\TeX に限ったことではなく，Knuth博士が書いたプログラムはすべてこの傾向にあることは次ページのデータが示している． 208 | 209 | \newcommand\webfile[1]{\textbf {#1} & 210 | \includegraphics [height=3ex,width=.80\linewidth] {figs/web/#1-web.pdf}} 211 | 212 | \begin {tabular}{ll} 213 | \webfile {gftodvi} \\ 214 | \webfile {mf} \\ 215 | \webfile {pltotf} \\ 216 | \webfile {tangle} \\ 217 | \webfile {tex} \\ 218 | \webfile {vptovf} \\ 219 | \webfile {weave} 220 | \end {tabular} 221 | \bigskip 222 | 223 | 1990年に発表された\TeX システム第3.0版は，その安定性についての定評が高い．実際，現在の最新版のバージョン番号(3.1415926)の小数点以下の桁数(=7)は，これまでに見つかった\TeX~3.0のバグの総数である．このように極めて安定したソフトウェアが構築された背景に\emph {文芸的プログラミング}\cite {Knuth92Literate-programming}\footnote {Literate Programming: \url {http://www.literateprogramming.com}}の大きな貢献を信じるのは私だけではないだろう． 224 | 225 | \TeX システムのプログラムは文芸的プログラミングの実践の場であり，それを広く専門家の目に晒すことで世にその真価を問いかける場でもある．実際，\TeX システムの文書はそのまま書籍\cite {Knuth86TeX:-The-Program}として出版されたほどである．そのため，\TeX システムの記述にあたって，Knuthは\TeX システムのモジュール化と文書化には細心の注意を払ったものと想像される． 226 | 227 | この事実から察することができるのは，かなりの規模のソフトウェアでも，優秀なソフトウェア開発者が注意深く設計・実装した場合には，比較的小さなモジュールの集りとして構成できるということである．このことは，さらに多くの検証を待つ必要がある．しかし，ビジュアルプログラミングにおいて，画面に収まる程度までモジュールの粒度を小さく保つことができる可能性を示唆していると考えてもよいだろう．むしろ，良質なソフトウェアを生産するためには，その程度までモジュールを小さく分割することこそが重要なのではないだろうか． 228 | 229 | ところで，Knuthが始めた文芸的なプログラミングは単にプログラム中に大量のコメントを記述したものではない．文芸的なプログラミングでは，プログラムの一部に穴をあけ，別のモジュールを埋め込むようなことができる．たとえば，以下は筆者が試みに行った文芸的プログラミングの例\footnote {文芸的ウェブプログラミング: \url {http://ken-wakita.net/research/classes/cs1-2010/F1.pdf}}だが，ここで$\langle\text {と}\rangle$に囲われた箇所には，該当するモジュールが挿入される．通常のプログラミング言語には，クラス，関数，手続きといった抽象化機構は用意されているが，これらはプログラミング言語の文法の制約のなかで成立した機構である．文芸的プログラミングにおけるモジュールは，このような制約から脱皮することで，プログラムのより自由な抽象化を許し，従来は不可能であった抽象的な記述を可能としている． 230 | 231 | \centerline {\includegraphics [scale=.85] {figs/F1JPaint.pdf}} 232 | 233 | % abstraction (data, procedural, class-based) 234 | % 理解に関する抽象化 235 | 236 | %EndSection 237 | 238 | \Section {ご質疑をいただきありがとうございました} 239 | 240 | シンポジウムの場での質問やコメントに感謝しつつ．ご質問の内容にお答え申しあげます． 241 | 242 | \begin {itemize} 243 | 244 | \item オブジェクト＝モノを強調すると抽象概念を表現できない人が生れる． 245 | \HFill 伊知地宏さん\medskip 246 | 247 | この発想はありませんでした．確かにそういう誤解を与える傾向があるかもしれません．今後，参考にして，誤解を与えないような工夫をしていきます． 248 | \medskip 249 | 250 | \item 再帰はどのように表現するのか？ 251 | \HFill 伊知地宏さん\medskip 252 | 253 | 再帰はプログラミングに欠かせないと思っています．今は（再帰を有する）ECMA Scriptの仕様を基礎にビジュアル言語を設計しています．再帰の記述については特別な工夫はありません．なお，児童向けのプログラミング言語として研究開発されてきたLOGO, Lego MindStorm, MIT Scratchの流れにおいて，元々LOGOにはあった再帰がいつのまにか欠落していました．これが教育心理学的な問題によるものか，そうではないのかは知らないのですが，その設計方針の変更については追っていきたいです． 254 | \medskip 255 | 256 | \item 100行のテキスト編集に比べて，そのGUIでの描画は大変ではないか？ 257 | \HFill 添田俊介さん\medskip 258 | 259 | MIT Scratchの場合，制御構造ひとつを導入するだけで，制御構造の道具箱から拾ってくる操作をしなくてはならないため，熟練したプログラマがキーボードから簡単に入力することに比べてかなり面倒だと思います．ただ，この現状がビジュアルプログラミングの限界だと考えるのは間違いだと思います．今後，人間工学的に最適化することで，生産性をテキストエディタ以上に高めるようなプログラミング環境を開発すべきだと思っています．ただ，実のところコードの記述に関しては，テキストエディタとビジュアルエディタはあまり大きさ差はないのではないかという感触もあるのですが，それについては将来の研究を期待して下さい． 260 | \medskip 261 | 262 | \item 萩谷昌己さんのBoomborg\footnote {Boomborg-Keisan: \url {http://hagi.is.s.u-tokyo.ac.jp/boomborg/boomborg-keisan-j.html}}のような計算過程の可視化は考えているのか？ 263 | \HFill 伊知地宏さん\medskip 264 | 265 | ビジュアルプログラミング環境として，プログラムが実行している最中に，そのプログラムのなかで操作されているデータやプログラム自身も修正することができるような環境を想定しています．プログラムの編集，実行，テストという開発における一連の流れを単一の環境で実現することが重要だと思います．そのなかで計算過程をもとにプログラムを構成することも考えております． 266 | \medskip 267 | 268 | \item Knuthのような天才でなくてもモジュール化できるのか？ 269 | \HFill 寺田実さん\medskip 270 | 271 | 今回はKnuthが書いたいくつかのソフトウェアのみを調べただけですので，十分な調査とは言えません．Scratchを使っていて感じたのですが，描画領域が限定されていることはむしろ無駄に長い記述を避け，簡潔な表現を求める動機づけとなります．本質的に複雑なプログラムを一定の面積にその詳細までを表現すること不可能ですので，そのためには一定の抽象化能力が求められます．すべての人が抽象化能力を持っているかどうかは不明ですが，少なくとも面積に関して制約を与えたビジュアルプログラミングがその訓練の場として利用できるでしょう． 272 | 273 | \end {itemize} 274 | 275 | %EndSection 276 | 277 | \Section {おわりに} 278 | 279 | この発表を通して訴えたかったことは，未来のプログラミング言語は従来のプログラミング言語とは大きく異なるということです．現在のプログラミング環境は20世紀に生み出されたものです．文字しか効率的に処理できなかった時代に比べて，ハードウェアは遥かに進歩しました．ITを巡る環境はマルチメディアに溢れかえっています．それなのに，どうしてプログラミング作業だけが旧態然としたテキストエディティングをしているのでしょう． 280 | 281 | わたしには22世紀のプログラマがテキストエディタでプログラミングしている姿は想像できません．わたしはビジュアルプログラミングの未来を信じています．でも，それは間違っているかもしれません．ただ，確信を持っていえることが一つあります．来世紀の人が今と同様の形態でソフトウェアを作成することはありえません． 282 | 283 | もしもプログラミングについての研究を本職と考えるのであれば，来世紀の人々に笑われないものを目指さなくてはなりません．新しいプログラミングの姿について一緒に議論を深めたいと考えている方はぜひご一報下さい． 284 | 285 | \paragraph {謝辞} 日頃，ビジュアルプログラミングの構想について一緒に議論してくれる吉永卓矢さん，甫水佳奈子さん，佐々木晃さんに感謝します．本稿の草稿を読んでくれた加藤真人さん，荒井浩さん，鈴木健太さんに感謝します． 286 | 287 | \bibliographystyle {jplain} 288 | \bibliography {/Users/wakita/research/papers10,/Users/wakita/research/papers09j} 289 | 290 | \end {document} 291 | 292 | %EndSection 293 | 294 | \endinput 295 | -------------------------------------------------------------------------------- /figs/spro10.graffle/data.plist: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | ApplicationVersion 6 | 7 | com.omnigroup.OmniGrafflePro 8 | 138.17.0.133677 9 | 10 | CreationDate 11 | 2010-11-07 17:09:43 +0900 12 | Creator 13 | Wakita Ken 14 | GraphDocumentVersion 15 | 6 16 | GuidesLocked 17 | NO 18 | GuidesVisible 19 | YES 20 | ImageCounter 21 | 5 22 | ImageLinkBack 23 | 24 | 25 | 26 | ImageList 27 | 28 | image4.pdf 29 | 30 | LinksVisible 31 | NO 32 | MagnetsVisible 33 | NO 34 | MasterSheets 35 | 36 | ModificationDate 37 | 2010-11-07 22:03:35 +0900 38 | Modifier 39 | Wakita Ken 40 | NotesVisible 41 | NO 42 | OriginVisible 43 | NO 44 | PageBreaks 45 | YES 46 | PrintInfo 47 | 48 | NSBottomMargin 49 | 50 | float 51 | 41 52 | 53 | NSLeftMargin 54 | 55 | float 56 | 18 57 | 58 | NSPaperSize 59 | 60 | size 61 | {595, 842} 62 | 63 | NSRightMargin 64 | 65 | float 66 | 18 67 | 68 | NSTopMargin 69 | 70 | float 71 | 18 72 | 73 | 74 | ReadOnly 75 | NO 76 | Sheets 77 | 78 | 79 | ActiveLayerIndex 80 | 0 81 | AutoAdjust 82 | 83 | BackgroundGraphic 84 | 85 | Bounds 86 | {{0, 0}, {1118, 783}} 87 | Class 88 | SolidGraphic 89 | ID 90 | 2 91 | Style 92 | 93 | shadow 94 | 95 | Draws 96 | NO 97 | 98 | stroke 99 | 100 | Draws 101 | NO 102 | 103 | 104 | 105 | CanvasOrigin 106 | {0, 0} 107 | ColumnAlign 108 | 1 109 | ColumnSpacing 110 | 36 111 | DisplayScale 112 | 1 0/72 in = 1 0/72 in 113 | GraphicsList 114 | 115 | 116 | Class 117 | Group 118 | Graphics 119 | 120 | 121 | Bounds 122 | {{680.193, 51}, {50.0135, 31}} 123 | Class 124 | ShapedGraphic 125 | ID 126 | 119 127 | Shape 128 | Rectangle 129 | Style 130 | 131 | stroke 132 | 133 | CornerRadius 134 | 9 135 | 136 | 137 | 138 | 139 | Bounds 140 | {{111.793, 51}, {50.0135, 31}} 141 | Class 142 | ShapedGraphic 143 | ID 144 | 120 145 | Shape 146 | Rectangle 147 | Style 148 | 149 | stroke 150 | 151 | CornerRadius 152 | 9 153 | 154 | 155 | 156 | 157 | Bounds 158 | {{598.993, 51}, {50.0135, 31}} 159 | Class 160 | ShapedGraphic 161 | ID 162 | 121 163 | Shape 164 | Rectangle 165 | Style 166 | 167 | stroke 168 | 169 | CornerRadius 170 | 9 171 | 172 | 173 | 174 | 175 | Bounds 176 | {{517.793, 51}, {50.0135, 31}} 177 | Class 178 | ShapedGraphic 179 | ID 180 | 122 181 | Shape 182 | Rectangle 183 | Style 184 | 185 | stroke 186 | 187 | CornerRadius 188 | 9 189 | 190 | 191 | 192 | 193 | Bounds 194 | {{355.393, 51}, {50.0135, 31}} 195 | Class 196 | ShapedGraphic 197 | ID 198 | 123 199 | Shape 200 | Rectangle 201 | Style 202 | 203 | stroke 204 | 205 | CornerRadius 206 | 9 207 | 208 | 209 | 210 | 211 | Bounds 212 | {{274.193, 51}, {50.0135, 31}} 213 | Class 214 | ShapedGraphic 215 | ID 216 | 124 217 | Shape 218 | Rectangle 219 | Style 220 | 221 | stroke 222 | 223 | CornerRadius 224 | 9 225 | 226 | 227 | 228 | 229 | Bounds 230 | {{436.593, 51}, {50.0135, 31}} 231 | Class 232 | ShapedGraphic 233 | ID 234 | 125 235 | Shape 236 | Rectangle 237 | Style 238 | 239 | stroke 240 | 241 | CornerRadius 242 | 9 243 | 244 | 245 | 246 | 247 | Bounds 248 | {{192.993, 51}, {50.0135, 31}} 249 | Class 250 | ShapedGraphic 251 | ID 252 | 126 253 | Shape 254 | Rectangle 255 | Style 256 | 257 | stroke 258 | 259 | CornerRadius 260 | 9 261 | 262 | 263 | 264 | 265 | AllowConnections 266 | NO 267 | AllowLabelDrop 268 | 269 | AllowToConnect 270 | 271 | Class 272 | LineGraphic 273 | ID 274 | 127 275 | Points 276 | 277 | {123.5, 66} 278 | {715.5, 66} 279 | 280 | Style 281 | 282 | stroke 283 | 284 | HeadArrow 285 | 0 286 | TailArrow 287 | 0 288 | Width 289 | 60 290 | 291 | 292 | 293 | 294 | ID 295 | 118 296 | 297 | 298 | Class 299 | Group 300 | Graphics 301 | 302 | 303 | Bounds 304 | {{680.193, 354}, {50.0135, 31}} 305 | Class 306 | ShapedGraphic 307 | ID 308 | 109 309 | Shape 310 | Rectangle 311 | Style 312 | 313 | stroke 314 | 315 | CornerRadius 316 | 9 317 | 318 | 319 | 320 | 321 | Bounds 322 | {{111.793, 354}, {50.0135, 31}} 323 | Class 324 | ShapedGraphic 325 | ID 326 | 110 327 | Shape 328 | Rectangle 329 | Style 330 | 331 | stroke 332 | 333 | CornerRadius 334 | 9 335 | 336 | 337 | 338 | 339 | Bounds 340 | {{598.993, 354}, {50.0135, 31}} 341 | Class 342 | ShapedGraphic 343 | ID 344 | 111 345 | Shape 346 | Rectangle 347 | Style 348 | 349 | stroke 350 | 351 | CornerRadius 352 | 9 353 | 354 | 355 | 356 | 357 | Bounds 358 | {{517.793, 354}, {50.0135, 31}} 359 | Class 360 | ShapedGraphic 361 | ID 362 | 112 363 | Shape 364 | Rectangle 365 | Style 366 | 367 | stroke 368 | 369 | CornerRadius 370 | 9 371 | 372 | 373 | 374 | 375 | Bounds 376 | {{355.393, 354}, {50.0135, 31}} 377 | Class 378 | ShapedGraphic 379 | ID 380 | 113 381 | Shape 382 | Rectangle 383 | Style 384 | 385 | stroke 386 | 387 | CornerRadius 388 | 9 389 | 390 | 391 | 392 | 393 | Bounds 394 | {{274.193, 354}, {50.0135, 31}} 395 | Class 396 | ShapedGraphic 397 | ID 398 | 114 399 | Shape 400 | Rectangle 401 | Style 402 | 403 | stroke 404 | 405 | CornerRadius 406 | 9 407 | 408 | 409 | 410 | 411 | Bounds 412 | {{436.593, 354}, {50.0135, 31}} 413 | Class 414 | ShapedGraphic 415 | ID 416 | 115 417 | Shape 418 | Rectangle 419 | Style 420 | 421 | stroke 422 | 423 | CornerRadius 424 | 9 425 | 426 | 427 | 428 | 429 | Bounds 430 | {{192.993, 354}, {50.0135, 31}} 431 | Class 432 | ShapedGraphic 433 | ID 434 | 116 435 | Shape 436 | Rectangle 437 | Style 438 | 439 | stroke 440 | 441 | CornerRadius 442 | 9 443 | 444 | 445 | 446 | 447 | AllowConnections 448 | NO 449 | AllowLabelDrop 450 | 451 | AllowToConnect 452 | 453 | Class 454 | LineGraphic 455 | ID 456 | 117 457 | Points 458 | 459 | {123.5, 369} 460 | {715.5, 369} 461 | 462 | Style 463 | 464 | stroke 465 | 466 | HeadArrow 467 | 0 468 | TailArrow 469 | 0 470 | Width 471 | 60 472 | 473 | 474 | 475 | 476 | ID 477 | 108 478 | 479 | 480 | AllowConnections 481 | NO 482 | AllowLabelDrop 483 | 484 | AllowToConnect 485 | 486 | Class 487 | LineGraphic 488 | ID 489 | 60 490 | Points 491 | 492 | {622.5, 82} 493 | {622.5, 347} 494 | 495 | Style 496 | 497 | stroke 498 | 499 | HeadArrow 500 | 0 501 | TailArrow 502 | 0 503 | Width 504 | 60 505 | 506 | 507 | 508 | 509 | AllowConnections 510 | NO 511 | AllowLabelDrop 512 | 513 | AllowToConnect 514 | 515 | Class 516 | LineGraphic 517 | ID 518 | 61 519 | Points 520 | 521 | {217.5, 75} 522 | {217.5, 340} 523 | 524 | Style 525 | 526 | stroke 527 | 528 | HeadArrow 529 | 0 530 | TailArrow 531 | 0 532 | Width 533 | 60 534 | 535 | 536 | 537 | 538 | Class 539 | Group 540 | Graphics 541 | 542 | 543 | AllowConnections 544 | NO 545 | Class 546 | Group 547 | Graphics 548 | 549 | 550 | Bounds 551 | {{526.75, 255.25}, {73, 14.5}} 552 | Class 553 | ShapedGraphic 554 | ID 555 | 64 556 | Rotation 557 | 270 558 | Shape 559 | HorizontalTriangle 560 | Style 561 | 562 | fill 563 | 564 | Color 565 | 566 | b 567 | 0.0623871 568 | g 569 | 0.12641 570 | r 571 | 0.258208 572 | 573 | 574 | shadow 575 | 576 | Draws 577 | NO 578 | 579 | stroke 580 | 581 | Draws 582 | NO 583 | 584 | 585 | Text 586 | 587 | VerticalPad 588 | 0 589 | 590 | 591 | 592 | Bounds 593 | {{497.75, 176.75}, {131, 47.5}} 594 | Class 595 | ShapedGraphic 596 | ID 597 | 65 598 | Rotation 599 | 270 600 | Shape 601 | HorizontalTriangle 602 | Style 603 | 604 | fill 605 | 606 | Color 607 | 608 | b 609 | 0.106262 610 | g 611 | 0.317292 612 | r 613 | 0.0859528 614 | 615 | 616 | shadow 617 | 618 | Draws 619 | NO 620 | 621 | stroke 622 | 623 | Draws 624 | NO 625 | 626 | 627 | Text 628 | 629 | VerticalPad 630 | 0 631 | 632 | 633 | 634 | ID 635 | 63 636 | 637 | 638 | AllowConnections 639 | NO 640 | Class 641 | Group 642 | Graphics 643 | 644 | 645 | Bounds 646 | {{479.25, 296.25}, {73, 14.5}} 647 | Class 648 | ShapedGraphic 649 | ID 650 | 67 651 | Rotation 652 | 270 653 | Shape 654 | HorizontalTriangle 655 | Style 656 | 657 | fill 658 | 659 | Color 660 | 661 | b 662 | 0.0623871 663 | g 664 | 0.12641 665 | r 666 | 0.258208 667 | 668 | 669 | shadow 670 | 671 | Draws 672 | NO 673 | 674 | stroke 675 | 676 | Draws 677 | NO 678 | 679 | 680 | Text 681 | 682 | VerticalPad 683 | 0 684 | 685 | 686 | 687 | Bounds 688 | {{450.25, 217.75}, {131, 47.5}} 689 | Class 690 | ShapedGraphic 691 | ID 692 | 68 693 | Rotation 694 | 270 695 | Shape 696 | HorizontalTriangle 697 | Style 698 | 699 | fill 700 | 701 | Color 702 | 703 | b 704 | 0.106262 705 | g 706 | 0.317292 707 | r 708 | 0.0859528 709 | 710 | 711 | shadow 712 | 713 | Draws 714 | NO 715 | 716 | stroke 717 | 718 | Draws 719 | NO 720 | 721 | 722 | Text 723 | 724 | VerticalPad 725 | 0 726 | 727 | 728 | 729 | ID 730 | 66 731 | 732 | 733 | AllowConnections 734 | NO 735 | Class 736 | Group 737 | Graphics 738 | 739 | 740 | Bounds 741 | {{511.171, 184.988}, {53.4146, 10.6098}} 742 | Class 743 | ShapedGraphic 744 | ID 745 | 70 746 | Rotation 747 | 270 748 | Shape 749 | HorizontalTriangle 750 | Style 751 | 752 | fill 753 | 754 | Color 755 | 756 | b 757 | 0.0623871 758 | g 759 | 0.12641 760 | r 761 | 0.258208 762 | 763 | 764 | shadow 765 | 766 | Draws 767 | NO 768 | 769 | stroke 770 | 771 | Draws 772 | NO 773 | 774 | 775 | Text 776 | 777 | VerticalPad 778 | 0 779 | 780 | 781 | 782 | Bounds 783 | {{489.951, 127.549}, {95.8537, 34.7561}} 784 | Class 785 | ShapedGraphic 786 | ID 787 | 71 788 | Rotation 789 | 270 790 | Shape 791 | HorizontalTriangle 792 | Style 793 | 794 | fill 795 | 796 | Color 797 | 798 | b 799 | 0.106262 800 | g 801 | 0.317292 802 | r 803 | 0.0859528 804 | 805 | 806 | shadow 807 | 808 | Draws 809 | NO 810 | 811 | stroke 812 | 813 | Draws 814 | NO 815 | 816 | 817 | Text 818 | 819 | VerticalPad 820 | 0 821 | 822 | 823 | 824 | ID 825 | 69 826 | 827 | 828 | AllowConnections 829 | NO 830 | Bounds 831 | {{280.5, 113}, {240, 72}} 832 | Class 833 | ShapedGraphic 834 | FitText 835 | YES 836 | Flow 837 | Resize 838 | FontInfo 839 | 840 | Color 841 | 842 | b 843 | 0.4 844 | g 845 | 0.4 846 | r 847 | 1 848 | 849 | Font 850 | HiraMaruPro-W4 851 | Size 852 | 48 853 | 854 | ID 855 | 72 856 | Shape 857 | Rectangle 858 | Style 859 | 860 | fill 861 | 862 | Draws 863 | NO 864 | 865 | shadow 866 | 867 | Draws 868 | NO 869 | 870 | stroke 871 | 872 | Draws 873 | NO 874 | 875 | 876 | Text 877 | 878 | Pad 879 | 0 880 | Text 881 | {\rtf1\ansi\ansicpg932\cocoartf1038\cocoasubrtf320 882 | {\fonttbl\f0\fnil\fcharset128 HiraMaruPro-W4;} 883 | {\colortbl;\red255\green255\blue255;\red255\green255\blue255;\red255\green102\blue102;} 884 | \pard\tx560\tx1120\tx1680\tx2240\tx2800\tx3360\tx3920\tx4480\tx5040\tx5600\tx6160\tx6720\qc\pardirnatural 885 | 886 | \f0\fs96 \cf2 \'8a\'79\cf3 \'82\'b5\'82\'a2\'89\'93\'91\'ab} 887 | VerticalPad 888 | 0 889 | 890 | Wrap 891 | NO 892 | 893 | 894 | AllowConnections 895 | NO 896 | Bounds 897 | {{214.5, 75}, {120, 120}} 898 | Class 899 | ShapedGraphic 900 | ID 901 | 73 902 | Shape 903 | Circle 904 | Style 905 | 906 | fill 907 | 908 | Color 909 | 910 | b 911 | 0.227941 912 | g 913 | 0.776284 914 | r 915 | 1 916 | 917 | 918 | shadow 919 | 920 | Draws 921 | NO 922 | 923 | stroke 924 | 925 | Draws 926 | NO 927 | 928 | 929 | 930 | 931 | AllowConnections 932 | NO 933 | Bounds 934 | {{312.809, 138}, {280.691, 202}} 935 | Class 936 | ShapedGraphic 937 | HFlip 938 | YES 939 | ID 940 | 74 941 | Shape 942 | RightTriangle 943 | Style 944 | 945 | fill 946 | 947 | Color 948 | 949 | b 950 | 1 951 | g 952 | 0.4 953 | r 954 | 0.4 955 | 956 | 957 | shadow 958 | 959 | Draws 960 | NO 961 | 962 | stroke 963 | 964 | Draws 965 | NO 966 | 967 | 968 | Text 969 | 970 | VerticalPad 971 | 0 972 | 973 | 974 | 975 | AllowConnections 976 | NO 977 | Bounds 978 | {{247.5, 219}, {292, 19}} 979 | Class 980 | ShapedGraphic 981 | ID 982 | 75 983 | Shape 984 | Rectangle 985 | Style 986 | 987 | fill 988 | 989 | Color 990 | 991 | b 992 | 0.0442114 993 | g 994 | 0.887748 995 | r 996 | 0 997 | 998 | 999 | shadow 1000 | 1001 | Draws 1002 | NO 1003 | 1004 | stroke 1005 | 1006 | Draws 1007 | NO 1008 | 1009 | 1010 | 1011 | 1012 | AllowConnections 1013 | NO 1014 | Bounds 1015 | {{247.5, 240}, {292, 19}} 1016 | Class 1017 | ShapedGraphic 1018 | ID 1019 | 76 1020 | Shape 1021 | Rectangle 1022 | Style 1023 | 1024 | fill 1025 | 1026 | Color 1027 | 1028 | b 1029 | 0.0442114 1030 | g 1031 | 0.887748 1032 | r 1033 | 0 1034 | 1035 | 1036 | shadow 1037 | 1038 | Draws 1039 | NO 1040 | 1041 | stroke 1042 | 1043 | Draws 1044 | NO 1045 | 1046 | 1047 | 1048 | 1049 | AllowConnections 1050 | NO 1051 | Bounds 1052 | {{247.5, 261}, {292, 79}} 1053 | Class 1054 | ShapedGraphic 1055 | ID 1056 | 77 1057 | Shape 1058 | Rectangle 1059 | Style 1060 | 1061 | fill 1062 | 1063 | Color 1064 | 1065 | b 1066 | 0.0442114 1067 | g 1068 | 0.887748 1069 | r 1070 | 0 1071 | 1072 | 1073 | shadow 1074 | 1075 | Draws 1076 | NO 1077 | 1078 | stroke 1079 | 1080 | Draws 1081 | NO 1082 | 1083 | 1084 | 1085 | 1086 | AllowConnections 1087 | NO 1088 | Bounds 1089 | {{247.5, 91}, {346, 249}} 1090 | Class 1091 | ShapedGraphic 1092 | ID 1093 | 78 1094 | Shape 1095 | Rectangle 1096 | Style 1097 | 1098 | shadow 1099 | 1100 | Draws 1101 | NO 1102 | 1103 | stroke 1104 | 1105 | Draws 1106 | NO 1107 | 1108 | 1109 | 1110 | 1111 | ID 1112 | 62 1113 | 1114 | 1115 | GridInfo 1116 | 1117 | HPages 1118 | 2 1119 | KeepToScale 1120 | 1121 | Layers 1122 | 1123 | 1124 | Lock 1125 | NO 1126 | Name 1127 | レイヤー 1 1128 | Print 1129 | YES 1130 | View 1131 | YES 1132 | 1133 | 1134 | LayoutInfo 1135 | 1136 | Animate 1137 | NO 1138 | circoMinDist 1139 | 18 1140 | circoSeparation 1141 | 0.0 1142 | layoutEngine 1143 | dot 1144 | neatoSeparation 1145 | 0.0 1146 | twopiSeparation 1147 | 0.0 1148 | 1149 | Orientation 1150 | 2 1151 | PrintOnePage 1152 | 1153 | RowAlign 1154 | 1 1155 | RowSpacing 1156 | 36 1157 | SheetTitle 1158 | キャンバス 1 1159 | UniqueID 1160 | 1 1161 | VPages 1162 | 1 1163 | 1164 | 1165 | ActiveLayerIndex 1166 | 0 1167 | AutoAdjust 1168 | 1169 | BackgroundGraphic 1170 | 1171 | Bounds 1172 | {{0, 0}, {559, 783}} 1173 | Class 1174 | SolidGraphic 1175 | ID 1176 | 2 1177 | Style 1178 | 1179 | fill 1180 | 1181 | GradientColor 1182 | 1183 | w 1184 | 0.666667 1185 | 1186 | 1187 | shadow 1188 | 1189 | Draws 1190 | NO 1191 | 1192 | stroke 1193 | 1194 | Draws 1195 | NO 1196 | 1197 | 1198 | 1199 | CanvasOrigin 1200 | {0, 0} 1201 | ColumnAlign 1202 | 1 1203 | ColumnSpacing 1204 | 36 1205 | DisplayScale 1206 | 1 0/72 in = 1.0000 in 1207 | GraphicsList 1208 | 1209 | 1210 | Bounds 1211 | {{142.489, 297}, {146.021, 87}} 1212 | Class 1213 | ShapedGraphic 1214 | ID 1215 | 12 1216 | ImageID 1217 | 4 1218 | Shape 1219 | Rectangle 1220 | Style 1221 | 1222 | fill 1223 | 1224 | Draws 1225 | NO 1226 | 1227 | shadow 1228 | 1229 | Draws 1230 | NO 1231 | 1232 | stroke 1233 | 1234 | Draws 1235 | NO 1236 | 1237 | 1238 | 1239 | 1240 | AllowConnections 1241 | NO 1242 | AllowLabelDrop 1243 | 1244 | AllowToConnect 1245 | 1246 | Class 1247 | LineGraphic 1248 | ID 1249 | 11 1250 | Points 1251 | 1252 | {173, 469} 1253 | {173, 385} 1254 | 1255 | Style 1256 | 1257 | stroke 1258 | 1259 | HeadArrow 1260 | FilledArrow 1261 | TailArrow 1262 | FilledBall 1263 | Width 1264 | 3 1265 | 1266 | 1267 | 1268 | 1269 | AllowConnections 1270 | NO 1271 | Bounds 1272 | {{76, 408}, {278, 31}} 1273 | Class 1274 | ShapedGraphic 1275 | ID 1276 | 10 1277 | Shape 1278 | Rectangle 1279 | Style 1280 | 1281 | fill 1282 | 1283 | FillType 1284 | 2 1285 | GradientAngle 1286 | 90 1287 | GradientColor 1288 | 1289 | b 1290 | 0.814932 1291 | g 1292 | 0.815125 1293 | r 1294 | 0.814972 1295 | 1296 | 1297 | shadow 1298 | 1299 | Draws 1300 | NO 1301 | 1302 | stroke 1303 | 1304 | Color 1305 | 1306 | b 1307 | 0.579529 1308 | g 1309 | 0.579838 1310 | r 1311 | 0.57959 1312 | 1313 | CornerRadius 1314 | 4 1315 | 1316 | 1317 | Text 1318 | 1319 | Align 1320 | 0 1321 | Text 1322 | {\rtf1\ansi\ansicpg932\cocoartf1038\cocoasubrtf320 1323 | {\fonttbl\f0\fswiss\fcharset0 ArialMT;} 1324 | {\colortbl;\red255\green255\blue255;} 1325 | \pard\tx560\tx1120\tx1680\tx2240\tx2800\tx3360\tx3920\tx4480\tx5040\tx5600\tx6160\tx6720\pardirnatural 1326 | 1327 | \f0\b\fs36 \cf0 function ()} 1328 | 1329 | 1330 | 1331 | AllowConnections 1332 | NO 1333 | Bounds 1334 | {{73, 405}, {285, 78}} 1335 | Class 1336 | ShapedGraphic 1337 | ID 1338 | 9 1339 | Shape 1340 | Rectangle 1341 | Style 1342 | 1343 | fill 1344 | 1345 | GradientColor 1346 | 1347 | b 1348 | 0.814932 1349 | g 1350 | 0.815125 1351 | r 1352 | 0.814972 1353 | 1354 | 1355 | shadow 1356 | 1357 | Draws 1358 | NO 1359 | 1360 | stroke 1361 | 1362 | Color 1363 | 1364 | b 1365 | 0.579529 1366 | g 1367 | 0.579838 1368 | r 1369 | 0.57959 1370 | 1371 | CornerRadius 1372 | 4 1373 | 1374 | 1375 | Text 1376 | 1377 | Align 1378 | 0 1379 | Text 1380 | {\rtf1\ansi\ansicpg932\cocoartf1038\cocoasubrtf320 1381 | {\fonttbl\f0\fswiss\fcharset0 ArialMT;} 1382 | {\colortbl;\red255\green255\blue255;} 1383 | \pard\tx560\tx1120\tx1680\tx2240\tx2800\tx3360\tx3920\tx4480\tx5040\tx5600\tx6160\tx6720\ql\qnatural\pardirnatural 1384 | 1385 | \f0\b\fs36 \cf0 \ 1386 | \ 1387 | \pard\tx560\tx1120\tx1680\tx2240\tx2800\tx3360\tx3920\tx4480\tx5040\tx5600\tx6160\tx6720\qc\pardirnatural 1388 | 1389 | \i\b0 \cf0 movie 1390 | \i0\b \uc0\u8592 play} 1391 | 1392 | TextPlacement 1393 | 0 1394 | 1395 | 1396 | AllowConnections 1397 | NO 1398 | AllowLabelDrop 1399 | 1400 | AllowToConnect 1401 | 1402 | Class 1403 | LineGraphic 1404 | ID 1405 | 8 1406 | Points 1407 | 1408 | {159, 172} 1409 | {159, 226} 1410 | 1411 | Style 1412 | 1413 | stroke 1414 | 1415 | HeadArrow 1416 | FilledArrow 1417 | TailArrow 1418 | FilledBall 1419 | Width 1420 | 3 1421 | 1422 | 1423 | 1424 | 1425 | AllowConnections 1426 | NO 1427 | Bounds 1428 | {{76, 123}, {278, 31}} 1429 | Class 1430 | ShapedGraphic 1431 | ID 1432 | 7 1433 | Shape 1434 | Rectangle 1435 | Style 1436 | 1437 | fill 1438 | 1439 | FillType 1440 | 2 1441 | GradientAngle 1442 | 90 1443 | GradientColor 1444 | 1445 | b 1446 | 0.814932 1447 | g 1448 | 0.815125 1449 | r 1450 | 0.814972 1451 | 1452 | 1453 | shadow 1454 | 1455 | Draws 1456 | NO 1457 | 1458 | stroke 1459 | 1460 | Color 1461 | 1462 | b 1463 | 0.579529 1464 | g 1465 | 0.579838 1466 | r 1467 | 0.57959 1468 | 1469 | CornerRadius 1470 | 4 1471 | 1472 | 1473 | Text 1474 | 1475 | Align 1476 | 0 1477 | Text 1478 | {\rtf1\ansi\ansicpg932\cocoartf1038\cocoasubrtf320 1479 | {\fonttbl\f0\fswiss\fcharset0 ArialMT;} 1480 | {\colortbl;\red255\green255\blue255;} 1481 | \pard\tx560\tx1120\tx1680\tx2240\tx2800\tx3360\tx3920\tx4480\tx5040\tx5600\tx6160\tx6720\pardirnatural 1482 | 1483 | \f0\b\fs36 \cf0 movieView} 1484 | 1485 | 1486 | 1487 | AllowConnections 1488 | NO 1489 | Bounds 1490 | {{73, 120}, {285, 78}} 1491 | Class 1492 | ShapedGraphic 1493 | ID 1494 | 6 1495 | Shape 1496 | Rectangle 1497 | Style 1498 | 1499 | fill 1500 | 1501 | GradientColor 1502 | 1503 | b 1504 | 0.814932 1505 | g 1506 | 0.815125 1507 | r 1508 | 0.814972 1509 | 1510 | 1511 | shadow 1512 | 1513 | Draws 1514 | NO 1515 | 1516 | stroke 1517 | 1518 | Color 1519 | 1520 | b 1521 | 0.579529 1522 | g 1523 | 0.579838 1524 | r 1525 | 0.57959 1526 | 1527 | CornerRadius 1528 | 4 1529 | 1530 | 1531 | Text 1532 | 1533 | Align 1534 | 0 1535 | Text 1536 | {\rtf1\ansi\ansicpg932\cocoartf1038\cocoasubrtf320 1537 | {\fonttbl\f0\fswiss\fcharset0 ArialMT;\f1\fnil\fcharset128 HiraMinProN-W3;} 1538 | {\colortbl;\red255\green255\blue255;} 1539 | \pard\tx560\tx1120\tx1680\tx2240\tx2800\tx3360\tx3920\tx4480\tx5040\tx5600\tx6160\tx6720\ql\qnatural\pardirnatural 1540 | 1541 | \f0\b\fs36 \cf0 \ 1542 | \ 1543 | movie 1544 | \f1 \'81\'45} 1545 | 1546 | TextPlacement 1547 | 0 1548 | 1549 | 1550 | AllowConnections 1551 | NO 1552 | Bounds 1553 | {{73, 226}, {278, 31}} 1554 | Class 1555 | ShapedGraphic 1556 | ID 1557 | 4 1558 | Shape 1559 | Rectangle 1560 | Style 1561 | 1562 | fill 1563 | 1564 | FillType 1565 | 2 1566 | GradientAngle 1567 | 90 1568 | GradientColor 1569 | 1570 | b 1571 | 0.814932 1572 | g 1573 | 0.815125 1574 | r 1575 | 0.814972 1576 | 1577 | 1578 | shadow 1579 | 1580 | Draws 1581 | NO 1582 | 1583 | stroke 1584 | 1585 | Color 1586 | 1587 | b 1588 | 0.579529 1589 | g 1590 | 0.579838 1591 | r 1592 | 0.57959 1593 | 1594 | CornerRadius 1595 | 4 1596 | 1597 | 1598 | Text 1599 | 1600 | Align 1601 | 0 1602 | Text 1603 | {\rtf1\ansi\ansicpg932\cocoartf1038\cocoasubrtf320 1604 | {\fonttbl\f0\fswiss\fcharset0 ArialMT;} 1605 | {\colortbl;\red255\green255\blue255;} 1606 | \pard\tx560\tx1120\tx1680\tx2240\tx2800\tx3360\tx3920\tx4480\tx5040\tx5600\tx6160\tx6720\pardirnatural 1607 | 1608 | \f0\b\fs36 \cf0 movie} 1609 | 1610 | 1611 | 1612 | AllowConnections 1613 | NO 1614 | Bounds 1615 | {{70, 223}, {285, 161}} 1616 | Class 1617 | ShapedGraphic 1618 | ID 1619 | 5 1620 | Shape 1621 | Rectangle 1622 | Style 1623 | 1624 | fill 1625 | 1626 | GradientColor 1627 | 1628 | b 1629 | 0.814932 1630 | g 1631 | 0.815125 1632 | r 1633 | 0.814972 1634 | 1635 | 1636 | shadow 1637 | 1638 | Draws 1639 | NO 1640 | 1641 | stroke 1642 | 1643 | Color 1644 | 1645 | b 1646 | 0.579529 1647 | g 1648 | 0.579838 1649 | r 1650 | 0.57959 1651 | 1652 | CornerRadius 1653 | 4 1654 | 1655 | 1656 | Text 1657 | 1658 | Align 1659 | 0 1660 | Text 1661 | {\rtf1\ansi\ansicpg932\cocoartf1038\cocoasubrtf320 1662 | {\fonttbl\f0\fswiss\fcharset0 ArialMT;\f1\froman\fcharset0 TimesNewRomanPSMT;} 1663 | {\colortbl;\red255\green255\blue255;} 1664 | \pard\tx560\tx1120\tx1680\tx2240\tx2800\tx3360\tx3920\tx4480\tx5040\tx5600\tx6160\tx6720\pardirnatural 1665 | 1666 | \f0\b\fs36 \cf0 \ 1667 | \ 1668 | QTMovieLoopsAttribute 1669 | \f1 YES} 1670 | 1671 | TextPlacement 1672 | 0 1673 | 1674 | 1675 | GridInfo 1676 | 1677 | HPages 1678 | 1 1679 | KeepToScale 1680 | 1681 | Layers 1682 | 1683 | 1684 | Lock 1685 | NO 1686 | Name 1687 | レイヤー 1 1688 | Print 1689 | YES 1690 | View 1691 | YES 1692 | 1693 | 1694 | LayoutInfo 1695 | 1696 | Animate 1697 | NO 1698 | circoMinDist 1699 | 18 1700 | circoSeparation 1701 | 0.0 1702 | layoutEngine 1703 | dot 1704 | neatoSeparation 1705 | 0.0 1706 | twopiSeparation 1707 | 0.0 1708 | 1709 | Orientation 1710 | 2 1711 | PrintOnePage 1712 | 1713 | RowAlign 1714 | 1 1715 | RowSpacing 1716 | 36 1717 | SheetTitle 1718 | キャンバス 2 1719 | UniqueID 1720 | 2 1721 | VPages 1722 | 1 1723 | 1724 | 1725 | ActiveLayerIndex 1726 | 0 1727 | AutoAdjust 1728 | 1729 | BackgroundGraphic 1730 | 1731 | Bounds 1732 | {{0, 0}, {559, 783}} 1733 | Class 1734 | SolidGraphic 1735 | ID 1736 | 2 1737 | Style 1738 | 1739 | fill 1740 | 1741 | GradientColor 1742 | 1743 | w 1744 | 0.666667 1745 | 1746 | 1747 | shadow 1748 | 1749 | Draws 1750 | NO 1751 | 1752 | stroke 1753 | 1754 | Draws 1755 | NO 1756 | 1757 | 1758 | 1759 | CanvasOrigin 1760 | {0, 0} 1761 | ColumnAlign 1762 | 1 1763 | ColumnSpacing 1764 | 36 1765 | DisplayScale 1766 | 1 0/72 in = 1.0000 in 1767 | GraphicsList 1768 | 1769 | 1770 | Bounds 1771 | {{123.49, 297}, {146.021, 87}} 1772 | Class 1773 | ShapedGraphic 1774 | ID 1775 | 12 1776 | ImageID 1777 | 4 1778 | Shape 1779 | Rectangle 1780 | Style 1781 | 1782 | fill 1783 | 1784 | Draws 1785 | NO 1786 | 1787 | shadow 1788 | 1789 | Draws 1790 | NO 1791 | 1792 | stroke 1793 | 1794 | Draws 1795 | NO 1796 | 1797 | 1798 | 1799 | 1800 | AllowConnections 1801 | NO 1802 | AllowLabelDrop 1803 | 1804 | AllowToConnect 1805 | 1806 | Class 1807 | LineGraphic 1808 | ID 1809 | 11 1810 | Points 1811 | 1812 | {180, 469} 1813 | {180, 385} 1814 | 1815 | Style 1816 | 1817 | stroke 1818 | 1819 | HeadArrow 1820 | FilledArrow 1821 | TailArrow 1822 | FilledBall 1823 | Width 1824 | 3 1825 | 1826 | 1827 | 1828 | 1829 | AllowConnections 1830 | NO 1831 | Bounds 1832 | {{76, 408}, {278, 31}} 1833 | Class 1834 | ShapedGraphic 1835 | ID 1836 | 10 1837 | Shape 1838 | Rectangle 1839 | Style 1840 | 1841 | fill 1842 | 1843 | FillType 1844 | 2 1845 | GradientAngle 1846 | 90 1847 | GradientColor 1848 | 1849 | b 1850 | 0.814932 1851 | g 1852 | 0.815125 1853 | r 1854 | 0.814972 1855 | 1856 | 1857 | shadow 1858 | 1859 | Draws 1860 | NO 1861 | 1862 | stroke 1863 | 1864 | Color 1865 | 1866 | b 1867 | 0.579529 1868 | g 1869 | 0.579838 1870 | r 1871 | 0.57959 1872 | 1873 | CornerRadius 1874 | 4 1875 | 1876 | 1877 | Text 1878 | 1879 | Align 1880 | 0 1881 | Text 1882 | {\rtf1\ansi\ansicpg932\cocoartf1038\cocoasubrtf320 1883 | {\fonttbl\f0\fnil\fcharset128 HiraKakuProN-W3;\f1\fswiss\fcharset0 ArialMT;} 1884 | {\colortbl;\red255\green255\blue255;} 1885 | \pard\tx560\tx1120\tx1680\tx2240\tx2800\tx3360\tx3920\tx4480\tx5040\tx5600\tx6160\tx6720\ql\qnatural\pardirnatural 1886 | 1887 | \f0\b\fs36 \cf0 \'8f\'88\'97\'9d 1888 | \f1 ()} 1889 | 1890 | 1891 | 1892 | AllowConnections 1893 | NO 1894 | Bounds 1895 | {{73, 405}, {285, 78}} 1896 | Class 1897 | ShapedGraphic 1898 | ID 1899 | 9 1900 | Shape 1901 | Rectangle 1902 | Style 1903 | 1904 | fill 1905 | 1906 | GradientColor 1907 | 1908 | b 1909 | 0.814932 1910 | g 1911 | 0.815125 1912 | r 1913 | 0.814972 1914 | 1915 | 1916 | shadow 1917 | 1918 | Draws 1919 | NO 1920 | 1921 | stroke 1922 | 1923 | Color 1924 | 1925 | b 1926 | 0.579529 1927 | g 1928 | 0.579838 1929 | r 1930 | 0.57959 1931 | 1932 | CornerRadius 1933 | 4 1934 | 1935 | 1936 | Text 1937 | 1938 | Align 1939 | 0 1940 | Text 1941 | {\rtf1\ansi\ansicpg932\cocoartf1038\cocoasubrtf320 1942 | {\fonttbl\f0\fswiss\fcharset0 ArialMT;\f1\fnil\fcharset128 HiraKakuProN-W3;} 1943 | {\colortbl;\red255\green255\blue255;} 1944 | \pard\tx560\tx1120\tx1680\tx2240\tx2800\tx3360\tx3920\tx4480\tx5040\tx5600\tx6160\tx6720\ql\qnatural\pardirnatural 1945 | 1946 | \f0\b\fs36 \cf0 \ 1947 | \ 1948 | \pard\tx560\tx1120\tx1680\tx2240\tx2800\tx3360\tx3920\tx4480\tx5040\tx5600\tx6160\tx6720\qc\pardirnatural 1949 | 1950 | \i\b0 \cf0 1951 | \f1\i0 \'89\'66\'91\'9c 1952 | \b \'81\'a9\'8d\'c4\'90\'b6} 1953 | 1954 | TextPlacement 1955 | 0 1956 | 1957 | 1958 | AllowConnections 1959 | NO 1960 | AllowLabelDrop 1961 | 1962 | AllowToConnect 1963 | 1964 | Class 1965 | LineGraphic 1966 | ID 1967 | 8 1968 | Points 1969 | 1970 | {196, 172} 1971 | {196, 226} 1972 | 1973 | Style 1974 | 1975 | stroke 1976 | 1977 | HeadArrow 1978 | FilledArrow 1979 | TailArrow 1980 | FilledBall 1981 | Width 1982 | 3 1983 | 1984 | 1985 | 1986 | 1987 | AllowConnections 1988 | NO 1989 | Bounds 1990 | {{76, 123}, {278, 31}} 1991 | Class 1992 | ShapedGraphic 1993 | ID 1994 | 7 1995 | Shape 1996 | Rectangle 1997 | Style 1998 | 1999 | fill 2000 | 2001 | FillType 2002 | 2 2003 | GradientAngle 2004 | 90 2005 | GradientColor 2006 | 2007 | b 2008 | 0.814932 2009 | g 2010 | 0.815125 2011 | r 2012 | 0.814972 2013 | 2014 | 2015 | shadow 2016 | 2017 | Draws 2018 | NO 2019 | 2020 | stroke 2021 | 2022 | Color 2023 | 2024 | b 2025 | 0.579529 2026 | g 2027 | 0.579838 2028 | r 2029 | 0.57959 2030 | 2031 | CornerRadius 2032 | 4 2033 | 2034 | 2035 | Text 2036 | 2037 | Align 2038 | 0 2039 | Text 2040 | {\rtf1\ansi\ansicpg932\cocoartf1038\cocoasubrtf320 2041 | {\fonttbl\f0\fnil\fcharset128 HiraKakuProN-W3;} 2042 | {\colortbl;\red255\green255\blue255;} 2043 | \pard\tx560\tx1120\tx1680\tx2240\tx2800\tx3360\tx3920\tx4480\tx5040\tx5600\tx6160\tx6720\ql\qnatural\pardirnatural 2044 | 2045 | \f0\b\fs36 \cf0 \'89\'66\'91\'9c\'95\'5c\'8e\'a6\'89\'e6\'96\'ca} 2046 | 2047 | 2048 | 2049 | AllowConnections 2050 | NO 2051 | Bounds 2052 | {{73, 120}, {285, 78}} 2053 | Class 2054 | ShapedGraphic 2055 | ID 2056 | 6 2057 | Shape 2058 | Rectangle 2059 | Style 2060 | 2061 | fill 2062 | 2063 | GradientColor 2064 | 2065 | b 2066 | 0.814932 2067 | g 2068 | 0.815125 2069 | r 2070 | 0.814972 2071 | 2072 | 2073 | shadow 2074 | 2075 | Draws 2076 | NO 2077 | 2078 | stroke 2079 | 2080 | Color 2081 | 2082 | b 2083 | 0.579529 2084 | g 2085 | 0.579838 2086 | r 2087 | 0.57959 2088 | 2089 | CornerRadius 2090 | 4 2091 | 2092 | 2093 | Text 2094 | 2095 | Align 2096 | 0 2097 | Text 2098 | {\rtf1\ansi\ansicpg932\cocoartf1038\cocoasubrtf320 2099 | {\fonttbl\f0\fswiss\fcharset0 ArialMT;\f1\fnil\fcharset128 HiraKakuProN-W3;\f2\fnil\fcharset128 HiraMinProN-W3; 2100 | } 2101 | {\colortbl;\red255\green255\blue255;} 2102 | \pard\tx560\tx1120\tx1680\tx2240\tx2800\tx3360\tx3920\tx4480\tx5040\tx5600\tx6160\tx6720\ql\qnatural\pardirnatural 2103 | 2104 | \f0\b\fs36 \cf0 \ 2105 | \ 2106 | 2107 | \f1 \'89\'66\'91\'9c\'82\'cc\'93\'e0\'97\'65 2108 | \f0 2109 | \f2 \'81\'45} 2110 | 2111 | TextPlacement 2112 | 0 2113 | 2114 | 2115 | AllowConnections 2116 | NO 2117 | Bounds 2118 | {{73, 226}, {278, 31}} 2119 | Class 2120 | ShapedGraphic 2121 | ID 2122 | 4 2123 | Shape 2124 | Rectangle 2125 | Style 2126 | 2127 | fill 2128 | 2129 | FillType 2130 | 2 2131 | GradientAngle 2132 | 90 2133 | GradientColor 2134 | 2135 | b 2136 | 0.814932 2137 | g 2138 | 0.815125 2139 | r 2140 | 0.814972 2141 | 2142 | 2143 | shadow 2144 | 2145 | Draws 2146 | NO 2147 | 2148 | stroke 2149 | 2150 | Color 2151 | 2152 | b 2153 | 0.579529 2154 | g 2155 | 0.579838 2156 | r 2157 | 0.57959 2158 | 2159 | CornerRadius 2160 | 4 2161 | 2162 | 2163 | Text 2164 | 2165 | Align 2166 | 0 2167 | Text 2168 | {\rtf1\ansi\ansicpg932\cocoartf1038\cocoasubrtf320 2169 | {\fonttbl\f0\fnil\fcharset128 HiraKakuProN-W3;} 2170 | {\colortbl;\red255\green255\blue255;} 2171 | \pard\tx560\tx1120\tx1680\tx2240\tx2800\tx3360\tx3920\tx4480\tx5040\tx5600\tx6160\tx6720\ql\qnatural\pardirnatural 2172 | 2173 | \f0\b\fs36 \cf0 \'89\'66\'91\'9c} 2174 | 2175 | 2176 | 2177 | AllowConnections 2178 | NO 2179 | Bounds 2180 | {{70, 223}, {285, 161}} 2181 | Class 2182 | ShapedGraphic 2183 | ID 2184 | 5 2185 | Shape 2186 | Rectangle 2187 | Style 2188 | 2189 | fill 2190 | 2191 | GradientColor 2192 | 2193 | b 2194 | 0.814932 2195 | g 2196 | 0.815125 2197 | r 2198 | 0.814972 2199 | 2200 | 2201 | shadow 2202 | 2203 | Draws 2204 | NO 2205 | 2206 | stroke 2207 | 2208 | Color 2209 | 2210 | b 2211 | 0.579529 2212 | g 2213 | 0.579838 2214 | r 2215 | 0.57959 2216 | 2217 | CornerRadius 2218 | 4 2219 | 2220 | 2221 | Text 2222 | 2223 | Align 2224 | 0 2225 | Text 2226 | {\rtf1\ansi\ansicpg932\cocoartf1038\cocoasubrtf320 2227 | {\fonttbl\f0\fswiss\fcharset0 ArialMT;\f1\fnil\fcharset128 HiraKakuProN-W3;\f2\fnil\fcharset128 HiraMinProN-W3; 2228 | } 2229 | {\colortbl;\red255\green255\blue255;} 2230 | \pard\tx560\tx1120\tx1680\tx2240\tx2800\tx3360\tx3920\tx4480\tx5040\tx5600\tx6160\tx6720\ql\qnatural\pardirnatural 2231 | 2232 | \f0\b\fs36 \cf0 \ 2233 | \ 2234 | 2235 | \f1 \'98\'41\'91\'b1\'8d\'c4\'90\'b6 2236 | \f0 ? 2237 | \f2 \'82\'cd\'82\'a2} 2238 | 2239 | TextPlacement 2240 | 0 2241 | 2242 | 2243 | GridInfo 2244 | 2245 | HPages 2246 | 1 2247 | KeepToScale 2248 | 2249 | Layers 2250 | 2251 | 2252 | Lock 2253 | NO 2254 | Name 2255 | レイヤー 1 2256 | Print 2257 | YES 2258 | View 2259 | YES 2260 | 2261 | 2262 | LayoutInfo 2263 | 2264 | Animate 2265 | NO 2266 | circoMinDist 2267 | 18 2268 | circoSeparation 2269 | 0.0 2270 | layoutEngine 2271 | dot 2272 | neatoSeparation 2273 | 0.0 2274 | twopiSeparation 2275 | 0.0 2276 | 2277 | Orientation 2278 | 2 2279 | PrintOnePage 2280 | 2281 | RowAlign 2282 | 1 2283 | RowSpacing 2284 | 36 2285 | SheetTitle 2286 | キャンバス 3 2287 | UniqueID 2288 | 3 2289 | VPages 2290 | 1 2291 | 2292 | 2293 | SmartAlignmentGuidesActive 2294 | YES 2295 | SmartDistanceGuidesActive 2296 | YES 2297 | UseEntirePage 2298 | 2299 | WindowInfo 2300 | 2301 | CurrentSheet 2302 | 2 2303 | ExpandedCanvases 2304 | 2305 | Frame 2306 | {{631, 219}, {1091, 939}} 2307 | ListView 2308 | 2309 | OutlineWidth 2310 | 142 2311 | RightSidebar 2312 | 2313 | ShowRuler 2314 | 2315 | Sidebar 2316 | 2317 | SidebarWidth 2318 | 120 2319 | VisibleRegion 2320 | {{-199, -1}, {956, 785}} 2321 | Zoom 2322 | 1 2323 | ZoomValues 2324 | 2325 | 2326 | キャンバス 1 2327 | 1 2328 | 1 2329 | 2330 | 2331 | キャンバス 2 2332 | 1 2333 | 1 2334 | 2335 | 2336 | キャンバス 3 2337 | 1 2338 | 1 2339 | 2340 | 2341 | 2342 | saveQuickLookFiles 2343 | YES 2344 | 2345 | 2346 | --------------------------------------------------------------------------------