はじめに

ポートフォリオ作成時、画像の上にカーソルを置いた時に文字を浮かび上がらせる処理をしていました。
その処理をスマホでも適用させるための実装のメモを残します。

結論

HTMLに以下を追加するのみです！

<div class='top' ontouchstart="">

ontouchstart=""　という属性を追加することでスマホ（タッチデバイス）でも画像をタップした際にhover時の動きをしてくれます。
ontouchstartとは、その名の通り「指先が触れた時に発生する」イベントです。

この属性を追加しないと、スマホ時にhoverが反応しない事を本番環境にアップしてから気づいたので、スマホ時でのテストも大事ですね。（当たり前）

CSSに関しては何も追加しなくても適用されます。

終わる

以上、ただのメモでした。

経緯

• 知り合いが農業をやっており、事業拡大を今後考えるためにホームページを作成したいという話をされた。

• 自分は普段画像処理ミドルウェアの開発なのでWeb系はHTML, CSS, javascriptが読み書きできるくらい、node.jsはちょっと触ったことあるレベルだから正直わからん、、、けどスキルアップしたいということでまずはモックを作ってみるよ！ということにした。

開発環境

開発マシンどうする

• とりあえず自分のPCを汚したくなかったので、virtual boxで仮想マシンを構築して開発する方針にする

• virtual boxにubuntu18.04を入れてみたところ重い・・・自分のPCはメモリが8GBしかないためちょっときついか、、、→ xUbuntuは軽い、という記事をみたので virtual box + xUbuntu18.04 で開発してみることにする。

なにつかって開発すればいいの？

• 調べてみたところ、WordPressを使用してホームページを作ることが多いらしい、ブログとかは特に。
  CMS(Contents Management System)というらしい、専門的な知識がない人でも簡単にホームページを作れるようになる、というところが目的らしい。

• でも自分は、javascriptコードとか書いてガチャガチャ動かせるようにしたかったのでちょっと違うかな、という感じ。一応WordPressでもできるみたいだけど、、、webアプリっぽい感じで開発したかった。
  あとWordPress自体がPHPベースで作られているみたいで、PHPかぁ～という感じであった。会社であんま使われているの聞いたことないから勉強してもなぁと。

• 有名どころのweb開発フレームワークとしては
  PHP Laravel
  Ruby on Rails
  あたりが有名みたいだった。

• 個人的にjavascriptを極めていきたかったのでサーバーサイドもjavascriptでやっていきたいということで調べたところ出てきたキーワード node.js, Express, jQuery, Angular, vue.js, React...沢山あるけど微妙に役割が違うみたいよくわからん、、、
  どれがフレームワークで、どれがライブラリ？サーバーサイド？クライアントサイドで動作？ということで整理する？

• というかそもそもWebサイトを作りたいのか、Webアプリを作りたいのかにもよって使うものが違う気がするのでそこも整理したい。

私はWebサイトとWebアプリどっちつくるの？

今回やりたいと考えたこと

• 情報の発信
  生産者のこだわりとかアクセスマップとか、そういう情報を閲覧者に伝えたい。
• 問い合わせフォーム、取り扱い商品の販売のようにレスポンシブな感じ

以上を踏まえて以下のサイトを参考にすると、対話成分が入る場合はWebアプリケーションという考えとして設計していった方が良いみたいだ。
参考リンク: IBM様 Web サイトから Web アプリケーションへの変換

ということで今回は情報提供を中心としたWebアプリケーション開発をすることにします！！

node.jsってなに？

• Node.jsとはサーバーサイドでjavascriptを使用できるようにしたもの、Webサーバーとしても動作する。
• あくまで実行環境を提供するようなイメージであって、これ自体はフレームワークとは言わないようである(フレームワークとしては大きすぎる)。

Express

• Node.js上で動作するMVCフレームワーク。これはフレームワーク、ふむ。サーバーサイドにいれるものということか。

• MVCとはModel View Controller モデル・ビュー・コントローラ を意味していて、そういうデザインパターンのこと、UIとロジックを分ける、みたいなイメージですね。

• 「Express」「Meteor」「Sails」がJavaScriptの三大フレームワークらしい。

• Expressを使用したCMSとしてKeyStoneJSというものがあるみたい、本番では使ってみようかな。

jQuery

• JavaScriptのライブラリの一つ。ふむ、これはフレームワークではないのね、なるほどね。
• フロントエンド(クライアントサイド)で使用されることが多いらしい、JavaScriptのライブラリなのでサーバーサイドでも使えるらしい。

Angular

• シングルページアプリケーション (SPA)の開発に向いているJavaScriptフレームワークの一つ、なるほどこれはフレームワーク。
  だけどこれはフロントエンドフレームワーク、つまりExpressとは用途が違うということ

• SPAとはクライアント側でHTMLを動的生成するアプリケーションのこと、一々サーバー側には問合せしない、なるほど。

• Angular / vue.js / Reactで比較されることが多い。AngularはGoogleが開発している。

• ルーティングなど必要な機能が全部入ったフルスタックフレームワークらしい。実はクライアントサイドでルーティングという意味がよくわかってないです、サーバーサイドのルーティングと共存するの？

React

• FaceBookが開発

• Angularと同じくフロントエンドで使用されるJavaScriptフレームワークの一つ、として扱われることも多いが、FaceBookはJavaScriptライブラリ、と言っているらしいのでライブラリとして考えたほうが良い。

• UIに特化しているみたいなのでライブラリの方がしっくりくる。

Vue.js

• Angularと同じくフロントエンドで使用されるJavaScriptフレームワークの一つ。

• Googleの中の人(エヴァン・ヨー氏)がAngularの前身のAngularJSを開発に携わったが、そこから好ましい部分を抜き出して再構築しなおしたものがVue.jsらしい。
  エヴァン氏世の中に貢献しすぎ、すごい。

• UIに特化しているようで、ルーティング等は別のライブラリを使用するらしい。じゃあReactと同じでライブラリじゃない？と思ったけど使ってみたら違いがわかるのかもです。

• こちらの記事に比較がありました、わかりやすいです。

最終的に決めた環境

クライアントサイドのルーティングとサーバーサイドのルーティングを混ぜるとちょっと開発が大変そうにみえたので、初学者ということもあるのでまずはサーバーサイドでレンダリングすることに注力したいと思います。
SPAだと機能提供メインのアプリって感じがしますし。
ということで

• サーバーサイド
  node.js, Express でいきます！DB使う場合はMongoDBと相性がよさそう。

• クライアントサイド
  CSSフレームワークはbootstrapでレスポンシブデザインなサイトを目指します！

// html

<label for="search">連絡先の名前 ; </label>
<input type="text" id="search">
<button>検索</button>

<p></p>

// javascript

'use strict';
{
var contacts = ['クリス:2232322','サラ:3453456','ビル:7654322','メアリー:9998769','ダイアン:9384975'];
var para = document.querySelector('p');
var input = document.querySelector('input');
var btn = document.querySelector('button');

btn.addEventListener('click', function(){
    var searchName = input.value;
    input.focus();
    for(let i = 0; i < contacts.length; i++){
        var splitContact = contacts[i].split(':'); //ここで個々の項目を項目が２つの配列にする
        if(splitContact[0] === searchName){
            para.textContent = splitContact[0] + 'の電話番号は ' + splitContact[1] + ' です。';
            break;
        }else{
            para.textContent = '連絡先が見つかりません。';
        }
    }
});

}

..html

<select name="month" id="month">
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
    <option value="4">4</option>
    <option value="5">5</option>
    <option value="6">6</option>
    <option value="7">7</option>
    <option value="8">8</option>
    <option value="9">9</option>
    <option value="10">10</option>
    <option value="11">11</option>
    <option value="12">12</option>
</select>           

ulタグ

h1タグ

..javascript

'use strict';
{
var select = document.querySelector('select');
var list = document.querySelector('ul');
var h1 = document.querySelector('h1');

select.onchange = function() {
var choice = select.value;

// 条件式をここに書く
var days = 31;

if(choice === '4' || choice === '6' || choice === '9' || choice === '11'){
    days = 30;
}else if(choice === '2'){
    days = 28;
}    
  createCalendar(days, choice + ' 月');
}



function createCalendar(days, choice) {
  list.innerHTML = '';
  h1.textContent = choice;
  for (var i = 1; i <= days; i++) {
    var listItem = document.createElement('li');
    listItem.textContent = i;
    list.appendChild(listItem);
  }
}

createCalendar(31,'1 月');

}

..css

body{
padding: 0;
margin: 0;
box-sizing: border-box;
}
ul{
padding: 0;
margin: 0;
width: 100%;
float: left;

}
ul li{
list-style: none;
background: pink;
text-align: center;
margin: 3px;
float: inherit;
width: 20%;
user-select: none;
}

書いて開いてます
http://www.asahi-net.or.jp/~xc2k-mrkm/