Menu

Subscribe

モバイルアプリ開発演習 (2018)

はじめに

目的

  1. ウェブとコード (HTMLとJavaScript) を学習し、コードを書く。
  2. コードを書き、ウェブアプリをつくる。
  3. ジャンル別に定番アプリを詳しく調べる。
  4. ヒューマンインタフェースについて考える。
  5. アプリは人のためになるか？

日程

日付 内容
11月1,2日 Text の世界
11月1,2,8日 つるかめ算からコードの世界へ
11月2,8,9日 nodejs サーバを立てる。
11月8,9日 算数の応用問題 からひとつを選び(たとえば、時計算)それをアプリ化する。算数の応用問題のイラストをマイクロソフト ペイントで作成する。
11月8,9日 JavaScript 練習問題 - W3C School より JS Variables, JS Operators, JS Functions
11月15,16日 JavaScript で書くパズルとゲーム
11月15,16日 W3C School - JS Objects, JS Events, JS Strings
11月22日 W3C School - JS Arrays, JS Dates, JS Math
11月29,30日 W3C School - JS Comparisons, JS COnditions, JS Switch
12月6,7日 W3C Schoold - JS Loops, HTML DOM
  1. MS Paint 使い方
  2. How to MS Paint ビデオ
  3. 今週のcnet news

JavaScript 書き方と動かし方

JavaScript 書き方と動かし方の解説。

エディター Brackets をインストール

アドビの製品 Brackets で、HTML、CSS、JavaScript のコードを書き、実行する。

Brackets

このエディターの次の宣伝文句に惹かれた。

Imgur

W3C のチュートリアルを試してみる

HTML + CSS

はじめの一歩

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
  <title>My first styled page</title>
</head>

<body>

<!-- Site navigation menu -->
<ul class="navbar">
  <li><a href="index.html">Home page</a>
  <li><a href="musings.html">Musings</a>
  <li><a href="town.html">My town</a>
  <li><a href="links.html">Links</a>
</ul>

<!-- Main content -->
<h1>My first styled page</h1>

<p>Welcome to my styled page!

<p>It lacks images, but at least it has style.
And it has links, even if they don't go
anywhere&hellip;

<p>There should be more here, but I don't know
what yet.

<!-- Sign and date the page, it's only polite! -->
<address>Made 5 April 2004<br>
  by myself.</address>

</body>
</html>

このHTMLコードをコピーして、Bracketsにペーストすると次のようになる。

Imgur

Brackets の画面を見ると、HTMLコードの構造と要素が、それぞれ左側の行番号となりの下向き三角、およびトークンの種類によって色分け表示されている。

このHTMLコードの例を見ても分かる通り、コードにはアルファベットの他にも様々なシンボル（記号）が使われている。

これらのシンボルに慣れるには、その読み方も知っておくとよい。もとは英語圏からのシンボルなので、英語の発音を知るための参考にユーチューブの例をあげておく。

Computer Symbols | Learn British English with Britlish - YouTube

ファイルの「ライブプレビュー」

ファイルメニューから「ライブプレビュー」を選ぶ。

Imgur

スタイルタグで背景の色を変える

Imgur

Imgur

ナビゲーションバーを付け加える

ここで ulタグでつくったリストを左に寄せる(padding-left)。

さらに、リスト全体の位置、余白、幅を position, top, left, width で指定する。

Imgur

Imgur

ここで、'2em' とは、いまのフォントサイズの2倍を意味する。いまフォントサイズが12ポイントなら、'2em'は24ポイントになる。em は、CSSではよく使う便利な単位だ。

はじめての HTML コード

HTMLをはじめよう

JavaScript 書き方と動かし方

JavaScript 書き方と動かし方の解説。

新しいフォントの追加方法

Windowsに限らないが、OSに新しいフォントを追加したいときどうすればいいのだろうか。あまり知られていないし、Windowsもバージョンによって少しやり方が異なるので説明する。

Windows 10 Version 1803 Home の場合

Imgur

WindowsロゴキーとRキーを同時に押す

下のようにタイプし、OKをクリックする。

Imgur

フォントフォルダーが開く、そこへ新しいフォントをコピーする。

Imgur

ドラマ「シリコンバレー」

シーズン 1 の試聴

15 パズル

「15 パズル」の出題と解法、それぞれについてのアルゴリズムとそれらをインプリメントしたコードを学習する。

リンク先のコードは、JavaScriptなどでインプリメントされている。

ここでは、HTML + CSS + JavaScript によるWebアプリの作成を目標としている。それが標準的な目標であるが、Winodws、Android OSなどの環境でスタンドアロンでも動作させる。

課題

やさしいものから取り組むようにする。

  • リンク先にある HTML + CSS + JavaScript のコードを、ローカルPCのファイルへコピーしてローカルマシンで動作させる。
  • リンク先にあるパズル「三姉妹」の絵を入れ替える。
  • 15パズルを解くアプリをインプリメントする。