青森大学ソフトウェア情報学部ソフトウェア情報学科
平成 29 年度 卒業論文

Web 制作（青森県教員採用試験解答）

緑川研究室
ソ 26011

佐藤絵里奈

共同研究者
ソ 26013

武久雄哉

目次
1.研究の背景・目的...................................................................................................................................... 1

1-1.はじめに ................................................................................................................................. 1
1-2.「分かりやすさ」について ..................................................................................................... 1
1-3.目的について .......................................................................................................................... 2
1-4.作業分担について ................................................................................................................... 2
2.使用ソフトについて .................................................................................................................................. 3

2-1. LaTeX について ..................................................................................................................... 3
2-2.MathJax について .................................................................................................................. 4
2-3.gnuplot について .................................................................................................................... 5
2-4.Excel について ........................................................................................................................ 52-5.HTML について...................................................................................................................... 6
2-6.CSS について.......................................................................................................................... 7
2-7.Atom について ........................................................................................................................ 8
3.教員採用試験について ............................................................................................................................ 10

3-1. 青森県教員採用試験について .............................................................................................. 11
3-2.神奈川県教員採用試験について ............................................................................................ 12
3-3.青森県教員採用試験と神奈川県教員採用試験の傾向と分析 .................................................. 14
3-3-1.高等学校数学科の内容と構成について ........................................................................... 14
3-3-2.青森県の特徴 .................................................................................................................. 15
3-3-3.神奈川県の特徴 .............................................................................................................. 16
3-3-4.比較について .................................................................................................................. 16
4.Web 制作について ................................................................................................................................... 17

4-1.初期画面について ................................................................................................................. 17
4-2.メニュータブについて .......................................................................................................... 18
4-3.PDF 表示と Web 表示について............................................................................................. 20
4-4.各ページについて ................................................................................................................. 21
4-5.大問 1 について ..................................................................................................................... 22i4-6.大問 2 について ..................................................................................................................... 23
4-7.大問 5 について ..................................................................................................................... 24
4-8. 大問 3,4,6 について ............................................................................................................. 25
4-9.PC 表示とスマートフォン表示について ............................................................................... 26
4-10.レスポンシブ表示について ................................................................................................. 27
5 .結論について .......................................................................................................................................... 29

5-1.考察について ........................................................................................................................ 29
5-2.成果・結論について .............................................................................................................. 29
5-3.課題について ........................................................................................................................ 30
6.謝辞 ......................................................................................................................................................... 30
7.参考文献・参考 URL .............................................................................................................................. 30

ii

1.研究の背景・目的
1-1.はじめに
私は数学の教師になりたいと思い、1 年次から教職を受け専門の授業を学び、過去問題[1][2]を解いてきた。数学の知識（応用力）を身につけなければならないことはもちろん、問題の意図を瞬時に理解するス
ピードも求められる。そして、青森県教育委員会ホームページ[3]の解答解説例に「分かりにくさ」を感じた。しかし「分かりやすさ」とはなんだろう。

1-2.「分かりやすさ」について
私は「分かりやすさ[4]」について考えていたところ、それについて書かれた本[4]と出会った。以下にその本の内容を抽出し言葉を補いながら書き下した。今まで創作ゼミナールでも「視覚的分かりやすさ」や「論理的分かりやすさ」等試行錯誤してきた私にとっては非常に納得でき感銘を受けた内容である。
（p39-59）
青森県教育委員会のホームページに記載されている教員採用試験の解答解説は非常に的確な手順と無駄のない「分かりやすい」解説だという人もいる。早くわかる人達にとっての「自然な歩幅（頭の中に階段があるとする）」はある人たちにとって「3 段飛ばし」になっていたりする。逆に極端にわからない人たちの「自然な歩幅」はある人たちにとって「歩幅が多く歩きにくい」になってしまうことがある。スムーズな「歩幅(分かりやすさ)」というのは人それぞれ違うものであって、多くの人にとっての「スムーズな思考の幅」を考えることが「分かりやすい HP」を作成するにあたって必要ことだ。HP だけではなく「教師」においても重要なことであると私は考える。
数学とは「数学」＝「数式」ではない。数学を学ぶことの多くは公式や定義、証明を覚え、学ぶことではなく「論理的な思考を養うため」である。公式や定義などは（多くの人は）知識として忘れていくものである。しかし、数学を学ぶことによって得た「論理的思考」は身に着けるものであるので忘れることはない。例えば、数学の問題で A＝D を証明しなさい。という問題があったとする。その際、A からいきな
り D を導き出すことは許されない。
A＝B………①、
B＝C………②、
C＝D………③、① ② により A＝C………④、② ④より A＝D（証明終了）
つまり、数学の問題を解くということは、（数式を使いながら）論理を確認するということである。数学を勉強して得られる「論理的思考力」というものはあらゆる分野、あらゆる場面で応用できる。社会に出て役立たないと思っていた「微分積分」「三角関数」も論理的思考力を鍛えるための材料だったのだ。
つまり、役に立たないどころか重要視するべき教科だったといえる。

1

例、会社「部下や上司を説得しわかりやすいプレゼンをする」「数字で考える」ことは、会社員にとって重要なスキルである。そのメリットは、考える行為の結論を具体的に伝えられることだ。例えば「頑張って売上げをアップさせます。
」と言うよりも、「客単価を 1.5
倍にして売上げをアップさせます。」と言ったほうがより具体的である。

1-3.目的について「打倒、青森県教育委員会公式 HP」をテーマとし「分かりやすい解答解説」を制作することにした。
教員採用試験を二人とも受け、知識不足もあり、公式や途中計算、手立てなどが教育委員会の解答にはな
くその為分かりにくく感じたためである。また、私は神奈川県の教員採用試験[5]も受けたので青森県と比較しながら考察していく。

1-4.作業分担について
共同研究者と私は二人とも青森県教員採用試験を受け、一次試験の難しさに屈服した。数学の知識を蓄えるとともに違う観点からのアプローチをすることで作業の効率化と充実を図るため 2 人で研究を行った。具体的には大問 1、2、5 は私が、3、4、6 は共同研究者が行った。

2

2.使用ソフトについて
2-1. LaTeX について
TeX は Donald Ervin Knuth によって開発された、フリーの「組版システム」。 すなわち、活版印刷のような「文字や図版などの要素を紙面に配置する」という作業をコンピュータで行う。LaTeX[6]は Leslie Lamport によって開発された TeX 上に構築されたフリーの文書処理システムである。 TeX は「組版のために開発された言語」でもあり、そのままでは使いにくい点もあるので，LaTeX では一般的な文書作成に便利な機能拡張がなされている。
現在では TeX で組版を行う場合には LaTeX を使うことが圧倒的に多いため、単に「TeX」と言った
場合にそれが LaTeX のことを指している場合も多いが、本来 TeX と LaTeX は区別されるべきものである。 以下のプログラムにより LaTeX において数式を美しく書き出すことが出来る。

¥documentclass{jsarticle}¥begin{document}

2 次方程式 ¥(ax^2 + bx + c = 0¥) の
解の公式は¥begin{eqnarray}¥Largex=¥Large¥frac{-b±¥sqrt{b^24ac}}{2a}¥end{eqnarray}です。
¥end{document}

図 1.プログラム

図 2.実行結果3

2-2.MathJax について
MathJax [7]とは、LaTeX で記述されたテキストベースのコマンドを Web 上で数式に整形・表示するオー
プンソースの JavaScript ライブラリである。
使い方
1. HTML の中に MathJax を使うための設定。(HTML[12]の中にあるコードを埋め込んでおくだけでよい。)
2. LaTeX のコマンドで数式を記述。
3. LaTeX のコマンドで書かれた部分が自動的にきれいな数式に置き換わる。
但し、$｛ ｝$ →\(\)とする。

4. ブラウザ側の設定は何も必要ない。
（見る側）
例

解の公式
コマンドの黄色部分が head 内で MathJax の JavaScript ライブラリを読み込んでいる部分である。これにより、HTML 内で LaTeX を表示させることが出来る。水色部分が LaTeX で数式を表現することが出来る。

<!DOCTYPE html><html><head><meta charset="utf-8" /><title>サンプル - MathJax を使って、Web 上に数式を表示 - TeX 入門</title><script type="text/javascript" async
src="https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.1/MathJax.js?c
onfig=TeX-AMS_CHTML"></script></head><body><h1>MathJax デモ</h1><p>2 次方程式 ¥(ax^2 + bx + c = 0¥) の解の公式は</p>¥begin{eqnarray}¥Largex = ¥frac{-b±¥sqrt{b^2-4ac}}{2a}¥end{eqnarray}<p>です。</p></body></html>
図 3.プログラム4図 4.実行結果

2-3.gnuplot について
gnuplot[8]とは 2 次元もしくは 3 次元のグラフを作成するためのアプリケーショ

ンソフトウェアである。数値計算や計算物理学で出力されたデータをグラフで見たい
とき等に大変役立つ。フリーで使うことができ、簡単に扱うことが出来る。入力したデータや数式等を元に、画面もしくは画像ファイルへグラフを生成する。画像ファ
イルのフォーマットは、PNG, EPS, SVG, JPEG などの多くの形式に対応している。用途によってバッチファイルとしてまとめて処理を行わせる方式と、逐次命令文を入力してグラフを描画させる方式とを使い分けることが出来る。オープンソースソフトウェアとして公開されており、高機能・高精度であることから、特に学術研究に広く利用されている。また、使い方を解説した
Web サイトも数多く存在する。

2-4.Excel について
Microsoft Excel[9]は、マイクロソフトが Windouws、macOC、iOS 及び Android 向けに開発・販売している表計算ソフトである。表を基にしたグラフの作成などもできる。
「平均点を求める」「標準偏差を求める」等「関数」と呼ばれる手続きでまとめられており、「教員採用試験数学の年度別比較調査」の為にこのツールを利用した。

5

2-5.HTML について
HTML[10]は「HyperText Markup Language」の頭文字を合わせたもので、Web ページを記述するための「マークアップ言語」である。
「ハイパーテキスト」は、異なった種類の文書同士を結び付けることができる「ハイパーリンク」を使用できるソフトである。クリックを押すと別のページにジャンプすることができる「リンク」のことでもある。HTML は、このハイパーリンクを使って、CSS[10]や JavaScript など他の言語を参照することができる。
また、マークアップは「目印をつける」という意味である。この「目印をつける」とは、HTML 文書内に置かれたコンテンツの各部分に、
「見出し」
「文書」
「画像」
「表」
「リスト」等の「役割名をつける」という意味になる。この役割は「タグ」と呼ばれる特別な記述スタイルによって定義される。HTML 文書のタグをパソコンで読み込むことで私たちがいつも見ている Web サイトのように文字や画像がブラウザで表示される。つまり、コンテンツの種類ごと正しくタグをつけてあげないと画面上で正しく表示されな
いということである。

＜見出し＞

＜本文＞
＜画像＞
・＜リスト＞
・＜リスト＞
・＜リスト＞

図 5.コンテンツ

62-6.CSS について
CSS[10] は 「Cascading Style Sheets」 の頭文字を合わせた略称である。一般的には CSS やスタイル
シートと呼ばれる。見出しや文章、画像などの「構造」を記述する HTML に対し、CSS は、HTML で記述された Web ページの見栄え、色やサイズ、配置などの「表示」に関する設定をするためのものである。HTML文書に CSS を組み合わせることを、「スタイルを適用する」という。CSS は、HTML 内に直接記述させたり、外部に専用ファイルを作って HTML 文書からリンクさせて適用する。

HTML

CSS

________________________________________________________________

スタイルを適用
図 6.CSS の仕組み7

2-7.Atom について
Atom [11][12][13] と は 、Web サ イ ト の見 出 しや 要 約な ど の メタ デ ータ を 構造 化 して 記 述 す る テ キ ス ト エ デ ィ タ で あ る 。 GitHub の創業者であるクリス・ワン

ストラス氏によって 2008 年に開始されたプロジェクトで、2015 年 6 月 26日にバージョン 1.0 がリリースされた。Atom は開発者向けに自分好みに自由にカスタマイズすることも可能である。以下に特徴や使い方を記す。
＜Atom の起動方法＞① 公式サイトからダウンロード。
（フリーソフト）
ダウンロードから起動まで非常に簡単である。
② Atom の日本語化。
「Install a Package」をクリックし日本語表示にする。
③ 日本語対応フォントの設定。
日本語に対応しておりプログラミングのコードも見やすい「Ricty Diminished」が一般的である。
④ テキストエディタの環境設定。
フォントが変わっていることを画面上で確認できれば完了である。

図 7.公式 HP ホーム画面

8

＜Atom の特徴＞•

タブ型で、使いやすいユーザーインターフェース。

•

無料で公開されているパッケージで機能追加が可能である。

•

1 つのウィンドウで単一のファイル、プロジェクト全体、複数のプロジェクトを開くことが出来る。
最大の特長はなんといってもその拡張性の高さである。一部の文字を入れるとその後の変換予測一覧を表示する「予測変換」や「キーバインド（ショートカット）」などの機能が実現されている。

ファイルを開き複数のプロジェクトを開くことが出来る。

図 8.Atom プログラム画面
一部の文字を入れるとその後の変換予測一
覧を表示する「予測変換」が表示される。

93.教員採用試験について
公立学校の採用試験[14][15][16]

教員採用試験

は、他の公務員試験と異なり、都道府県及び主に政令指定都市の教育委員会によって行われ、その採用は選考試験によることが定められている。なお、市町村立の小学校と中学校については、基本的に都道府県教育委員会が採用試験を行う。ほとんどの自治体が二段階による選考を行っている。概ね一次試験が学力試験と人物試験、二次試験が人物試験となる。
公立学校の教員は、教員採用試験に合格し、採用候補者名簿に登載された者から教育公務員（正規職員）になった教諭と、年度ごとに雇用契約を結ぶ（臨時職員的な）教諭又は常時勤務する講師（常勤講師）とで構成されることが多い。
（なお、臨時的任用による常勤講師も教育公務員の扱いを受け、雇用期間の定めがない正規職員に近い身分の常勤講師も一部に存在する。
）

試験について教職教養試験、一般教養試験、専門教養試験、論文試験、模擬授業試験、面接試験、集団討論・集団活
動試験、実技試験等一律に教員採用試験といっても様々な要素があり自治体によって異なる。
専門教養試験というのが校種、教科ごとに異なる試験である。中学校、高等学校の試験は、それぞれの教科に関する出題となる。これらの校種では高い専門性が求められるため、難易度も大学
入試レベルから大学の専門レベルと高度である。今回の Web 制作で扱っている範囲はこの専門教養試験である。

10

3-1. 青森県教員採用試験について
文部科学省が公表している「平成 28 年度」競争率（倍率）高い県は、次の通りになっている。
青森県は 5 位 6.9 倍であり、岩手県と同率である。上位 5 位の東北が 4 県も入っており、採用が困難なことが分かる。青森県教員採用試験[3]についての詳細を記していく。

1

鹿児島県

10.9 倍

2

沖縄県

9.7 倍

3

秋田県

8.0 倍

4

宮城県

7.2 倍

5

青森県、岩手県6.9 倍

表 1.平成 28 年度全国競争率
青森県が目指す教師像

•

広い教養

・ 充実した指導力

•

心身の健康

・ 教育者としての使命感・意欲•組織の一員としての自覚・協調性•

児童生徒に対する深い教育的

中学校教諭採用見込み人数

35 名

集団面接 「教科における言語活動はどのようにして充実させるか」等

11

3-2.神奈川県教員採用試験について
神奈川県[5]「かながわ教育ビジョン」（平成 19 年 8 月）を策定し、「思いやる力」「たくましく生きる力」「社会とかかわる力」を教育目標として「心ふれあう しなやかな 人づくり」を提唱している。
神奈川県が目指す教員像•

豊かな人間性や高いコミュニケーション能力。

•

子どもをよく理解し、多様な教育的ニーズに適切に対応できる力。

•

子どものやる気を引き出し、わかりやすい授業を実践できる力を身につけ、さらに、教員になってからも学び続ける意欲あふれる人材。

中学校高等学校全体 215 名 受験者数 1609 名 倍率 7.5 倍
横浜市[17]“横浜の子ども”を育んでいくための目標
知（確かな学力）徳（豊かな心）体（健やかな体）公（公共心と社会参画意識）開（国際社会に寄与する
開かれた心）学校・家庭・地域が連携して、3 つの基本【知】【徳】【体】の調和がとれ、2 つの横浜らしさ【公】【開】を身に付けた"横浜の子ども"を育んでいく。
横浜市が目指す教師像•

教育への使命感や情熱を持ち、学び続ける力。

•

子どもによりそい、豊かな成長を支える力。

•「チーム学校」の一員としてともに教育を想像する力。

中学校高等学校 数学 募集数約 20 名 受験者数 232 名 倍率 11.6 倍

12川崎市[18]
子どもの可能性を信じ、一人ひとりに寄り添ったはたらきかけができる教員であってほしい。という川
崎市教育委員会教育長のメッセージと共に書かれている教師像が以下となる。
「かわさき教育プラン」教
育が人・社会の発展の礎を築く。
•

子どもの話にきちんと耳を傾けることができる。

•

子どもと一緒に考え、行動することができる。

•

子どもに適切なアドアイスを与えることができる。

•

教材研究がきちんとできる。

中学校高等学校 数学 募集数約 20 名 応募者数 276 名 倍率 13.8 倍

相模原市[19]
人を大切にする「さがみはら教育」•

子どもの願いや悩みに真剣に向き合い、家庭・地域・仲間と共に、その実現・解決に努める教師、つまり児童生徒から信頼される教師。

•

子どもと共に感動を分かち合い、情熱をもって夢を語れる教師、そして、何事にも前向きで熱心に取り組み、かつ個性豊かな教師。

•

子ども一人ひとりが「もっと学びたい」「もっと知りたい」と感じる授業を目指し、その実現のため自己研鑽に努める探求心や向上心をもち、さらに自己を見つめ直すことができる謙虚さを併せもつ教師。

中学校高等学校 数学 募集数約 10 名 受験者数 63 名 合格者数 11 名 倍率 5.7 倍

13

3-3.青森県教員採用試験と神奈川県教員採用試験の傾向と分析
3-3-1.高等学校数学科の内容と構成について
昨年度の卒業研究では青森県と秋田県の教員採用試験過去問題を 5 年分比較し考察していた。その時の反省点を踏まえ、私が受験した 2 県を 10 年分比較し傾向を割り出し今後、教員採用試験を受験する上で参考にしたいと考えた。
例を用いて説明する。まず 3-3-1、3-3-2 で用いられている表は高等学校学習指導要領[20]を基に科目別
内容別に試験問題の各問を分類し出題された範囲を黄色で塗りつぶしたものである。例の数Ⅰについて
は次のように分類されている。分かりやすいように色分けした。表 2 の行の項目はⅠが数Ⅰ、(1)～(4)までが緑、ア,イがピンク、(ア)～(ウ)までが水色であり、列は年度を表している。以下の表 2 と対応しているのが分かる。

例

数Ⅰ(1)数と式(ウ) 正弦定理・余弦定理

ア数と集合

イ図形と計量(ア) 実数(3)二次関数(イ) 集合ア二次関数とそのグラフ

イ式

イ二次関数の値と変化(ア) 式の展開と因数分解(ア) 二次関数の最大・最小(イ) 一次不等式(イ) 二次方程式・二次不等式(2)図形と計量(4)データの分析

ア三角比

アデータの散らばり(ア) 鋭角の三角比

イデータの相関(イ) 鈍角の三角比
Ⅰ
2
3
4
ア
イ
ア
イ
イ ア
ア イ
（ア） (イ) （ア） (イ) （ア） (イ) (ウ)(ア) (イ)
1

H30
H29
H28
H27
H26
H25
H24
H23
H22
H21
H20

表 2.青森県教員採用試験科目別比較抜粋(10 年分)[20]: 文部科学省(2009.12).高等学校指導要領解答解説数学編 理数編 実数出版 p10-11
14

3-3-2.青森県の特徴
赤で囲んだ部分は数学Ⅰ[21]、Ⅱ[22]、Ⅲ[23]、A[24]、B[25]において 4 年以上出題されている分野である。それぞれ数Ⅰ（図形と計量、二次関数）、数Ⅱ（指数関数・対数関数、三角関数）、数Ⅲ（極限）数 A（場合の数と確率、整数の性質）、数 B（ベクトル）である。数Ⅱ（対数関数）についてはほぼ毎年出題されている。しかしながら、出題範囲は偏っていることはなく高校数学の範囲を網羅している。尚、1 つの問題に対し様々な観点から考察し解を導き出すというような見方、考え方、論理展開の仕方などの総合的に専門分野についての知識が教師に求められている。
「高等学校数学科の内容と構成について[20]」を基に作成
Ⅰ
Ⅱ
Ⅲ
2
3
4
1
2
3
4
5
1
2
3
4
ア
イ
ア
ア
イ
ア イ ア
イ ア イ ウ
ア
イ
ア
イ
ア
イ
ア
ア
イ ア イ アイイイ（ア） (イ) （ア） (イ) （ア） (イ) (ウ)(ア) (イ)(ア) (イ) (ア) (イ) (ア) (イ) (ア) (イ) (ア) (イ) （ア） （イ） （ア） （イ） (ア) (イ) (ア) (イ) (ウ) (ア) (イ) (ア) (イ) (ア) (イ) (ウ) (ア) (イ) (ウ) (ア) (イ) (ウ)
1

H30
H29
H28
H27
H26
H25
H24
H23
H22
H21
H20

A
1
(ア)

ア
イ
ア
(イ) （ア） (イ) (ウ)

B
2
イ

3
ウ

ア
ア
イ
(ア) (イ) (ウ)(ア) (イ)

1
イ

H30
H29
H28
H27
H26
H25
H24
H23
H22
H21
H20

15

2

3

ウ
ア
イ
ア
イ
(ア) (イ) (ア) (イ) （ア）（イ） (ア) (イ)

1
ア イ

数学活用
2
ア イ ウ

3-3-3.神奈川県の特徴
赤で囲んだ部分が 4 年以上出題されている範囲である。数Ⅱ（三角関数（三角関数の加法定理））、数Ⅲ（微分法（不定積分と定積分・積分の応用））、数 A（場合の数と確率）、数 B（数列・ベクトル）などはほぼ毎年出題されている。
Ⅰ
2

1

3

ア
イ
ア
イ
イ ア
（ア） (イ) （ア） (イ) （ア）(イ) (ウ)(ア) (イ)

4
ア イ

Ⅲ
4
5
1
2
3
4
ア
イ
ア イ
ア
イ ア イ ウ ア
イ
ア
イ
ア
イ
ア
ア
イ
イ
(ア) (イ) (ア) (イ) (ア) (イ)(ア) (イ) (ア) (イ) （ア）（イ） （ア） （イ） (ア) (イ) (ア) (イ) (ウ) (ア) (イ) (ア) (イ) (ア) (イ) (ウ) (ア) (イ) (ウ) (ア) (イ) (ウ)
1

2

Ⅱ
3

H29
H28
H27
H26
H25
H24
H23
H22
H21
H20
H19
A
1
(ア)

ア
イ
ア
(イ) （ア） (イ) (ウ)

B
2
イ

3
ウ

ア
ア
イ
(ア) (イ) (ウ)(ア) (イ)

1
イ

2

3

ウ
ア
イ
ア
イ
(ア) (イ) (ア) (イ) （ア） （イ） (ア) (イ)

数学活用
1
2
ア イ ア イ ウ

H29
H28
H27
H26
H25
H24
H23
H22
H21
H20
H19

3-3-4.比較について＜教育目標・目指す教師像等について＞
青森県は教養や指導力を重点とし、教師としてのあるべき姿を理想と掲げている。神奈川県は「子ども」に対する態度や接し方等についての記述が多く、青森県よりもより具体的かつ明確な目標である。
＜教科について＞
青森県、神奈川県共に出題されている範囲は高等数学に準じたものである。共通して出題されているのが数Ⅱ（三角関数（三角関数の加法定理））、数 B（ベクトル）である。2 県とも高等学校数学に準じた問題が出題されており応用問題はあるが大学以上で学習する難問は出題されていない。また青森県は大問 5
つに問が 2,3 問であるのに対し、神奈川県の問題は大問が約 10 個ある。青森県の方が見方や考え方等
様々な方向からの問題である。その為、青森県教員採用試験解答が 1 つではなく様々な解き方、考え方があるため別解は必要であるといえる。
16

4.Web 制作について
4-1.初期画面について
初期画面はタイトルを平成 30 年度青森県教員採用試験解答解説としクリックすると大問 1 にページジャンプするようにした。また一度大問画面へ行くと初期画面へ戻ってくる設定はない。初期画面は大問と同じレイアウトにした。右図が Web 表示される画面で以下がソ－スコードである。
<html></html>

図 9.初期画面<head><meta charset="UTF-8"><link rel="stylesheet" href="index001.css"></head><title>平成 30 年度青森県教員採用試験別解について</title><script type="text/javascript" async

src="https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.1/MathJax.js?config=TeX-AMS_CHTML"></script><style type="text/css">
div2{
background-image: url('ex1.jpg');
background-size: cover;position:relative;
text-align: center;
top: 100px;
font-size:x-large;}<div id="menu"><ul><li><a href="#">ホームページ</a></li><li><a href="#">リスト</a></li><li><a href="#">日記</a></li><li><a href="#">掲示板</a></li></ul></div></style><body><center>17

<div style="border-style: solid ; border-width: 1px; padding: 10px 5px 10px 20px;"><h1>
平成 30 年度青森県教員採用試験<br>
別解<br></h1><a href="index.html">青森県教員採用試験 解説</a></center></body><p></p><br>

4-2.メニュータブについて
メニュータブはタイトルの下に表示することにした。大問ごとにページをジャンプさせ PDF 表示のスクロール操作をできるだけ排除した。大問の問題文は背景を青く文字色を白に設定し各問との変化をつけ、カーソルをもっていくと下線が表示され、クリックすると問題文と同じように背景が青く文字色が白く表示するようにした。以下メニュー画像とコードである。

図 10.メニュータブ/* --- HTML --- */<div class="nav"><ul class="nl clearFix"><li class="active"><a href="index1.html">大問 1</a></li><li><a href="index2.html">大問 2</a></li><li><a href="index3.html">大問 3</a></li><li><a href="index4.html">大問 4</a></li><li><a href="index5.html">大問 5</a></li><li><a href="index6.html">大問 6</a></li></ul></div>/* --- CSS--- *//* --- ナビゲーションバー --- */div.nav {width: 100%; /* ナビゲーションの幅 */18

padding-top: 20px; /* ナビゲーションの上パディング */background-color: #ffffff; /* ナビゲーションの背景色 */font-size: 80%;}/* --- メニューエリア --- */div.nav ul.nl {width: 99%; /* メニューの幅 */margin: 0 auto; /* メニューのマージン（上下、左右） */padding: 0;
list-style-type: none;text-align: center;}/* --- メニュー項目 --- */div.nav ul.nl li {width: 6em; /* タブの幅 */margin-right: 4px; /* タブの右マージン */background: #f9f9f9 url(tab_gen2_left.gif) no-repeat left top; /* タブの背景（左） */float: left;}/* --- リンク --- */div.nav ul.nl li a {display: block;position: relative; /* IE6 用 */padding: 6px 2px 5px; /* リンクエリアのパディング（上、左右、下） */background: url(tab_gen2_right.gif) no-repeat right top; /* タブの背景（右） */text-decoration: none; /* テキストの下線（なし） */}/* --- ポイント時の設定 --- */div.nav ul.nl li a:hover {text-decoration: underline; /* テキストの下線（あり） */}/* --- アクティブなタブ --- */div.nav ul.nl li.active {background: #004080 url(tab_act2_left.gif) no-repeat left top; /* タブの背景（左） */}div.nav ul.nl li.active a {background: url(tab_act2_right.gif) no-repeat right top; /* タブの背景（右） */color: #ffffff; /* アクティブタブの文字色 */19}/* --- clearfix --- */.clearFix:after {content: ".";
display: block;height: 0;
clear: both;
visibility: hidden;}.clearFix {min-height: 1px;}/* --- 見出し --- */h2 {position: relative; /* Netscape7 用 */margin: 0;
padding: 6px 10px 3px 28px; /* 見出しのパディング（上右下左） */background: #004080 url(heading_icon.gif) no-repeat 8px; /* 見出しの背景 */border-bottom: 1px #002448 solid; /* 見出しの下境界線 */font-size: 100%; /* 見出しの文字サイズ */color: #ffffff; /* 見出しの文字色 */4-3.PDF 表示と Web 表示について
そ も そ も PD F と は 「 Po r ta bl e Do cu me nt F or m at 」 の 略 で あ る 。 電 子 化 さ れ た 書類（文書・ドキュメント）で、仕事での文書の作成・交換・印刷物の入稿・イン
タ ー ネ ッ ト 上 で の カ タ ロ グ な ど PD F は 幅 広 く 使 わ れ て い る 。 青 森 県 教 育 委 員 会 が提 示 し て い る 教 員 採 用 試 験 解 答 も PD F 形 式 で 出 力 さ れ て い る 。 PD F は 閲 覧 す る ソ フ
トをインストールしなくてはならなかったり、必要なページに素早く移動すること が で き な か っ た り す る 。 We b 表 示 は イ ン タ ー ネ ッ ト が つ な が れ ば 環 境 は 関 係 な く
閲 覧 す る こ と が 出 来 る 。 Ma th Ja x に よ り 数 式 が 美 し く 表 示 さ れ る た め 視 覚 的 に わ か
り や す い We b 制 作 に 至 っ た 。

20

4-4.各ページについて
大問 1 はクリックしなくとも解答解説の最初の画面として表示される。全ペー
ジに共通し、途中式には式番号を設定すること（ページごとに）、最終的な答え
は途中式よりも表示サイズを大きくし下線を引くこと、公式や大事な部分には何ら か の 変 化 を つ け ポ イ ン ト を 明 確 に す る こ と 、 数 字 、 文 字 は 全 て La Te X

[26][27][28]のコマンドを用いることなどの注意点を踏まえながら作成している。以下は実際のP D F 表 示 と 今 回 制 作 し た We b 表 示 に つ い て の 比 較 で あ る 。
相違点
・問題文を表示・式番号を表示・解答を強調・配点の有無等図 12.青森県教育委員会 HP（PDF 表示）

図 11.今回制作した大問 1（Web 表示）

21

4-5.大問 1 について
数Ⅰ（二次関数）についての問題である。二次関数とグラフ、値の変化等関数概念の意味を深く問われている。関数の最大・最小を求め、二次関数のグラフと二次不等式の関係について主に出題されている。中学校で扱われている解の公式、
平方完成等を用いる解答解説を作成した。以下大問 1 の解答解説である。

図 13.大問 1

22

4-6.大問 2 について
数Ⅱ（図形と方程式）を中心とした垂直・平行関係、相似についての証明、極限、対数関数など幅広い分野についての知識が問われている。直線の方程式から座標を導きだした。証明や図が多くなるとどうしても途中式が多くなる。大問 2のページが全ページの中で一番量が多い。その結果「分かりやすさ」という点でかえって見づらいかもしれない。以下大問 2 の解答解説である。

図 14.大問 223

4-7.大問 5 について
数 A（ （ 平 面 図 形 ） 三 角 形 の 性 質 ） 数 Ⅱ （ 図 形 と 方 程 式 ） や 数 Ⅲ （ 微 分 法 ） な
ど関数に関しての出題である。三角形や円と直線の位置関係などについて考察した。以下大問 5 の解答解説である。

図 15.大問 524

4-8. 大問 3,4,6 について
大 問 3、 4、 6 に つ い て は 共 同 研 究 者 に 行 っ て も ら っ た 。 主 に 数 A（ 場 合 の 数 と 確
率、平面図形）と学習指導要領についてだ。統一感を出すために重要公式を囲む
枠や強調したい部分などは多少修正をかけた。その結果全体を通してまとまりのある解答解説となった。以下修正した部分である。

図 16.大問 4 の重要公式

25

4-9.PC 表示とスマートフォン表示について
PC 表 示 で は で は ど の よ う な ブ ラ ウ ザ で も 閲 覧 す る こ と が で き る の は 確 認 で き
た 。 （ Fi re Fo x、 Edge、 Google Chrome） つ ま り イ ン タ ー ネ ッ ト 環 境 が あ れ ば ど こ で も閲 覧 可 能 と い う こ と だ 。 だがスマートフォン表示には支障が出る。以下の図は PC 版とスマートフォン版を比較したものである。

余白や、クリック操作等のCSS が上手く効かない。

図 17.PC 表示

図形、数式が小さくならない。
図 18.スマートフォン表示26

4-10.レスポンシブ表示について
ユーザーの デバイス（パソコン、 タブレット、モバイル）に関係なく、同じ URL で同じ HTML コードを配信するが、画面サイズに応じて（つまり「レスポンシブ[29]」に）表示を変えることができる。4-9 でPC 版とスマートフォン表示を見比べたように「レスポンシブ表示」ができていないのが分かる。
「レスポ
ンシブ表示」が可能になればモバイル端末、タブレット端末関係なく閲覧することができ、より便利になると思い試みた。以下の図 19 はメディアクエリ[30]という方法を取り入れた表示である。

CSS が効くようになった。

数式表示はそのまま。

図 20.スマートフォン表示

画像を表示範囲に合わせることができる。
図 19.レスポンシブ表示（未完成）27

以下は図 19 の作業手順とプログラムのコードである。PC 版から変化させた部分に番号を振った。
① HTML に PC 用 CSS と mobile 用 CSS のリンクを貼る。
② 横幅 640px を境に PC、mobile を分けるように設定。
③ PC、mobile それぞれ対応するようメディアクエリでフォントサイズや画像の大きさを変化させる。
/* HTML*/<html></html><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width,initial-scale=1.0"><link rel="stylesheet" media="(min-width: 640px)" href="index_pc.css">…………①<link rel="stylesheet" media="(max-width: 640px)" href="index_mobile.css">…………①</head>/* PC 用 CSS */@media print, screen and (min-width: 640px) { ………………………②
本文}/* mobile 用 CSS */@media screen and (max-width: 640px) { ………………………②
html {
font-size: 100%;// 600px 以降から、100px ごとに 1px 大きくなる@media (min-width: 600px) { …………………③(フォントサイズの設定)
font-size: calc(112.5% + 4 * (100vw - 600px) / 400)}// 1,000px 以上は、22px に@media (min-width: 1000px) { …………………③(フォントサイズの設定)
font-size: calc(137.5%)}}
img{ …………………③(画像の設定)
max-width: 100%;height: auto;
width /***/:auto;}28

5.結論について
5-1.考察について
学 部 、 年 齢 を 問 わ ず に 平 成 30 年 度 青 森 県 教 員 採 用 試 験 問 題 を 何 問 か 解 い て も ら
い今回制作した解答解説を見ながら自分で丸付けをしてもらった。事前の予想としては途中計算の明確さを意識しすぎて「分かりやすさ」という部分ではどう評価されるか見当つかなかった。自分の「分かりやすい尺度」に合わせて作成したために万人に「分かりやすい解答解説」とまではいかなかった。以下は丸付けしてみての感想である。
・途中の公式や重要な部分、解答が明確で分かりやすかった。
・問題の移動がクリック操作によりスムーズに進むことができた。
・高校数学について少し思い出すことができた。
・途中計算が長く、いらないのではないか。
・理解できる解説とできない解説があった。
・配点がなく、1 ページが長く感じた。
等の評価をもらうことができた。

5-2.成果・結論について
最終的に「分かりやすい解答解説」を制作するためには思考回路が明確な途中
計 算 と 図 ・ 公 式 の 有 無 、 そ し て We b 上 で の 見 や す さ が 重 要 で あ る と い う 結 論 に 至った。また、「分かりやすさ」には個人差があるが 8 割の人が分かるように作成
す る こ と が 大 事 で あ り 、 We b 上 で の 出 来 上 が り を 予 想 し な が ら 作 成 す る こ と が 必 要
で あ る 。 青 森 県 と 神 奈 川 県 10 年 分 を 比 較 し 考 察 で き た こ と は 成 果 で あ る 。 し かし、傾向と分析はあくまで過去のものととらえるべきだ。学習指導要領も年々変化を続け、新たな領域を出題するかもしれない。傾向を踏まえた上で数学を学んでいきたい。

29

5-3.課題について
今回の制作では解答解説は緑川先生からアドバイスしてもらい、グラフについても試行錯誤し上手く出来上がったが、Web 上での表示に手間を取られた。出来上がりを予想しながら作成することが出来ず
予想以上に 1 ページが長くなり、見る人によってはかえって分かりづらくなってしまったかもしれない。
PC で表示できれば mobile 端末でも表示できるものだと思い込み、レスポンシブ対応について最後まで取り組めなかった。
しかし、
スマートフォンなどの mobile 端末で解答解説を見る人はいるのだろうかという疑問を持った。
mobile 端末の場合は画面が小さく計算式が見づらいので簡単な公式や定理を確認するようなアプリ形式のものがいいのではないか、それぞれの端末に合った数学の学び方があるのではないかと感じる。いず
れにせよこの研究を終えることで分かったことである。

6.謝辞
本研究に際して、指導いただきました緑川先生には感謝の意を表します。共同研究者とは研究を共に進め，多くの刺激と示唆を得ることができました。感謝の意を表します。そして、Web 制作に協力して下さった皆様には，感謝の念にたえません。本当にありがとうございました。

7.参考文献・参考 URL
7-1.参考文献[6]

奥村 晴彦. (1991). LaTeX 美文字作成入門パソコンによるページレイアウト. 技術評論社.

[4]

細野 真宏. (2008). 細野真宏の数学嫌いでも「数学的思考力」が飛躍的に身につく本！ 小学館.
[8]矢吹 道郎 監修. (2000). 使いこなす GNUPLOT.

[20]

文部科学省(2009.12).高等学校指導要領解答解説数学編 理数編 実数出版

[21]

数Ⅰ.(2011.3.9).検定済.数研出版[24]

数 A.(2011.3.16).検定済.数研出版[22]

数Ⅱ.(2011.3.23).検定済.数研出版[25]

数 B.(2012.2.15).検定済.数研出版[23]

数Ⅲ.(2012.3.6).検定済.数研出版[1]

教員採用試験の過去問シリーズ青森県の数学科過去問 2017 年度版.(2016).共同出版[2]

教員採用試験の過去問シリーズ神奈川県・横浜市・川崎市・相模原市の数学科過去問. (2015).

共同出版
[10]

さわだ えり.(2013).速習 Web デザイン HTML&CSS［HTML5&CSS3 対応］.技術評論社

30

7-2.参考 URL[26]

LaTeX - コマンド一覧

http://www1.kiy.jp/~yoka/LaTeX/latex.html[27]

LaTeX コマンド集

www.latex-cmd.com/equation/matrix.html[28]

LaTex コマンド-MathJax を使って、Web 上に数式を表示-数学の公式

https://www.mathjax.org/[11]

Atom 公式 HP

https://atom.io/[12]【すぐわかる！】Atom エディタのインストールと日本語化、便利な使い方

https://eng-entrance.com/atom-editor[13]

今注目のテキストエディタ「Atom」

https://blog.codecamp.jp/atom_utility[7]

MathJax Beautiful math in all browsers.

https://www.mathjax.org/[9]

Excel 2016、新しくなった XLS 表計算ソフトウェアの主な機能と購入

https://products.office.com/ja-jp/excel[3]

青森県公立学校教員採用候補者選考試験について

https://www.pref.aomori.lg.jp/bunka/education/kyousai.html[5]

神奈川県公立学校教員採用候補者選考試験について

www.pref.kanagawa.jp/cnt/f7272/[17]

教員採用試験 - 横浜市

http://www.city.yokohama.lg.jp/kyoiku/saiyou/kyoin/[18]

平成 29 年度実施 川崎市立学校教員採用候補者選考試験の応募状況について

http://www.city.kawasaki.jp/templates/press/cmsfiles/contents/0000089/89052/h29oubojyoukyu.p
df[19]

平成 29 年度実施 相模原市立学校教員採用候補者選考試験実施要項

http://www.city.sagamihara.kanagawa.jp/_res/projects/default_project/_page_/001/005/283/yoko
.pdf
[14]

公立学校教員採用選考試験の実施状況

http://www.mext.go.jp/a_menu/shotou/senkou/1243159.htm[15]

教員採用試験 – Wikipedia

https://www.weblio.jp/content/教員採用試験[16]

レスポンシブ対応について

www.asobou.co.jp/blog/web/responsive[29]

メディアクエリの利用 - CSS | MDN

https://developer.mozilla.org/ja/docs/Web/CSS/Media_Queries/Using_media_queries

31