作りにくいやや作りにくいどちらでもないやや作りやすい

(1)

タブレット端末で 3S カードを作成可能なアプリケーションの開発と利用法の検討

三重大学大学院教育学研究科教育科学専攻学校教育領域 214M006 芳田翔太郎 2017年2月13日

(2)

第1章本研究の背景と目的・方法 ... 1

1.1 研究の背景 ... 1

1.1.1 ICT機器の普及と学校現場での利用 ... 1

1.1.2 学校現場におけるプレゼンテーション ... 2

1.1.3 手書きの3Sカード ... 3

1.1.4 アプリケーションの汎用性 ... 4

1.1.5 学習成果のまとめや振り返り ... 5

1.2 研究の目的 ... 6

1.3 研究の方法 ... 8

第2章デジタル3Sカードの開発... 10

2.1 デジタル3Sカード for iPadの開発 ... 10

2.1.1 デジタル3Sカード for iPad の開発環境とソースコード ... 10

2.1.2 デジタル3Sカード for iPad の実装画面と使用方法 ... 15

2.1.3 デジタル3Sカード for iPad の課題 ... 18

2.2 デジタル3Sカード for Webの開発 ... 19

2.2.1 Webブラウザ利用の検討 ... 19

2.2.2 デジタル3Sカード for Web の開発に利用したウィジェット ... 20

2.2.3 デジタル3Sカード for Webの実装画面と機能 ... 21

2.2.4 デジタル3Sカード for Web への共有機能の実装 ... 26

2.2.5 デジタル3Sカード for Webと共有システムの課題 ... 33

第3章開発したアプリケーションの利用法 ... 34

3.1 デジタル3Sカード for iPadの利用法 ... 34

3.1.1 アプリケーションを用いたアルバム作成と保存 ... 34

3.1.2 複数枚のカードをプレゼンテーションの資料として利用する ... 35

3.1.3 カメラロールのアルバムに保存しポートフォリオとして利用する ... 35

3.1.4 他のアプリケーションと組み合わせて利用する ... 37

3.2 デジタル3Sカード for Webの利用法 ... 40

3.2.1 カードを全体で共有する ... 40

3.2.2 カードの背景色を変更し共有する ... 42

3.2.3 3Sカードの無記名投稿とディレクトリの分割 ... 44

(3)

第4章アプリケーション開発と利用法の検討に関する考察 ... 45

4.1 アプリケーション開発についての考察 ... 45

4.1.1 デジタル3Sカード for iPad についての考察 ... 45

4.1.2 デジタル3Sカード for Web についての考察 ... 50

4.2 デジタル3Sカードの利用に関する考察 ... 53

4.2.1 デジタル3Sカード for iPad の利用に関する考察 ... 53

4.2.2 デジタル3Sカード for Web を利用した実践についての考察 ... 55

4.3 総合考察 ... 62

4.3.1 紙媒体とデジタル端末における3Sカード作成と利用についての検討 ... 62

4.3.2 iPadアプリケーションとWebアプリケーションにおける違い ... 64

4.3.3 3つにまとめることとタブレット端末を利用する良さ ... 66

第5章まとめと今後の課題 ... 67

5.1 まとめ ... 67

5.2 今後の課題 ... 68

おわりに ... 69

引用・参考文献，URL ... 70

謝辞 ... 72

付録（開発したアプリケーションのリンク） ... 73

(4)

第1章本研究の背景と目的・方法 1.1 研究の背景

1.1.1 ICT機器の普及と学校現場での利用

近年，我が国において情報技術の向上により，コンピュータやスマートフォン，タブレット端末といった情報機器が我々にとって身近なものとなっている。特にスマートフォンやタブレット端末などは目覚しい進歩を遂げており，いつでもどこでもそれらの端末を利用することが可能である。こういった機器の技術的発展に加え，それぞれの機器がインターネットに接続され，いつでも情報を得ることができる社会になりつつある。

2010年に文部科学省が作成した「教育の情報化に関する手引き」の第8章では，学校現場の普通教室において，書画カメラがプロジェクタなどのICT機器の導入が検討され，各教室に配備が進んでいる。教育の情報化ビジョン（文部科学省，2011）では，2020年度までに一人一台の情報端末の導入を検討しており，児童生徒がタブレット端末やコンピュータを利用して学習する機会が今後ますます増えると考えられる。そのような情報端末の中でもとりわけ，タブレット端末は現在の学校現場において話題になっており，タブレット端末を用いた授業や活用法が現在も検討されている。

タブレット端末は OS (Operating System) を搭載した薄型のコンピュータであり，

Windows・Android・iOSなどのOSを搭載している。また，取り外し可能なキーボードを

備え付けている端末 (2in1) などがあり，幅広い種類が販売をされている。これらのタブレット端末は従来の据え置き型のPC (Personal Computer) と比べて持ち運び可能である点や画面に直接触れることで操作するという点で大きな違いがある。教育現場にそれらの端末を導入することによって，パソコン教室以外での利用を行うことが可能になり，今までなかったような利用を行うことも可能である。それに加えて，Android やiOS を搭載しているタブレット端末は，アプリケーションを専用のストアからインストールすることで，様々な機能を追加することが可能であり，利用者に合わせたカスタマイズなどが可能である。したがって教育用のアプリケーションなどもストアに様々アップロードされており，学校現場に合わせたタブレット端末の利用が可能である。

(5)

1.1.2 学校現場におけるプレゼンテーション

学習指導要領では，言語活動の充実を通して児童生徒の思考力・判断力・表現力を身につけることが重要であるといわれており，学校現場において児童生徒の能力を育成する学習活動が行われている。加えて，コミュニケーション能力の向上の重要性も言われており，

PowerPoint (Microsoft)などのプレゼンテーションソフトウェアを利用した学習も取り入れられている。

児童生徒が自分の意見をまとめて他者に発信する学習は，アクティブラーニングの形式の学習として有効な手段の一つであると考えられる。近年の社会構成主義や状況的学習論に基づき，情報発信型学習が注目されており，学習者によるアウトプットや学習成果が期待できるが，我が国においては一斉指導型授業が主流で発表の機会は少ないため，紙媒体の

「3Sカード」の活用が有効だと指摘している（須曽野ほか，2014）。

現在プレゼンテーションで利用されるソフトウェアには，PowerPoint の他にも

Keynote(Apple) など様々なものがあり，プレゼンテーションで利用するスライドの作成や

画像・動画の挿入機能など様々な便利な機能を同時に備えている。利用者はそれらの機能を利用して資料を作成することが可能である。しかしながら，須曽野らは，

プレゼンテーションの基本は，パワーポイントではなく，「学習者が何を効果的・

効率的・魅力的に提示するか」である。教員は，プレゼンテーションを取り入れた学習を実践するには，時間，場所，機器，道具，資料など様々なことがらについて留意する必要がある。さらに，学習者に関して，発達段階，緊張感，学習形態等に考慮しなければならない。

授業において，児童生徒が PowerPoint 等のプレゼン用ソフトを用いて発表する前に，コンピュータや専用ソフトを用いないプレゼンテーション，つまり，デジタルではないアナログ的な発表を体験させることがまず重要である。クラス全体ではなく，３～５人程度のグループで短いプレゼンテーションを取り入れることは，プレゼンテーションの第一ステップして位置づけられる（須曽野ほか，2014）。

と指摘しており，児童生徒が初めてプレゼンテーションを行う場合に，児童生徒がいきなり

PowerPoint などを利用してプレゼンテーション用のスライドを作ることは煩雑であり難

しく，それ以前に手書きで初歩的なプレゼンテーションの練習を行うことが重要なのである。

(6)

1.1.3 手書きの3Sカード

三重大学教育学部では，学部や大学院の授業，教員免許状更新講習において「3Sカード」

と呼ばれる紙媒体のプレゼンテーションカードが利用されている。「3S カード」は，2011 年に（旧）三重大学教育学部附属教育実践総合センターに内地留学をしていた名張市の小学校教員の瀬川が作成したいくつかの「プレゼンカード」のうちの一枚である「箇条書き用プレゼンカード」を須曽野が命名したものである（須曽野，2014）。紙媒体の3Sカードは，

3つの内容記述欄（①〜③）と最上部にあるタイトル記述欄の部分から構成される。（図1）

図1 紙媒体の3Sカード

児童生徒は内容欄に記述を行なったのちに，タイトル欄を作成する。また，3Sカードは 4

〜6人程度の小グループでのプレゼンテーションや，書画カメラを用いたクラス全体での共有に利用される。3Sカードでは，内容をたくさん記述しすぎず，まとめることを重要視している。瀬川によると「箇条書き用プレゼンカードには，3 行だけ箇条書きする欄を設け，

3つの項目を伝えるよう意識した。」（瀬川，2011）とのことであり，それは「池上は『3つの項目に分けることは，発表者にも覚えやすく，聴き手の記憶にも起こりやすい』と述べている。」からである（瀬川，2011）。

筆者は，大学院の講義で3Sカードを使用し興味を持った。また，自身の研究課題としてタブレット端末を利用した学習アプリケーションの開発を検討しており，3SカードをiPad アプリケーションとして開発できないか考えるに至った。そこで本研究では，まずiPadを利用して3Sカードを作成できるアプリケーションを開発に着手した。

(7)

1.1.4 アプリケーションの汎用性

筆者は，学校現場に導入されているタブレット端末について現職の教員から話を聞く機会を持ち，学校現場で導入が進められているタブレット端末は以前から用いられてきた

Windows を搭載したモデルがほとんどであり，iPad の導入数は極めて少ないことを知っ

た。また，タブレット端末や据え置き型のPCでの利用を考え，汎用性のあるアプリケーションの開発の必要性と感じた。そこで筆者は，iPad 版のアプリケーションで開発した「指でなぞることで文字を書き入れ，3Sカードを作成することができる」というメリットを生かし，同じようなアプリケーションを「搭載されているOSに関係なく」利用することはできないか検討した。その際に着目したのがOSに関係なく搭載されているブラウザである。

筆者は学部生の授業の際にHTMLなどを用いたホームページ作成について学んでおり，その知識を生かしたブラウザで利用できる3Sカードアプリケーションの開発を目指した。

本来3Sカードはプレゼンテーション用のカードとして開発されており，作成したカードを元に発表を行うツールである。したがって，紙媒体のカードでは作成したカードを書画カメラの利用によってクラス全体に表示する，もしくはグループで発表するような利用がなされる。iPad版のアプリケーションでは，iPadをグループでお互いに見せ合ったり，全体発表の場では，iPadをプロジェクタに接続し投影したりするような利用ができる。

iPad版のアプリケーションを元に開発するアプリケーションでは，iPadのような持ち運び可能なタブレット端末の他にも据え置き型の PC でも利用が可能になり，そういった場面で作成したカードをどのように表示するかが課題となる。したがって，3Sカードを作成可能なアプリケーションの開発と並行して，カードを共有する仕組みの作成についても検討を行った。

以上のことから，本研究では，iPadで3Sカードを作成可能なアプリケーションと，Web ブラウザで3Sカードを作成可能なアプリケーションの2つを開発する。これらは，学校現場によって導入されている情報端末が異なっていることへの対応や，それぞれのアプリケーションで異なった利用方法が可能になるなどの利点につながる可能性がある。

(8)

1.1.5 学習成果のまとめや振り返り

学校現場では，授業の最後にまとめを行ったり振り返りを行ったりすることが頻繁になされる。平成23年4月から施行されている現行の学習指導要領（文部科学省，2008）における総則では，「第 4 指導計画の作成等に当たって配慮すべき事項」における配慮する事項として「（4）各教科等の指導に当たっては，児童が学習の見通しを立てたり学習したことを振り返ったりする活動を計画的に取り入れるよう工夫すること。」という内容が指摘され，重要視されている。

しかしながら実際の学校現場では，振り返りについて教員によって方法が異なっている，

振り返りが行われていないなどの現状がある。2015年に三重大学に内地留学していた山村

（伊勢市小学校教員）の調査によると，

担任70％以降が振り返り活動を算数に取り入れていた。しかし，どのような振り

返り活動であったかの設問では，授業後の復習プリント，授業導入部での前時の振り返りであったり，まとめを書いたりしたとの回答が多かった。

とのことであり，「学校全体での振り返り活動についての共通認識はまだ確認されてない。」とある（山村，2015）。

山村の研究では，3Sカードを利用した振り返り活動を行なっており，実践の結果として，

「3Sカードを利用することで自分の考えを書きやすくなった・少し書きやすくなった」児童が97％，「3Sカードを使うと自分の考えを発表しやすくなった」児童が88％という結果であったとしている（山村，2015）。山村の研究から，3Sカードを利用することで，児童が意見を表現する活動を支援し，また，発表するためのツールとしても活用できる。

したがって，本研究で開発した3Sカードを入力可能なアプリケーションでも同様に，学習活動の振り返りを行うツールとして，意見を記入しより発表しやすくなるのではないかと考えた。そこで，筆者は，三重大学教育学部1年生に対して授業を行った後，授業で学んだ内容を，ブラウザで利用できる3Sカードアプリケーションにまとめ学習内容を共有する実践をし，利用についてのアンケート調査を行った。

(9)

1.2 研究の目的

本研究では，研究の目的を「iPadをはじめとするタブレット端末で利用できる，3Sカードを作成可能なアプリケーションの開発」と「開発したアプリケーションの利用法の検討」

とする。以下ではそれぞれの目的について述べる。

「iPadをはじめとするタブレット端末で利用できる，3Sカードを作成可能なアプリケーションの開発」について，本研究では，まずApple社が販売するタブレット端末であるiPad に搭載されている iOS を対象としたアプリケーションを開発する。iPad は画面に触れる

「タップ」と呼ばれる動作などを行うことで視覚的に利用できるタブレット端末の一つであり，画面の反応性などが良いため，3Sカードを容易に作成できるのではないかと考える。

iPad などのタブレット端末では，画面上に表示されるキーボードをタップすることで文字を入力することができ，また，五十音順に並べられたひらがなを選択することも可能であるため，アプリケーションにおいてキーボード入力の機能を持たせることも十分可能である。

しかしながら3Sカードでは，手書きを重要視しており，初歩的なプレゼンターションを行うためのツールとして，普段と同様に手書きで文字を書き入れられることが大切だと考えた。よって，iPad アプリケーションではキーボードによる文字入力でなく，手書きで画面に書き込むことにより3Sカードを作成できるアプリケーション開発を目的とする。

また本研究では，iPad版アプリケーションの課題点や，学校現場において利用される情報機器の普及状況を踏まえ，より汎用性が高いと考えられるブラウザを利用した iOS 以外のOSでも動作するアプリケーションの開発を行う。iPadはアプリケーションを利用する児童生徒の学習にとって魅力的な端末の 1 つであるが，後の章で述べるように実際の学校現場における普及率はかなり低いものとなっている。原因としてはiPadの価格がその他の端末と比較した際に高いことや，これまで学校で導入されてきた端末のOSはWindows系が多くを占めていることが挙げられる。したがってiPadで利用可能なアプリケーションの開発後に，iOSを含むほぼ全てのOSで利用可能なアプリケーションの開発を目的とする。

また，OSの制限を受けないことに加えて，タブレット端末でも据え置き型PCでも利用可能になるように配慮して開発を行う。

一方で，開発したアプリケーションの利用法についての検討を行う。上で述べたように，

本研究ではiOSを対象としたアプリケーション開発と，iOS を含めた全ての情報端末で利用可能な3Sカードを作成可能なアプリケーションの開発を行う。したがって，本研究の開発では，iPad専用のアプリケーションと，全端末で利用可能なアプリケーションの2つのアプリケーションが利用できるようになる。さらに，3Sカード自体は様々な利用法が考えられ，教科や場面を問わず色々な場面で利用可能である。

以上のことから，本研究における利用法の検討では，開発した 2 つのアプリケーション

(10)

について，それぞれの利用環境（iPad を利用する場合と，その他の端末の場合）についてどういった利用ができるのかについて検討し，利用法の検討を通して学校現場における3S カード作成アプリケーションの利用例を明らかにし，実際の利用を通して学習者の意見を得てその利点などを明らかにする。また，iPad版のアプリケーションでは，iPadに様々なアプリケーションをインストールできるメリットを生かし，その他のアプリケーションとの組み合わせた利用について検討を行う。

(11)

1.3 研究の方法

本研究では，iPadに搭載されているiOSで動作するiPad版のアプリケーションの開発と，Webブラウザで利用可能なアプリケーションの2つを開発する。iOSで動作するアプリケーションの開発では， “Xcode” とよばれる統合開発環境を利用しアプリケーション開発を行う。Xcodeは，視覚的にアプリケーションを作成可能な開発環境であり，アプリケーションの画面などを作成するStoryboardとプログラムを記述するソースを組み合わせてアプリケーションの開発を行うことが可能である。加えて，本アプリケーションでは，iPadの画面をなぞることで文字入力する目的を達成するため，お絵かきアプリケーションを元となるアプリケーションとして利用し開発を行う。iPad アプリケーションの完成後，シミュレータと実機でのテストを行い，最終的にiTunes Storeにアプリケーションを無料で利用できるようにアップロードする。

Webブラウザで利用可能なアプリケーションの開発では，iPadのみで利用可能であったアプリケーションを，iOS以外の端末でも利用可能なアプリケーションとして開発を行う。

その際，OSを問わずにインストールされていると考えられるアプリケーションであるブラウザに注目し，ブラウザで動作するアプリケーションの作成を目指す。ブラウザには様々な種類があるが，その多くで利用可能な HTML5 を用いたライブライである “Literally Canvas” を利用してアプリケーションを開発する。“Literally Canvas” は，ブラウザ上でお絵かきを行うことが可能であり，マウスや文字入力を利用した文字入力によりお絵かきや文字を入力する。入力した文字や画像などはPNG形式で画像として出力することが可能であり，iPad 版のアプリケーションと同じように利用することが可能である。“Literally

Canvas” を利用することにより，iPadのみではなく，その他のタブレット端末や据え置き

型コンピュータでの3Sカードの作成が可能になると考えられる。タブレット端末では，指で画面をなぞることで文字を書き込み，据え置き型コンピュータではマウスを利用した文字の書き込みを行う。また，キーボードを利用した活字の入力や，簡単な四角形や円などの図形を書き込む機能を導入時から備えているため，活用の幅がさらに広がることが予想される。

加えて，ブラウザ上で動作するメリットを利用し，ボタンを押すだけで作成したカードを共有可能なシステムの導入を検討する。開発したiPadで利用できる3Sカードアプリケーションは，iOSの機能を利用した送信や，LMS (Learning Management System) などの活用により共有する必要があったが，Webブラウザを利用するアプリケーションの開発では，

作成したカードがブラウザ上で共有できるようなシステムの導入についても検討する。

利用法の検討においては，iPad 版のアプリケーションと Web ブラウザを利用したアプリケーションのそれぞれについて，どのような利用法が可能であるかを検討する。本研究で

(12)

は，iPadで利用可能なアプリケーション開発と，ほぼ全ての端末で利用可能なWebブラウザを利用するアプリケーションの開発を目指した。したがって，それぞれの成果として，

iPadアプリケーションと，Webブラウザを利用したアプリケーションが開発され利用できる状態になる。

iPad版のアプリケーションについては，作成したアプリケーションをどのように利用可能かについて検討をし，実際に使用された例について実際の画面などを提示しながら検討する。また，iPadでは，様々なアプリケーションを同時に利用することも可能であるため，

その他のアプリケーションと合わせてどのような利用が可能であるかを述べる。

一方，Webブラウザで利用可能な3Sカードアプリケーションの利用法では，iPad版のアプリケーションと同様に利用できる機能などを述べアプリケーションを利用したカードの作成方法について検討する。また，Web ブラウザを利用することで実現した共有機能などの利用法についての検討を行い，共有システムを利用した教育学部生に対する実践における利用方法と，その際に行ったアンケート調査などについての考察を合わせて行う。

(13)

第2章デジタル3Sカードの開発

2.1 デジタル3Sカード for iPadの開発

2.1.1 デジタル3Sカード for iPad の開発環境とソースコード

本研究ではApple社の iPadとそのOSであるiOSを対象としてアプリケーションの開発を行った。iPad は持ち運び可能なタブレット端末であり，自由に持ち運び可能なことや一般的な PC と比較した際に起動速度が短く，起動の待ち時間無しにいつでも利用可能なことが利点として挙げられる（図2）。

図2 12.9インチと9.7インチの画面を持つiPad Pro

iPad 用のアプリケーションは，Apple社が販売するスマートフォンやタブレット端末用のOSであるiOSを搭載しており，同社が提供しているアプリケーション開発のための統合開発環境である Xcodeを利用することでプログラムを自由に作成することが可能である。

アプリケーションを開発するための言語としては，iOS アプリケーションで使用される

Objective-Cを用い開発を行った。統合開発環境の XcodeにはiOS のデバイスでの動作を

確認するためのシミュレータが搭載されており，シミュレータを利用することで実際の動作を確認することもでき，実機のiPadを利用して作成したアプリケーションの動作を確認することもできる。なお，Xcode は Apple 社のコンピュータである Macintosh 用の App

Storeから無料でダウンロード可能である（図3）。

(14)

図3 Xcode上の開発画面

Xcode を用いたアプリケーション開発では “storyboard” とよばれるアプリケーション

のインターフェースを視覚的に作成できる機能が特徴である。storyboard では，アプリケーションのインターフェース（見た目）を作成した上でそれぞれのボタンなどに役割などを割り当てることが可能であり，視覚的にアプリケーションの開発を行うことが可能である。

また，実際にボタンなどのアプリケーションの部品を配置するものを “UIViewController”

と呼び，画面の遷移に関してもそれらを継承することにより，簡単に行うことができる。

本研究では，以下のような環境を利用してアプリケーションの開発を行った。

表1 デジタル3Sカード for iPadの開発環境

開発機 MacBook Pro’ 13 (OS: OS X, ver. 10.9.3) 開発環境統合開発環境 Xcode5

使用言語 Objective-C シミュレータ iOSシミュレータ

実機 iPad mini

(15)

本アプリケーションの開発では，iPadのお絵かきアプリケーション作成のためのWebページを基礎となるアプリケーションとした上で，3Sカードを作成するための機能を実装した。参考としたアプリケーションでは “mainImage” と “tempDrawImage” という2つの描画のためのコントローラーを設定している。本研究では3Sカードアプリケーションの作成のために “mainImage” ， “tempImage” ， “changeImage” の3つを作成し，3Sカードのフォーマットを “changeImage” に設定した。“mainImage” と “tempImage” では，

最初の描画が “tempImage” に対して行われ，その後 “mainImage” に統合される。これは，

色が透過するように設定された場合に色を変更するためのものである。一方で

“changeImage” は最上位のレイヤーとして設定されている。本アプリケーションでは，消

しゴムの機能をカードの背景と同じ色である白色で塗りなおすことで実装している。従って，カードの画像を “mainImage” や “tempImage” に設定すると，カードの枠線を白色で塗り重ねてしまう問題が起きる。そのため，3Sカードを設定した “changeImage” は，保存時まで使用されることはない。描画が完了し，3S カードを画像として保存する際に

“changeImage” を “changeImage” に統合することにより，3Sカードを出力する（図4）。

図4 描画に使用されるレイヤー

なお，3Sカードを保存する部分のソースコードは次の通りである。

(16)

表2 写真保存のソースコード - (IBAction)save:(id)sender {

UIActionSheet*actionSheet=[[UIActionSheetalloc]initWithTitle:@"ほぞんする"

delegate:self

cancelButtonTitle:nil destructiveButtonTitle:nil

otherButtonTitles:@"ほぞんする！", @"やめる！

",nil];

[actionSheet showInView:self.view];

} //保存 -

(void)actionSheet:(UIActionSheet*)actionSheetclickedButtonAtIndex:(NSInteger)butto nIndex

{

if (buttonIndex == 0) {

//保存前にchangeImageを融合

UIGraphicsBeginImageContext(self.view.frame.size);

[self.mainImage.imagedrawInRect:CGRectMake(0,0,self.view.frame.size.width,self.vi ew.frame.size.height)blendMode:kCGBlendModeNormalalpha:1.0];

[self.changeImage.imagedrawInRect:CGRectMake(0,0,self.view.frame.size.width,s elf.view.frame.size.height)blendMode:kCGBlendModeNormal alpha:1.0];

self.mainImage.image=UIGraphicsGetImageFromCurrentImageContext();

UIGraphicsEndImageContext();

(17)

以上がデジタル3Sカード for iPad のソースコードのうち，3Sカードの保存に関する部分のものである。

//イメージの保存

UIGraphicsBeginImageContextWithOptions(mainImage.bounds.size, NO,0.0);

[mainImage.imagedrawInRect:CGRectMake(0,0,mainImage.frame.size.width, mainImage.frame.size.height)];

UIImage*SaveImage=UIGraphicsGetImageFromCurrentImageContext();

UIGraphicsEndImageContext();

UIImageWriteToSavedPhotosAlbum(SaveImage,self,@selector(image:didFinishSavin gWithError:contextInfo:), nil);

} }

-(void)image:(UIImage*)imagedidFinishSavingWithError:(NSError *)error contextInfo:(void *)contextInfo

{

// Was there an error?

if (error != NULL) {

UIAlertView*alert=[[UIAlertView alloc] initWithTitle:

@"えらー！！" message:@"ほぞんしっぱい！" delegate:nil cancelButtonTitle:nil otherButtonTitles:@"とじる", nil];

[alert show];

} else {

UIAlertView*alert=[[UIAlertView alloc] initWithTitle:@" せいこう！ "

message:@" ほぞんできたよ！ " delegate:nil cancelButtonTitle:nil otherButtonTitles:@"とじる！", nil];

[alert show];

} }

(18)

2.1.2 デジタル3Sカード for iPad の実装画面と使用方法

お絵かきアプリケーション作成用のソースコードと上で述べたような 3S カードの保存に関するソースコードを元に，iPad用のアプリケーションである，デジタル3Sカード for

iPad を作成した（App Storeでの販売名は「デジタル3Sカード」）。作成したアプリケー

ションの実装画面は次のようなものである（図5）。

図5 デジタル3Sカード for iPad の実装画面

デジタル3Sカード for iPad は，紙媒体の3Sカードのフォーマットを元にしており，

①から③までの内容を記述するスペースと，最上部のタイトルを記入する部分で構成される。

(19)

本アプリケーションでは，次に示すボタンを利用することで，文字色の変更や保存，詳細な文字色の指定を行う。

1. 9色の色鉛筆ボタンと消しゴムボタン 2. 「ほぞん」，「けす」ボタン

3. 歯車ボタン

1. の色鉛筆ボタンと消しゴムボタンでは，あらかじめ指定された色や消しゴムの機能を利用することができる。消しゴムボタンに関しては，描画した文字を削除するのではなく，

描画した文字に対してカードと同じ色である白色を重ねることで文字の削除を行なっている。

2. の「ほぞん」ボタンを利用することで，作成された3SカードをPNG形式の画像として「カメラロール」に保存することが可能である。また「けす」ボタンによって，作成したカードを全て削除することが可能である。これらのボタンを誤って押してしまうことが無いよう，本アプリケーションでは保存と削除両方において，確認のダイアログを出現させることによって誤操作の対策を行った（図6）。

図6 iOSシミュレータ上でのダイアログの様子

また，加えてiOSの仕様上，保存の際には一度だけiOSからアクセスの許可に対する確認のダイアログが出現する。

3. の歯車ボタンでは，色鉛筆では選択できない文字色の選択や，文字の太さの変更，透過率の変更を行うことが可能である。歯車ボタンをタップすると次のような画面が表示される（図7）。

(20)

図7 iPad 上での設定画面のシミュレーション

上に示した設定画面では，文字の太さを変えるための「ふとさ」ボタン，文字の透過度を変更できる「こさ」ボタン，色をRGBのバランスで変更可能な「ぱれっと」ボタンがある。

それぞれの値を変更することにより，右側上部にある丸の大きさや色，透明度が変更される。また，左最上部にある「もどる」ボタンをタップすることで元の3Sカードの画面に戻ることができる。

(21)

2.1.3 デジタル3Sカード for iPad の課題

本研究で開発した「デジタル3Sカード for iPad 」であるが，実際の現場での利用を検討した際，導入について3つの課題が考えられた。

1つ目の課題は，端末にアプリケーションをインストールする時間的問題である。学校現場では授業の準備の他にも様々な業務が存在する。そのため，アプリケーションを端末一台一台にインストールする必要のあるアプリケーションでは，その他業務に支障をきたすと考えた。また，アプリケーションに更新などがあった場合，インストール時と同様にそれぞれの端末のアプリケーションを最新のものにするなどのメンテナンスも必要になってくる。

このようなメンテナンス性の問題が1つ目の課題であると考えた。

続いて，2 つ目の課題として，現在の学校現場において iOS が使用可能な端末の普及率の問題がある。文部科学省は，教育の情報化ビジョン（文部科学省，2011）の「2020年度に向けて実施する主な施策等」において，安全安心な環境のもと、子どもたち1人1台の情報端末による教育の本格展開の検討を行うとしており，それに伴って学校現場においても情報端末の導入が行われてきている。また，平成27年度学校における教育の情報化の実態等に関する調査結果（文部科学省，2016）によると「(3) 教育用コンピュータのOS別台数」の項目において，小学校において普及している情報端末は約 92 万台あるとしている。

普及している情報端末のうち，iOSを搭載している端末は2.4%であり，Windowsを搭載するものが96.2%，Android OSを搭載するものが0.7%，Macintosh用OSを搭載したもの

が0.5%，その他Linux OSなどを搭載したものが0.2%であった。したがって，本研究で開

発した「デジタル3Sカード for iPad 」を利用できる端末は非常に少ないということが大きな課題と考えられる。

筆者が考える 3 点目の課題として，端末の性能差による動作の違いが挙げられる。本アプリケーションはiOS8.4以降のOSを対象として設定しており，iOS8.4はiPad 2以降の端末に使用可能である。本アプリケーションは，なぞった文字の描画や画像の保存を行うため，ある程度のCPU・GPU性能やメモリの性能が求められる。iPad 2以降，CPUやGPU の性能に加えて，メインメモリの強化などが行われてきており，端末の製造年度によってアプリケーションの動作が大きく異なる場合があり，具体的には，旧端末では描画速度が遅くなるなどの現象が見られる。したがって，製造年度によらず同程度の動作を保証できるようなアプリケーションの作成も望まれる。

(22)

2.2 デジタル3Sカード for Webの開発 2.2.1 Webブラウザ利用の検討

筆者が開発した「デジタル3Sカード for iPad 」における課題も考慮し，より多くの端末で利用可能なアプリケーションの開発について検討した。筆者は，iOSとその他OSを搭載する情報端末における共通点に着目し，情報端末が搭載している OS によらずインストールされている可能性が極めて高い「Webブラウザ」の利用を検討した。Webサイトを閲覧するためのWeb ブラウザでは，HTML5 やJavaScript などのプログラミング言語で作成したアプリケーションを実行でき，サーバーサイドのアプリケーションと連動させることによって，様々な方法で用いることが可能である。また，Web ブラウザを利用する利点として，デフォルトのWebブラウザ以外でも追加でインストールすることにより，様々なものを使用することができる点が挙げられる。万が一アプリケーションとの互換性がない場合などにWebブラウザを変えることでアプリケーションを利用できる可能性がある。

Webブラウザには様々な種類があり，WindowsではInternet Explorer，iOSではSafari，

AndroidではChromeがそれぞれ初期状態からインストールされている。またその他Web

ブラウザとして，OperaやFirefox，Windows10から搭載されたMicrosoft Edgeなどもあり，様々な種類が存在する。次の表では，現在学校現場で普及していると考えられるOSである，Windows，iOS，Android のそれぞれで工場出荷状態の端末に搭載されている Web ブラウザと，追加でインストールすることで使用可能な一般的に利用されているWebブラウザの対応についてまとめる（表3）。

表3 工場出荷状態でインストールされているブラウザ

OS デフォルト IE* Firefox Chrome Safari

Windows IE ◯ ○ ◯ △**

iOS Safari × ◯ ◯ ○

Android Chrome × ◯ ○ ×

（* IEはInternet Explorerのこと）

（**Windows版Safariの開発はver5.7.1で終了しており，セキュリティの問題から使用は推奨されない。）

以上のようにWebブラウザはOSによる制限を受けにくい。したがってブラウザの利用により，情報端末のOSによらないアプリケーションの開発を行うことができると考える。

(23)

2.2.2 デジタル3Sカード for Web の開発に利用したウィジェット

Webブラウザで利用可能なHTML5などの言語を用いたアプリケーションを開発することで，端末の種類に依存することなく3Sカードを作成することが可能である。HTML5では，グラフィックの描画に関する canvas 要素が新しく追加されており，HTML5 と

JavaScriptを組み合わせるだけで，Webブラウザ上に簡単に図形の描画などを行うことが

できるようになっている。筆者は，Webブラウザで3Sカードを作成するためのアプリケーション開発において HTML5 お絵かきウィジェットである “Literally Canvas” を利用し 3Sカード作成アプリケーションを開発した。Literally Canvasはオープンソース (BSDライセンス) のお絵かきウィジェットであり，作成したWebページに埋め込むことで利用可能である。また，“Literally Canvas” が提供するAPIを利用することによりカードの保存などの必要機能を容易に追加することが可能である。以下は “Literally Canvas” を3Sカードアプリケーションの元となるページに組み込んだソースコードである。

表4 “Literally Canvas” の組み込み

<head>

</head>

(24)

2.2.3 デジタル3Sカード for Webの実装画面と機能

本研究で開発した「デジタル3Sカード for Web」の実装画面は次のとおりである。実装画面は，Macintosh（OS X ver10.12.1）のWebブラウザであるSafariを用いて表示したものである（図8）。

図8 デジタル3Sカード for Webの実装画面

続いて，実装画面の機能について述べる。本アプリケーションは，主に 3 つの部分から構成される。1. 3Sカード画面，2. ツール選択部分，3. 追加機能部分の3部分である。以下は，それぞれの機能についての詳細である。

1. 3Sカード画面は，実装画面の大部分を構成する部分であり，カードを作成する際，最

も重要になる部分である。3Sカードのフォーマットは，Literally Canvasにもとから用意されている画像の組み込みを利用した。画像の組み込みは，次のソースコードのように，

Literally Canvasの導入と同様に，あらかじめ用意した3Sカードのフォーマットと作成し

たWebページのソースコードに追加で記述するだけで画像を組み込むことができる。

(25)

表5 3Sカードの組み込み

実装画面については，3Sカードのフォーマット（使用端末によっては右側に余白部分が発生する）で構成される。タッチ操作対応端末の場合は指でなぞる操作を基にした描画や，

マウスが接続された端末の場合は左クリックを押したままドラッグすることによる文字の描画が可能である。また本研究の最初に開発を行った「デジタル3Sカード for iPad」との違いとして，後述する機能を利用することで，キーボードを利用した文字入力や図形の描画，カードの背景色の選択などが可能となっている。

2. ツール選択部分は，画面左側にあるルーツ群である。ツール群は上部と下部の2つのツールに分かれる。上部のツールには，ペン，消しゴム，直線の描画，四角形の描画，円の描画，キーボードでの文字入力，多角形の描画，カードの移動，スポイトの計9つのツールが搭載されている。このうち，直線の描画では，矢印や破線の描画が可能である。また，文字入力では文字の大きさに加え，フォント選択，斜体の設定，強調（太文字）の設定を行うことも可能である。一方で下部のツールには，ペンの色の変更，図形の内部の色の変更，カードの背景色の変更，Redo及びUndoのボタン，カードの拡大縮小，カードの全削除のツールがある。ペンやカードの背景などの色に関する設定については，初期設定では，ペンの

// 3S

LC.setDefaultImageURLPrefix('img');

$(document).ready(function() {

var backgroundImage = new Image()

backgroundImage.src = 'img/sample_image.png';

var lc = LC.init(

document.getElementsByClassName('literally')[0], {

backgroundShapes: [ LC.createShape(

'Image', {x: 0, y: 0, image: backgroundImage, scale: 2}), ]

});

(26)

色が黒色，図形の内部の塗りつぶしとカードの背景色がそれぞれ白色になるように設定を変更している（ソースコードは省略する）。

また，マウスをツールボタンの上に重ねることで，各ツールの名称が英語で表示されるが，本アプリケーションの利用場面を考慮すると英語表記はふさわしくないため，日本語化も行った。以下は “Literally Canvas” における設定ファイルである “literallycanvas.js”

のうち，日本語化した部分のみのソースコードを抜粋する。なお，キーボードでの文字入力ツールのボタン画像についても，元々の “Aa” という表記から「あァ」の表記に修正を行っている。

(27)

表6 ツールボタンの説明の日本語化

//4344行直線ツール

Line.prototype.name = 'ちょくせん';

//4405行移動ツール

Pan.prototype.name = 'いどう';

//4474行えんぴつツール

Pencil.prototype.name = 'えんぴつ';

//4536行多角形ツール

Pencil.prototype.name = 'ぽりごん';

//4767行四角形ツール

Rectangle.prototype.name = 'しかく';

//4824行テキストツール

Text.prototype.name = 'もじ';

(28)

3. 追加機能部分では，3Sカードを作成するために必須である画像としてカードを出力する機能と，次に述べるカードの共有を行うためにカードを送信するためのボタンを作成した。ここでは，カードの保存の部分についてのみ取り上げ，共有のためのボタンについては後述する。カードの保存のために“Literally Canvas” に用意されているAPIを利用した。

これは，“Literally Canvas” の導入と同様にWebページへのソースコードの挿入によって実装することが可能である。以下は，カードの保存のために挿入したソースコードである。

表7 作成した3Sカードを画像として保存するソースコード

//保存

$('.controls.export[data-action=export-as-png]').click (function(e){

e.preventDefault();

window.open(lc.getImage().toDataURL());

});

(29)

2.2.4 デジタル3Sカード for Web への共有機能の実装

2.2.3 で述べたように，Webブラウザを利用して3Sカードを作成可能なアプリケーショ

ンを開発した。本研究では，3Sカードの作成機能に加えてカードをクラス全体で共有する機能の追加についても検討を行った。共有システムは，クラス全体に向けたプロジェクタや電子黒板などでの表示に加えて，利用者の端末でも投稿された3Sカードが表示される仕組みを目指した。そこで筆者は，カードを作成し送信するブラウザ側の開発と，送信されたカードを受け取り保存表示するサーバー側の開発を行った。よって共有サイトは，サーバー内のデジタル3Sカード for Web とは別のディレクトリに作成した。以下，Webブラウザ側とサーバー側のソースコードについてそれぞれ解説を行う。