20200521のHTMLに関する記事は14件です。

HTMLで表のデータがクリックされた時にJavaScript関数を実行する

HTMLで表のデータがクリックされた時にJavaScript関数を実行したい。
このような状況があり苦戦したので残しておく。

イベントハンドラをタグの属性部分に指定すれば、そこからJavascriptを実行できるようになる。
タグなどによって使用できるハンドラが異なっているようなので注意が必要。

<!DOCTYPE html>
<html>
    <head>
        <meta charaset="UTF-8">
        <title>表のデータがクリックされた時JavaScriptを実行したい</title>
        <script type="text/javascript">
            //表のデータをクリックしたときの処理
            function PushData(){
                alert("表のデータがクリックされました。");
            }
        </script>
    </head>
    <body>
        <div align="center">
            <h2>テーブル</h2>
        </div>
        <div align="center">
            <table border="1">
                <tr>
                    <th onclick="PushData()">見出し1</th>
                    <th onclick="PushData()">見出し2</th>
                </tr>
                <tr>
                    <th onClick="PushData()">データ1</th>
                    <th onclick="PushData()">データ2</th>
                </tr>
            </table>
        </div>
    </body>
</html>
  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む

サクッとaタグでPOST送信(自分メモ)

はじめに

今回、aタグでpost送信したい時(ログアウトのリンクをクリック)がありましたので、その記述をメモとして残します。簡易的な自分用のメモですので、その点はご了承くださいませ。

記述方法

<form
  method="POST"
  name="logout_form"
  action="/logout">
  <!--CSRF-->
  <a href="javascript:logout_form.submit()">ログアウト</a>
</form>

aタグのhref属性にjavascript:(実行するJavaScriptコード) の形式で記述します。
上記で行っていることは、formのname属性を指定してあげて、submit()でフォームの内容を送信しています。
はい、以上になります。

おわりに

簡易なメモではありますが、もし間違い等ありましたらご指摘をお願いいたします。

参考資料

aタグをPOSTにする
HTMLのAタグでPOSTする方法

  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む

簡易的なKrunkerのチートシート(?)を作りました

サイト

https://katudon.000webhostapp.com/Home.php
途中まで攻略サイトみたいにしようと思ったんですが、そんなサイトは既に山ほど存在してるので、ダメージとかを計算できるデータベース的なサイトにしました。なので、銃一覧以外は機能しません。
いつかherokuに移すかも。

使用方法

見たい銃を銃一覧から選択するとその銃の性能を見ることができます。
スクリーンショット 2020-05-21 19.02.12.png

  • ドロップダウンメニュー(画像の"スナイパーライフル"って書いてるやつ)を選ぶことでその場で他の銃と比較が出来ます。左上の+を押すことで複数の銃と比較も可能。-を押すと一番右端のやつが消えます。

  • 威力のドロップダウンメニューから頭、胴、足それぞれのダメージを見ることが出来ます。

  • 総合DPSは勝手に自分が勝手に編み出したDPSで、下に小さく書いてある通り、人間の反応速度やエイム速度等を反映したDPSを計算します。

  • 総火力の所に数値を入れると(単位はms)、その間に与えることが出来るダメージの総数を計算します。

以上です。

  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む

初学者がjavascript教えるならどうするか内容を考えてみた!

前提

本記事はプログラミング初学者の筆者が
「プログラミング初学者に対し、JavaScriptのイベントを分かりやすく教えるならどう教えるか」
という目線で書いております。
筆者もプログラミング初学者のため拙いところや詰めが甘い箇所があると思います。
その際はご指摘頂ければ幸いです。

目次

  1. JavaScriptのイベントとは?
  2. ドッキリに例えて考えてみよう!
  3. clickイベントの実例

 1. JavaScriptのイベントとは?

  • JavaScriptにおける「イベント」とはウェブページ上で発生するあらゆるアクションの総称のことです。
    例えば、下記の様な内容がイベントとして挙げられます。
    ・ボタンをクリックすると入力フォームが表示される。
    ・ボタンがクリックされた際にアラートを表示させる。
    ・マウスポインタが重なると色が変わる。
    クリックするとカテゴリーが表示される。

このイベントをする(処理)することをイベントハンドラとはと言います。
ちなみにハンドラとは英語だと「handler」で動詞の「handle(扱う)」から由来しているそうです。
イベントハンドラの一例は下記内容が挙げられます。

イベント名 イベント
ハンドラ名
説明
click onclick 要素がクリックされた時
change onchange 要素の内容が変更された時
keypress onkeypress キーボードのキーを押した時
mouseover onmouseover 要素にマウスのカーソルが重なった時
select onselect 要素がダブルクリックされた時
drag ondrag 要素がドラッグされた時
scroll onscroll スクロールバーがスクロールされた時

2. ドッキリに例えて考えてみよう!

今回は「HTMLにscriptタグを読み込む」「JavaScriptは別のファイルに書く」という前提で記載しております。。

実際にJavaScriptを書くときは以下のステップを踏みます。
なお、今回はドッキリに例えながら記載していきます。
①scriptタグをhtmlに記載する。
イベントを発生させるためにはJavaScriptのコードを読み込む必要があります。
そのため、htmlのファイル内に「JavaScriptのコードを読んでね!」とお願いするコードを記入します。
その際に注意して欲しいのが、head要素に書かず、body要素の最後にコードを書くことです。

プログラミングは基本的にコードは上から順に読み込むので、
head要素にコードを書き読み込むとbody要素とその子孫はまだ取得できないのでエラーになります。

sample.html
<!DOCTYPE html>
<html>
  <head>
    <title>Javascript</title>
    <link rel="stylesheet" href="style.css">
       <!-- head要素の中にscriptコードを書いてみる -->
      <script type="text/javascript" src="test.js"></script>
  </head>
  <body>
    <div id="gold-medal" class="medal"></div>
    <div id="silver-medal" class="medal"></div>
    <div id="bronze-medal" class="medal"></div>
  </body>
</html>

上記コードを例にすると、onclickの結果は「該当要素なし」としてnullになり、
Uncaught TypeError: Cannot set property 'onclick' of null at test.js:12
コンソールに出力されます。しかし、body要素の最後であれば、全てのHTMLを読み込んだ後なので、
情報を取得してイベントを発生させることができます。

②イベントハンドラする対象を決めイベント発生後のアクションを書く。
例えばclickしたらclickしたモノが消えるイベントを発生させることにしましょう。
対象となるモノをイベントの内容を紐付けてコードを書く必要があるので、以下の手順でコードを書いていきます。
(1)「html内に対象となるモノにidやclassを指定する。」
(2)「指定したモノに対しJavaScriptのファイルにイベント発生のコードを書く」

ドッキリに置き換えると

①〜②の動作をドッキリに置き換えると以下の様に例えることができます。

①どこでドッキリをやるのかを決める。
まず、どこでドッキリをするのかを決めます。
なお、早とちりしてドッキリを台無しにしないために最後の方で仕掛けます。

②ターゲットとどんなドッキリを仕掛けるのかを決める。
ターゲットを決めないとドッキリは始まりません。
対象となるターゲットに対しidの指定やclassの指定を行いましょう。
そして、仕掛けるドッキリ(アクションの内容)を仕掛け人(ジャバスクリプト やCSSのファイル)に対して
指示し(コードを書き)ましょう。

3. clickイベントの実例

今回は「金メダル、銀メダル、銅メダルをクリックしたら消える。」というイベントを書きました。
簡易的なモノなのでイメージがしやすいと思います。
詳細を記載したコードを記入したので、実際に挙動を確認していただければ幸いです。

Gyazo gif

sample.html
<!DOCTYPE html>
<html>
  <head>
    <title>Javascript</title>
    <link rel="stylesheet" href="style.css">
  </head>
  <body>
    <div id="gold-medal" class="medal"></div>
    <div id="silver-medal" class="medal"></div>
    <div id="bronze-medal" class="medal"></div>
    <script type="text/javascript" src="test.js"></script>
</body>
</html>
style.css
body {
  font-family: Helvetica, Arial, sans-serif;
  margin: 0;
  padding: 0;
}
#gold-medal {
  background-color: #DBB400;
}
#silver-medal {
  background-color: #C9CACA;
}
#bronze-medal {
  background-color: #C47022;
}
.medal {
  width: 200px;
  height: 200px;
  border-radius: 50%;
  float: left;
  margin: 20px;
}
test.js
//document.getElementById("").onclickでクリックしたターゲットの要素を取得。
//function(){ }でドッキリの内容を記載
//document.getElementById("").style.display = "none";でドッキリの内容が記載されている。

//(1行目)金メダルをクリックするとイベントが発生。 ← (2行目)金メダルのCSS要素にdisplya: none;が追加される。
document.getElementById("gold-medal").onclick = function(){
  document.getElementById("gold-medal").style.display = "none";
  }
//(1行目)銀メダルをクリックするとイベントが発生。 ← (2行目)銀メダルのCSS要素にdisplya: none;が追加される。
  document.getElementById("silver-medal").onclick = function(){
    document.getElementById("silver-medal").style.display = "none";
  }
//(1行目)銅メダルをクリックするとイベントが発生。 ← (2行目)銅メダルのCSS要素にdisplya: none;が追加される。
  document.getElementById("bronze-medal").onclick = function(){
    document.getElementById("bronze-medal").style.display = "none";
  }

引用
teratail(Javascriptで記述したコードでエラーが出てしまう。)
【JavaScript入門】初心者でも分かるイベント処理の作り方まとめ!

  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む

「初学者がJavaScriptのイベントを分かりやすく教えるならどう教えるか?」を考えてみた!

前提

本記事はプログラミング初学者の筆者が
「プログラミング初学者に対し、JavaScriptのイベントを分かりやすく教えるならどう教えるか」という目線で書いております。
筆者もプログラミング初学者のため拙いところや詰めが甘い箇所があると思います。
その際はご指摘頂ければ幸いです。

目次

  1. JavaScriptのイベントとは?
  2. ドッキリに例えて考えてみよう!
  3. clickイベントの実例

 1. JavaScriptのイベントとは?

  • JavaScriptにおける「イベント」とはウェブページ上で発生するあらゆるアクションの総称のことです。
    例えば、下記の様な内容がイベントとして挙げられます。
    ・ボタンをクリックすると入力フォームが表示される。
    ・ボタンがクリックされた際にアラートを表示させる。
    ・マウスポインタが重なると色が変わる。
    クリックするとカテゴリーが表示される。

このイベントをする(処理)することをイベントハンドラとはと言います。
ちなみにハンドラとは英語だと「handler」で動詞の「handle(扱う)」から由来しているそうです。
イベントハンドラの一例は下記内容が挙げられます。

イベント名 イベント
ハンドラ名
説明
click onclick 要素がクリックされた時
change onchange 要素の内容が変更された時
keypress onkeypress キーボードのキーを押した時
mouseover onmouseover 要素にマウスのカーソルが重なった時
select onselect 要素がダブルクリックされた時
drag ondrag 要素がドラッグされた時
scroll onscroll スクロールバーがスクロールされた時

2. ドッキリに例えて考えてみよう!

今回は「HTMLにscriptタグを読み込む」「JavaScriptは別のファイルに書く」という前提で記載しております。。

実際にJavaScriptを書くときは以下のステップを踏みます。
なお、今回はドッキリに例えながら記載していきます。
①scriptタグをhtmlに記載する。
イベントを発生させるためにはJavaScriptのコードを読み込む必要があります。
そのため、htmlのファイル内に「JavaScriptのコードを読んでね!」とお願いするコードを記入します。
その際に注意して欲しいのが、head要素に書かず、body要素の最後にコードを書くことです。

プログラミングは基本的にコードは上から順に読み込むので、
head要素にコードを書き読み込むとbody要素とその子孫はまだ取得できないのでエラーになります。

sample.html
<!DOCTYPE html>
<html>
  <head>
    <title>Javascript</title>
    <link rel="stylesheet" href="style.css">
       <!-- head要素の中にscriptコードを書いてみる -->
      <script type="text/javascript" src="test.js"></script>
  </head>
  <body>
    <div id="gold-medal" class="medal"></div>
    <div id="silver-medal" class="medal"></div>
    <div id="bronze-medal" class="medal"></div>
  </body>
</html>

上記コードを例にすると、onclickの結果は「該当要素なし」としてnullになり、
Uncaught TypeError: Cannot set property 'onclick' of null at test.js:12
コンソールに出力されます。しかし、body要素の最後であれば、全てのHTMLを読み込んだ後なので、
情報を取得してイベントを発生させることができます。

②イベントハンドラする対象を決めイベント発生後のアクションを書く。
例えばclickしたらclickしたモノが消えるイベントを発生させることにしましょう。
対象となるモノをイベントの内容を紐付けてコードを書く必要があるので、以下の手順でコードを書いていきます。
(1)「html内に対象となるモノにidやclassを指定する。」
(2)「指定したモノに対しJavaScriptのファイルにイベント発生のコードを書く」

ドッキリに置き換えると

①〜②の動作をドッキリに置き換えると以下の様に例えることができます。

①どこでドッキリをやるのかを決める。
まず、どこでドッキリをするのかを決めます。
なお、早とちりしてドッキリを台無しにしないために最後の方で仕掛けます。

②ターゲットとどんなドッキリを仕掛けるのかを決める。
ターゲットを決めないとドッキリは始まりません。
対象となるターゲットに対しidの指定やclassの指定を行いましょう。
そして、仕掛けるドッキリ(アクションの内容)を仕掛け人(ジャバスクリプト やCSSのファイル)に対して
指示し(コードを書き)ましょう。

3. clickイベントの実例

今回は「金メダル、銀メダル、銅メダルをクリックしたら消える。」というイベントを書きました。
簡易的なモノなのでイメージがしやすいと思います。
詳細を記載したコードを記入したので、実際に挙動を確認していただければ幸いです。

Gyazo gif

sample.html
<!DOCTYPE html>
<html>
  <head>
    <title>Javascript</title>
    <link rel="stylesheet" href="style.css">
  </head>
  <body>
    <div id="gold-medal" class="medal"></div>
    <div id="silver-medal" class="medal"></div>
    <div id="bronze-medal" class="medal"></div>
    <script type="text/javascript" src="test.js"></script>
</body>
</html>
style.css
body {
  font-family: Helvetica, Arial, sans-serif;
  margin: 0;
  padding: 0;
}
#gold-medal {
  background-color: #DBB400;
}
#silver-medal {
  background-color: #C9CACA;
}
#bronze-medal {
  background-color: #C47022;
}
.medal {
  width: 200px;
  height: 200px;
  border-radius: 50%;
  float: left;
  margin: 20px;
}
test.js
//document.getElementById("").onclickでクリックしたターゲットの要素を取得。
//function(){ }でドッキリの内容を記載
//document.getElementById("").style.display = "none";でドッキリの内容が記載されている。

//(1行目)金メダルをクリックするとイベントが発生。 ← (2行目)金メダルのCSS要素にdisplya: none;が追加される。
document.getElementById("gold-medal").onclick = function(){
  document.getElementById("gold-medal").style.display = "none";
  }
//(1行目)銀メダルをクリックするとイベントが発生。 ← (2行目)銀メダルのCSS要素にdisplya: none;が追加される。
  document.getElementById("silver-medal").onclick = function(){
    document.getElementById("silver-medal").style.display = "none";
  }
//(1行目)銅メダルをクリックするとイベントが発生。 ← (2行目)銅メダルのCSS要素にdisplya: none;が追加される。
  document.getElementById("bronze-medal").onclick = function(){
    document.getElementById("bronze-medal").style.display = "none";
  }

引用
teratail(Javascriptで記述したコードでエラーが出てしまう。)
【JavaScript入門】初心者でも分かるイベント処理の作り方まとめ!

  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む

OpenWeatherMapAPIのアイコンを変える方法

1. OpenWeatherMapのお天気アイコン

OpenWeatherMapには予め気象コードに合わせたアイコンが用意されています。
無料なのにとっても親切!
そんな初期設定のアイコンの一例がこちらです。
スクリーンショット 2019-11-13 15.00.06.pngスクリーンショット 2019-11-13 15.00.02.pngスクリーンショット 2019-11-13 14.59.51.png
なんとも画質も微妙ですし、あまりイケてない気がしますね・・・
変えれるものなら変えたいと思っていじってみたら
とっても簡単にできたので、その方法を記録しておきます。

2. ドキュメントを確認してみると...

OpenWeatherMapのドキュメントを確認してみると、下記アイコンの一覧が確認できます。
実際に表示されるものとは少し違いますが、
ファイル名がわかるのでこちらをいじればどうにかなりそうということが分かります。
https://openweathermap.org/weather-conditions
スクリーンショット 2019-11-13 16.05.08.png

3. 変更方法

weather.js
$.ajax({
        url: "https://api.openweathermap.org/data/2.5/weather",
        dataType: "jsonp",
        data: "q=Tokyo,jp&appid=" + APIKEY + "&lang=ja&units=metric",
        //天気データ呼び出し成功時
        success: function(data) {
          //〜中略〜
          $(".dayWeatherIcon").attr(
            "src",
            "img_tenki/" + data.weather[0].icon + ".png "
          );

他にやり方はあるかと思いますが、今回はこんな感じの手順で実装しました!

1、まず、上記アイコン一覧のファイル名を参考にお天気アイコンの画像を準備し、フォルダに格納
今回はimg_tenkiというフォルダに画像を保存
2、画像を表示させたいimgタグを予め用意しておき、そのsrcを
"img_tenki/" + data.weather[0].icon + ".png "と指定する

4. 完成したのがこちら...

少し良い感じになりました!
スクリーンショット 2019-11-13 16.08.49.png

5. 参考サイト

https://qiita.com/b-wind/items/06e19043a0cd70b10b03

  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む

Webサイト作成~公開までの簡単な流れ

はじめに

ITエンジニア2年目のひよっこです。
趣味丸出しの旅行記のような簡単なWebサイトを作成したので、公開までに行った流れを備忘録がてら記録します。

ちなみに、作成サイトはこちらです。
わたしの瀬戸内

前提

文学部出身のバリバリのド文型。
新卒未経験で入った会社の研修で掲示板を作成した際、Webサイト作るの楽しいなと思ったのがきっかけ。単純ですね。
結局画面周りをやったのは研修中だけだったので、体系的な基礎知識のないまま「とりあえず作っちゃえ」という見切り発車です。
Web制作の実務経験のない人間が、練習がてらに作成したものということをご了承ください。

どんなサイトを作ったか

まずは、自分で作ったものを実際に公開するという実績を作ることを一番の目的にしました。

・過去の島旅の思い出を、写真と文章で綴るサイト
・ページ構成、内容、デザインはシンプル
・レスポンシブ対応なし
・データベースは使用なし
・使用言語はHTML5とCSS3のみ

流れ

1.企画

コンセプト設計

・どんなサイトを作りたいか
・それはなぜか
・どんな人に見てほしいか
・見た人にどう思ってほしいか
等をまとめて、作成予定サイトのイメージを固めます。

サイトマップ作成

サイトマップとは、Webサイト全体のページの構成をリスト形式でまとめたものです。
どのページがどのページに紐付いているのかをツリー状に繋げていきます。
 ①必要そうなページを洗い出す
 ②洗い出したページをグループ分けする
 ③ページを階層化する
 ④清書(ドキュメント化)する ←私はgoogleのスライドショーを使用しました

ワイヤーフレーム作成

ワイヤーフレームとは、各ページのレイアウトを表した設計書のことです。
どの要素がページのどの位置にあるのかというのを可視化していきます。
 ①必要な各ページの掲載する要素を洗い出す(タイトル、写真、テキスト、ナビ、リンク等)
 ②洗い出した要素を関連性のあるものでグループ分けする
 ③要素の優先順位をつける
 ④清書(ドキュメント化)する ←photoshopを使用しました

2.サイト制作

パーツの準備

サイトに使う画像やテキストを準備します。
今回作成したのは旅行の記録サイトなので、私は以下のことをやりました。
 ①写真のレタッチ
 ②写真のサイズをカテゴリごとに統一(TOPページ用、見出し用、小見出し用等)
 ③パーツ用写真の編集
 ④説明文の草案

デザインの作成

本来なら、フォントや色や配置等を詰め、「デザインカンプ」というデザイン案を作成します。
が、私はここの工程をすっ飛ばしてしまいました。反省…。
今回作成したのはシンプルなものだったので、頭の中のイメージをコーディングしながら形にすることに支障はあまりなかったのですが、次はちゃんと作りこみます。

コーディング

イメージしている画面になるように実際にコーディングしていきます。

 ①エディタをDLする。
  様々なコードエディタがありますが、私はAdobeが出している「Brackets」を使用しました。
  コーディングしたらボタンひとつでchrome上で確認できるという優れもの。
  正直めちゃめちゃ使いやすかったです。
 ②HTMLで各ページに必要な要素を書いていく
  横並びにする作業や、位置・サイズ調整などは後ほどCSSで整えるので、ヘッダーやメニューや画像・テキストなどを一旦全部コーディングします。
 ③CSSでイメージに近づける
  ただずらっと並んでいるだけの要素たちを、CSSを使って整理します。
 ④微調整して完成

3.サイト公開

サーバーを借りる

作成したHPをインターネット上に公開するためには、サーバーに作成物を置かなくてはなりません。
私は、「さくらのレンタルサーバ」で一番安いプランを契約しました。

独自ドメインを取得する

ドメインとは、ホームページのネット上の住所のようなものです。
「https://qiita.com/」の「qiita.com」の部分ですね。
さくらのレンタルサーバ」ではサーバーレンタル時に独自ドメイン取得も希望できるので、一緒にやりました。

独自ドメイン取得にはお金がかかります。
「.com」や「.jp」等の種類によって金額はピンきりです。
私は「.com」」を契約しました(1年契約で3,000円位)。

※デフォルトでついてくる無料ドメインも使えますが、それだと「http://my-setouchi.sakura.ne.jp/」と借りたところの会社名が記載されてかっこ悪いので、完全に見栄えのためだけに課金しました(笑)

ファイルをサーバにアップロードする

いよいよ、PCに保存してあるHTMLファイル・CSSファイル・画像をレンタルしたサーバ上にアップロードしていきます。
通常はFTPクライアントソフトというファイル転送用のソフトを使ってアップロードを行いますが、さくらのサーバにはファイル転送ソフトを使わなくてもアップロードできるファイルマネージャが用意されているので、今回はそちらを使用しました。

次回は、FFFTPやWinSCP等のフリーで配布されているFTPソフトを使う練習もしたいです。

実際にページを確認する

作成したサイトのURLにアクセスしてみて、ページの飛び先や表示位置等、想定通りの作りになっているかを確認していきます。
エディタのプレビューでは問題なくても、サーバに置いたら表示されない画像がある等のケアレスミスを発見しました。
修正したファイルをアップロードし直して、再度確認したら完了です。

おわりに

やっぱり基礎知識は大事

今回、見切り発車でとりあえず作ってみましたが、コーディング中難航する場面や諦めた機能もありました。
そんな時、土台として体系的な知識があったらもう少しできる事も増えたのかなと思ったので、一旦ちゃんと勉強しようと思います。

今後

自分の作ったものがChromeでもIEでもスマホでも見れた時はやっぱりちょっと感動しました。
次は今回省いた「デザインカンプの作成」「FTPソフトの使用」も行い、js等他の言語も使ってもう少し本格的なWebサイトを作成してみたいです。

※ちなみに今回作成したサイトは、サーバが月ごとのレンタルなので恐らく1ヶ月で閉めると思います。(せっかく取得したドメインは1年間有効なので勿体無いのですが。)

ここまで読んでいただけてありがとうございます。
ど素人の備忘録ですが、少しでも参考になる部分があれば幸いです。

  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む

初心者に捧げるハンバーガーメニューの作り方

対象読者

・ハンバーガーメニューを作りたい人
・細かく作り方の手順を知りたい人
・自分でオリジナルの見た目を作って応用したい人
・(ちなみに筆者の自己学習のためにも記事を書いているので間違っている箇所があれば是非とも教えて頂きたい)

目次

・HTMLのソース
・CSSのソース
・JavaScript(jQuery)のソース
・ハンバーガーメニュー作成の手順
・まとめ

HTMLのソース

Hamburger.html
<body>
    <div class="container">
        <button class="click-menu-icon">
            <span></span>
            <span></span>
            <span></span>
        </button>
        <nav>
            <ul>
                <li>111</li>
                <li>222</li>
                <li>333</li>
            </ul>
        </nav>
        <div class="overlay"></div>
    </div>
</body>

CSSのソース

style.css
* {
            margin: 0;
            padding: 0;
        }
        .overlay {
            display: block;
            width: 0;
            height: 0;
            background-color: rgba(0,0,0,0.5);
            position: absolute;
            top: 0;
            right: 0;
            z-index: 2;
            opacity: 0;
            transition: opacity 0.5s;
        }
        .overlay.open {
            width: 100%;
            height: 100%;
            opacity: 1;
        }

        .click-menu-icon {
            border: none;
            display: inline-block;
            width: 36px;
            height: 28px;
            vertical-align: middle;
            cursor: pointer;
            position: fixed;
            top: 30px;
            left: 30px;
            z-index: 100;
        }
        .click-menu-icon span {
            display: inline-block;
            box-sizing: border-box;
            position: absolute;
            left: 0;
            width: 100%;
            height: 4px;
            background-color: #000;
            transition: all 0.5s;
        }
        .click-menu-icon.active span {
            background-color: #000;
        }
        .click-menu-icon span:nth-of-type(1) {
            top: 0;
        }
        .click-menu-icon.active span:nth-of-type(1){
            transform: translateY(12px) rotate(-225deg);
        }
        .click-menu-icon span:nth-last-of-type(2) {
            top: 12px;
        }
        .click-menu-icon.active span:nth-of-type(2){
            opacity: 0;
        }
        .click-menu-icon span:nth-of-type(3) {
            bottom: 0;
        }
        .click-menu-icon.active span:nth-of-type(3){
            transform: translateY(-12px) rotate(225deg);
        }

        nav {
            width: 250px;
            height: 100%;
            padding-top: 100px;
            background-color: rgba(16, 69, 153, 0.8);
            position: fixed;
            top: 0;
            left: 0;
            z-index: 10;
            transform: translateX(-250px);
            transition: all 0.5s;
        }
        nav.open {
            transform: translateX(0);
        }
        nav li {
            color: #fff;
            text-align: center;
            padding: 10px 0;
        }

JavaScript(jQuery)のソース

main.js
$('.click-menu-icon').on('click',function(){
            if($(this).hasClass('active')){
                $(this).removeClass('active');
                $('nav').removeClass('open');
                $('.overlay').removeClass('open');
            } else {
                $(this).addClass('active');
                $('nav').addClass('open');
                $('.overlay').addClass('open');
            }
            });
            $('.overlay').on('click',function(){
            if($(this).hasClass('open')){
                $(this).removeClass('open');
                $('.click-menu-icon').removeClass('active');
                $('nav').removeClass('open');      
            }
            });

ハンバーガーメニュー作成の手順

作成手順
<!-- ハンバーガーメニュー作成の手順
*   1:buttonでspan*3を囲う
*   2:nav>ul>liでメニューを作る
*   3:</nav>の下に影をつけるための<div class="overlay">を作る
*   4:・・・・・以下からCSSの記述手順↓・・・・・
*       1.overlay
*           ・blockでwidthとheightを0にする
*           ・色はお好み_rgbaでaを0.5くらいにする(透明度の最大値)
*           ・position:absoluteでtop:0、left/rightはお好みで0
*           ・z-indexで上に来るために2くらいにする
*           ・初期状態はopacity:0にする
*           ・transition: opacity 0.5s;秒数は好み
*           ・overlay.openにwidth/height:100%、opacityを1にして変化させる
*
*       2.button.class名
*           ・buttonのborderを消しておく
*           ・vertical-alignを指定するためにinline-blockにする
*           ・ハンバーガーアイコンのwidth/heightを指定する(お好み)
*           ・vertical-align: middle;で縦に中央揃えする(大きさを変更しても中央揃えになる)
*           ・cursor:pointer;にする(お好み)
*           ・position: fixed;でスクローるしてもついてくるようにする。top/left/rightを指定する(お好みでfixedなしでもok)
*           ・必ず前面に出したいのでz-indexで一番大きい数にする
*       
*       3.button>span
*           ・box-sizing:border-box;でbutton自体の大きさ内でpaddingやborderなどを指定できる
*           ・left:0;width:100%;で左端から100%button内でspanの長さを指定する
*           ・heightはお好み(必ず指定しないと縦が0なので表示されなくなる)
*           ・色をつける(基本は背景に同化せずハッキリとした色にする)
*           ・transitionでクリックした時のspanが動く秒数を指定する
*       
*       4.buttonに.activeが追加された時のspan
*           ・click後の色を指定する
*           ・span:nth-of-type(1)でtop: 0;を指定する
*           ・.active span:nth-of-type(1)でtransform: translateY(お好み) rotate(-お好み);で1つ目の動きをつける
*           ・span:nth-of-type(2)でtop: お好み;で真ん中に表示する
*           ・.active span:nth-of-type(2)でopacity: 0;で表示を消す
*           ・span:nth-of-type(3)でbottom: 0;を指定する
*           ・.active span:nth-of-type(3)でtransform: translateY(-お好み) rotate(お好み);で3つ目の動きをつける
*           ※translateYとrotateは符号違いで数値は同じにする
*
*       5.nav
*           ・navのwidth:お好み;height: 100%;を指定する  
*           ・padding-topでハンバーガーの下に指定する(お好み)
*           ・background-colorを指定する(お好み)
*           ・position: fixed;でスクロールしてもついてくるようにする
*           ・top: 0;left or right: 0;にする
*           ・z-indexでコンテンツよりは上、overlayより上でハンバーガーより下にする
*           ・transform: translateX(-navのwidth分);で初期位置を画面の外にする
*           ・transitionで動きの秒数を指定する(お好み)
*         
*       6.nav.open
*           ・transform: translateX(0);でclickされた時に画面に表示する
*
*       7.nav li
*           ・colorでliの色を指定する(お好み)
*           ・text-align: center;でnav内の中央に寄せる
*           ・padding:お好み 0;で上下の数値だけ指定する
*
*       ・・・・・以上がCSSの記述手順↑・・・・・
*
*   5.・・・・・以下からJavaScript(jQuery)の記述手順↓・・・・・
*
*
           $('.buttonのクラス名').on('click',function(){    @クリックイベント
            if($(this).hasClass('active')){         @もしbuttonがactiveクラスを持っていたら
                $(this).removeClass('active');      @buttonからactiveクラスを外す
                $('nav').removeClass('open');       @navからopenクラスを外す
                $('.overlay').removeClass('open');  @overlayからopenクラスを外す
            } else {                                @activeクラスを持っていなかったら
                $(this).addClass('active');         @buttonにactiveクラスを追加する
                $('nav').addClass('open');          @navにopenクラスを追加する
                $('.overlay').addClass('open');     @overlayにopenクラスを追加する
            }
            });         @@ overlayをクリックしても開いたメニューを閉じれるようにする @@
            $('.overlay').on('click',function(){                @クリックイベント
            if($(this).hasClass('open')){                   @もしoverlayがopenクラスを持っていたら
                $(this).removeClass('open');                @overlayからopenクラスを外す
                $('buttonのクラス名').removeClass('active');  @buttonからactiveを外す
                $('nav').removeClass('open');               @navからopenクラスを外す
            }
            });
*
*
*
*
*
*
-->

まとめ

自分のコーディング技術向上のためにコードや書き方の手順を記してみました。
実はプログラミング学習を始めてまだ2.3ヶ月の初心者です。なのでもっと効率よく、尚且つ綺麗に記述できると思います。
ですが、過去の自分はただコードだけ見せられてもどう書けばいいか分からなかった経験があります。なので日本語で手順も記載することによって中の値だけ変えれば誰でもとりあえず実装できるようになると思います。
作成の手順通りに作って中の値だけ変えることによってオリジナルのハンバーガーメニューに応用できると思います。
過去の自分が知りたかったような記事でした。

  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む

【HTML5】タグ語源一覧

HTMLとは

HTMLで呼び方は、エイチティーエムエルと呼びます。
2020年現在は、バージョンが5でHTML5(エイチティーエムエルファイブ)と呼んだりします。
Hyper Text Markup Language(ハイパーテキストマークアップランゲージ)の略で、
Webブラウザで表示するように設計されたドキュメントの標準マークアップ言語のこと。

タグ語源一覧

タグ タグ名 語源
<!DOCTYPE html> DOCTYPE宣言(ドックタイプセンゲン) Document Type Definition
<html></html> HTMLタグ(エイチティーエムエルタグ) html
<head></head> headタグ(ヘッドタグ) head
<body></body> bodyタグ(ボディータグ) body
<title></title> titleタグ(タイトルタグ) title
<link> linkタグ(リンクタグ) link
<meta> metaタグ(メタタグ) meta information
<style></style> styleタグ(スタイルタグ) style
<script></script> scriptタグ(スクリプトタグ) script
<header></header> headerタグ(ヘッダータグ) header
<footer></footer> footerタグ(フッタータグ) footer
<main></main> mainタグ(メインタグ) main
<div></div> divタグ(ディブタグ) division
<section></section> sectionタグ(セクションタグ) section
<nav></nav> navタグ(ナビゲーションタグ(ナビタグ)) navigation links
<article></article> articleタグ(アーティクルタグ)) article
<aside></aside> asideタグ(アサイドタグ)) aside
<h1></h1> h1タグ(エイチワンタグ) heading1
<p></p> pタグ(ピータグ) paragraph
<strong></strong> strongタグ(ストロングタグ) strong
<br> brタグ(ブレークタグ) line break
<ol></ol> olタグ(オーエルタグ(オーダードリストタグ)) ordered list
<ul></ul> ulタグ(ユーエルタグ(アンオーダードリストタグ)) unordered list
<li></li> liタグ(リストタグ) list item
<pre></pre> preタグ(プレタグ) preformatted text
<code></code> codeタグ(コードタグ) code
<blockquote></blockquote> blockquoteタグ(ブロッククオートタグ) blockquote
<figure></figure> figureタグ(フィギャータグ) figure
<hr> hrタグ(エイチアールタグ(ホライゾンタルルールタグ)) horizontal rule
<a></a> aタグ(エータグ(アンカータグ)) anchor
<span></span> spanタグ(スパンタグ) span
<img> imgタグ(イメージタグ) image
<iframe></iframe> iframeタグ(アイフレームタグ(インラインフレームタグ)) inline frame
<table></table> tableタグ(テーブルタグ) table
<thead></thead> theadタグ(ティーヘッドタグ) table header
<tbody></tbody> tbodyタグ(ティーボディタグ) table body
<tr></tr> trタグ(ティーアールタグ(テーブルロータグ)) table row
<th></th> thタグ(ティーエイチタグ) table header cell
<td></td> tdタグ(ティーディータグ) table data cell
<caption></caption> captionタグ(キャプションタグ) caption
<colgroup></colgroup> colgroupタグ(カラムグループタグ) column group
<col> colタグ(カラムタグ) column
<form></form> formタグ(フォームタグ) form
<label></label> labelタグ(ラベルタグ) label
<input> inputタグ(インプットタグ) input
<textarea></textarea> textareaタグ(テキストエリアタグ) textarea
<select></select> selectタグ(セレクトタグ) select
<option></option> optionタグ(オプションタグ) option
<button></button> buttonタグ(ボタンタグ) button
<details></details> detailsタグ(ディーテイルズタグ) details
<summary></summary> summaryタグ(サマリータグ) summary
  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む

XPath基礎編(3) ー XPathによく使う関数

前回は最も使われるXPath書き方を紹介して、今回では、より正しくデータを指定するには、XPathによく使われる関数を紹介します。

1. contains() :特定の文字列が含まれる要素を指定する

contains() は通常、属性値またはテキストに含まれる文字列ををあいまい検索することに使われます。

  • contains(@class,"XXX") :属性値に特定の文字列が含まれている要素を指定する

2.jpg

例えば、このHTMLからclass属性にRedがつくものをすべて取得したい場合、次のように書きます。

//span[contains(@class,“Red”)]

つまり、このXPathは、classにRedを含むspan要素を取得するという意味になります。

3.jpg

  • contains(text(),"XXX") :テキストに特定の文字列が含まれる要素を指定する Harry Potter(html).jpg

例えば、このHTMLから『Rowling』という文字を含んでいる要素を指定したい場合は、次のように書きます。

//span[contains(text(),"Rowling")]

ヒント!
ページ送りボタンを指定する場合はよく『contains(text(),"次へ")』 を使います。
ページ送りボタンを指定するXPathの書き方についてはこちら➡ ページ送りボタンを指定するXPathの書き方

2. position():特定位置の要素を指定する

前回の記事では、で数値を囲むと、順番の要素を取得できることを紹介しました。positionでもN番目の要素を指定することもできます。
- position()=
4 (1).jpg

例えば、上記のHTMLで『商品3』は4番目のth要素であるため、次のように書きます。

//tbody/th[4]

position()=を使うと、次のように書きます。

//tbody/th[position()=4]

  • position() >

4 (1).jpg

『広告』以外の要素を取得する場合、『広告』は1番目のth要素であるため、次のように書きます。

//tbody/th[position()>1]
5 (1).jpg

3. and/not/or:複数の条件が含まれている要素を指定する

複数の条件が同時に含まれている要素を指定したい場合はand/not/or関数を使います。

  • and ー 複数の条件に一致する要素を指定する 7.jpg

このHTMLから、『S_20』と『pdf』を含むhrefを取得したい場合は、次のように書きます。

//a[contains(@href,“S_20”) and contains(@href,“pdf”)]

  • not ー 特定条件を含まない要素を指定する 8.jpg

このHTMLからhttps://helpcenter.octoparse.jp/hc/ja/xpath/S_10.html 以外の[@href]を取得したい場合は、次のように書きます。

//a[not(contains(@href, "S_10"))]

  • or ー いずれかの条件に一致する要素を指定する 9.jpg

このHTMLから、MかLを含むhrefを取得したい場合は、次のように書きます。

//a[contains(@href,”M_”) or contains(@href,”L_”)]

また、MかL以外のhrefを取得したい場合は、notとorを組み合わせると、次のように書きます。

//a[not(contains(@href,”M_”) or contains(@href,”L_”))]

以上はXPathによく使われる関数です。もしXPathの構文・関数をより多く了解するには、この記事をご覧ください。

元記事:https://helpcenter.octoparse.jp/hc/ja/articles/360012713639

  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む

初心者によるプログラミング学習ログ 322日目

100日チャレンジの322日目

twitterの100日チャレンジ#タグ、#100DaysOfCode実施中です。
すでに100日超えましたが、継続。
100日チャレンジは、ぱぺまぺの中ではプログラミングに限らず継続学習のために使っています。
322日目は、

  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む

Webを支える技術 第4部 まとめ

Webを支える技術 第4部のまとめ

第10章 HTML

HTMLはタグで文書の構造を表現するマークアップ言語である。HTML4.01まではSGMLがベースで開発されていた。しかし複雑だったことから、仕様をよりシンプルにしたXMLが開発され、ベースをこれに変更したものがXHTML1.0であり、モジュール化によって拡張可能にしたXHTML1.1がある。

メディアタイプ

HTMLの文字エンコーディングは、よほどのことがない限りUTF-8を使用するのが無難である。

XMLの木構造

XMLは以下のような木構造になっている。

example.html
<html>
    <head>
        <title></title>
    </head>
    <body>
        <p></p>
        <a href=""></a>
    </body>
</html>

HTMLの構成要素

HTMLの基本的な構成要素はヘッダとボディであり、ヘッダ文書のメタデータとボディには文書の内容そのものを入れる。

リンク要素
  • aタグ - アンカー
    body内に埋め込む、別のWebページに移動するためのタグ

  • linkタグ
    Webページ同士の関係を指定するタグ。
    body内に埋め込むaタグに対し、こちらはhead内に埋め込む。

  • form
    HTTPのGETやPOSTを利用して、結果を特定のURIに送信する機能。

リンク関係

Web APIのようにクライアントが人間ではなくプログラムである場合は、それぞれのリンクがどのような意味かを解釈し、どのリンクを辿るべきか機械的に判断する仕組みが必要になる。
そのためHTMLやAtomは、リンクの意味をプログラムが可読な状態で記述するための機構を用意している。

  • rel属性 「a」と「link」要素は、「rel」属性を持てる。relには、リンク元のリソースとリンク先のリソースがどのような関係にあるかを記述する。

「index.html」が「example.jp」にある「base.css」を参照する場合

index.html
<link rel = "stylesheet" href = "http://example.jp/base.css"/>

第11章 microformats

HTMLは見出しや段落などの構造を定義した文書フォーマットだったが、その中で更に意味のあるデータを表現するための技術がmicroformatsである。
microformatsは「より簡単に、もっと気軽にWebページのセマンティクスを記述できるようにしよう」という目的の元、開発された。

※セマンティック(Web)

  • 要約するとWebページ内の細かな情報に意味を持たせ、検索エンジンなどの検索に引っかかりやすくすること
    • 住所、緯度や経度
    • 楽曲情報など

デメリット

  • 同じclass属性やrel属性を持つWebページが存在していた場合、プログラムがご判定を起こしたり同じ属性を持ったmicroformatsが作成できなくなる

  • 上記の問題を解決するためにW3Cが標準化を進めている「RDFa」がある。これはXMLの名前空間を使用して衝突問題を回避できるが、複雑な点やXHTMLでしか使用できないというデメリットもある。

リソースの表現としてのmicroformats

従来のHTML表現は人が閲覧するために利用されているため、プログラムでの処理に利用するのは難しかった。
そのため、プログラム用のJSONなどのデータフォーマットを用意していたが、プログラム用に別のAPIを提供することは以下のような弱点を抱えている.

  • WebサービスとAPIで機能が異なってしないがち
  • 開発規模の増大に伴うメンテナンス性の低下
  • Web APIに必要な技術の開発コストがかかる

microformatsはWebページをそのままWebAPIとして提供できるため、以下のようなメリットが期待できる。

  • ページとAPIでの機能差を無くす
  • 開発はWebページだけで済むため、開発コストを抑えることやメンテナンス性の向上
  • 新たにAPIを作る必要性がないため、学習コストも大幅に抑えられる

第12章 Atom

Atomとは、RFC4287が規定するXMLフォーマットであり、乱立していたRSSの仕様に対し、拡張性のあるフィードの標準フォーマットを策定しようという目的があった。

メンバリソース

Atomにおける最小のリソース単位はメンバリソースである。
例を上げるならば、ブログサービスにおける一つ一つの記事、画像保存サービスにおける一つ一つの画像。

尚メンバリソースは、XMLのみで表現できるエントリリソース(文字)と、それ以外のメディアリソース(画像、音楽など)に分類され、それぞれ「entry」「feed」と明示される。

コレクションリソース

コレクションリソースは複数のメンバリソースを含むリソースであり、階層化はできない。そのため、コレクションリソースが他のコレクションリソースを含むことはできない。

イメージ

  • コレクションリソース
    • メンバ
    • メンバ
  • コレクションリソース
    • メンバ

↓これはできない

  • コレクションリソース
    • コレクションリソース

メディアタイプ

Atomのメディアタイプは「application/atom+xml」である。

  • typeパラメータなし
    Content-Type: application/atom+xml

  • エントリ
    Content-Type: application/atom+xml; type=entry

  • フィード
    Content-Type: application/atom+xml; type=feed

  • typeとcharsetパラメータを指定
    Content-Type: application/atom+xml; type=feed; charset=utf-8

名前空間

http://www.w3.org/2005/Atom

拡張子

.atom

エントリ

前述の通り、エントリはエントリリソースの最

メタデータ

ID

エントリを一意に示すURI形式のID。tagスキームのURIがよく用いられている。

tag:{NS名もしくはメールアドレス},{日付}:{任意の文字列}

DNSもしくはメールアドレスに日付情報を加えることで、グローバルに一意であることを保証する。

タイトルと概要

  • 「title」要素(必須)
    エントリの題名を表現する

  • 「summary」要素
    エントリの概要を表現する

また、type属性として「text」「html」「xhtml」といった値を持ち、この値によって内容が変化する。

著者と貢献者

  • 「auther」要素(必須)
    著者を表現する

  • 「contributer」要素
    貢献者を表現する

なお、「auther」「contributer」は以下の要素が必須である。

  • 「name」要素(必須)
    自然言語で記述した名前

  • 「uri」要素
    人に関連付けられたURI

  • 「email」要素
    人のメールアドレス

公開日時と更新日時

  • 「updated」(必須)
    更新日時

  • 「published」
    公開日時

カテゴリ

カテゴリは、Webサービスなどにおけるタグ(タグ付けと言われるような)のようなもので、「category」で表現する。

リンク

「link」で表現する

フィード

必須要素はエントリと同じ

フィード独自のメタデータ

サブタイトル

「subtitle」
タイトルで説明しきれない説明を記述

生成プログラム

「generator」
フィードで生成したプログラムの情報を表現

アイコン

「icon」
faviconの指定

ロゴ

「logo」
当該フィードを象徴する画像の指定

Atomを活用する

Atomは「タイトル」「著者」「更新日時」などといった基本的なメタデータを備えたリソース表現のためのフォーマットである。
特に上記3点のデータはブログ以外のコンテンツでも有用なことが多い。

第13章 Atom Publishing Protocol (Atom Pub)

AtomとAtomPubの関係

  • Atom
    データフォーマットの規定

  • AtomPub
    Atomを利用したリソース編集プロトコルの規定

AtomPubの存在意義

ブログを編集するためのプロトコルはいくつも存在していたが、ブログ機能に特化していたため、国際化や拡張性で問題点があった。

AtomPubはこれを改善するため、汎用的なWeb APIの基礎を成すプロトコルを備えている。

第14章 JSON

JavaScriptの記法で記述されたデータの形式

拡張子

「.json」を推奨

JSONが持てるデータ

  • オブジェクト型
  • 配列
  • 文字列
  • 数値
  • bool(論理型)
  • null

※参考

・Webを支える技術
https://www.amazon.co.jp/dp/4774142042/ref=cm_sw_em_r_mt_dp_U_LiIUEbQ3NJSJH

  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む

webカメラを使って、1000px ×1000px のプロフィール画像を量産してくれるサイトをつくった

完成品

サイト名:1000×1000 証明写真
https://id-photo.ml (ダメだったらこっち:https://id-photo.herokuapp.com/)

作り方!!

・まずファイル構造はこんな感じ
スクリーンショット 2020-05-21 0.03.32.png
今回herokuを使ってデプロイするために、gitやら何やらが入っています。(もしかしたら、必要ないファイルもあるかも。すみません...)


・コード記述内容

index.html
<!DOCTYPE html>
<html>

<head>
  <title>1000×1000証明写真</title>
</head>

<body>
  <b>1000×1000証明写真</b>
  <div id="app">
    <div>
      <video ref="video" id="video" width="500" height="500" autoplay></video>
      <div>
        <button color="info" id="snap" v-on:click="capture()"><img src="img/icon.png"></button>
      </div>
      <canvas ref="canvas" id="canvas" width="1000" height="1000"></canvas>
      <ul>
      <li class="capture" v-for="c in captures" v-bind:key="c.d">
        <img v-bind:src="c" height="50" />
      </li>
      </ul>
    </div>
  </div>

  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  <script>
    new Vue({
      el: '#app',
      data: {
        video: {},
        canvas: {},
        captures: []
      },
      mounted () {
        this.video = this.$refs.video
        if (navigator.mediaDevices && navigator.mediaDevices.getUserMedia) {
          navigator.mediaDevices.getUserMedia({ video: true }).then(stream => {
            this.video.srcObject = stream
            this.video.play()
          })
        }
      },
      methods: {
        capture () {
          this.canvas = this.$refs.canvas
          this.canvas.getContext('2d').drawImage(this.video, 0, 0, 1000, 1000)
          this.captures.push(this.canvas.toDataURL('image/png'))
          console.log(this.captures)
        }
      }
    });
  </script>

</body>
</html>

<style>
#canvas {
  display: none;
}
.capture {
  /* display: inline; */
  padding: 5px;
}
</style>
index.js
const express = require('express');
const app = express();

// public というフォルダに入れられた静的ファイルはそのまま表示
app.use(express.static(__dirname + '/public'));

// bodyParser
var bodyParser = require('body-parser');
app.use(bodyParser.json());

// POSTリクエストを受け付ける
app.post('/post', function (req, res) {

    for (key in req.body) {
        console.log(key, '=', req.body[key]);
    }
    res.end();

    res.send('hello world(POST)');
});

// GET リクエストを受け付ける
app.get('/get', function (req, res) {
    res.send('hello world(GET)');
});

//app.listen(8080);
app.listen(process.env.PORT || 8080);

console.log("server start! (heroku)");
.gitignore
# Dependency directories
node_modules/

# Optional npm cache directory
.npm
Procfile
web: node index.js

そのほかのファイルは下記コマンドからインストールできます。

npm init -y
npm i body-parser express

完成

触って遊んでみましょう。

step1「サイトへ飛ぶ」
https://id-photo.ml (ダメだったらこっち:https://id-photo.herokuapp.com/)

1.jpg


step2「カメラアイコンをクリックして撮影」
カメラのアイコンをクリックすると、1000px × 1000px の画像が下に量産されていきます。
2.jpg


step3「画像をダウンロード」
量産された画像の上で、右クリックをするとメニューがでるので、そこで「名前を付けて画像を保存...」を選択してください。
3.jpg

ダウンロードされた画像が、少し縦に伸びている感じになっているのはスリム効果です。

おわり

一応、今回使用した画像を貼っておきます。ご自由に使用してください。
icon.png

また今回参考にさせていただいた記事です
https://qiita.com/kino15/items/8f8feffca54015555f4b

最後まで読んでいただきありがとうございました。

  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む

プチ・クラウドストレージ作ってみた

初めまして

60歳を間近にウェブデザイナーを目指して独学で勉強しているお婆ちゃんです。

去年の暮れからphpを勉強して、初めてシステムらしきものを作ってみました。

やりたいこと
プチ・クラウドストレージ
・ファイルをどこからでもアップ、保管してダウンロードもできる。
・セキュリティも兼ねてIDとパスワードでログイン形式にする。

まずはパワーポイントでサイトの系図を設計しました。
Excel、Word、パワポは商工会議所で習いたてホヤホヤです。
それぞれ基礎編までクリアして1月半くらいかかりました。
全部で5万円くらいはかかったかな。

siteroot.jpg

次は手順を考えてイメージを具体化。
これは無料版のAdobeのXDを使ってみました。

操作も簡単で、感覚的に作れちゃうので便利です。
ページ自体はシンプルにしたかったのでフォントだけで作りました。
コードを書くのもAdobeの無料Brackets。Adobeドップリ。


ログインページ

AdobeXD イメージ図
Top.jpg
パスワードとIDはここで決めてます。
空文字NGの条件も設定。

login.php
//XSS
function html_escape($word){
    return htmlspecialchars($word,ENT_QUOTES,'UTF-8');
}
$logid = '';
$pass = '';
$messege = '';

if($_SERVER['REQUEST_METHOD'] === 'POST'){
    //isset入れると空文字条件が効かない
    $logid = $_POST['logid'];
    $pass = $_POST['pass'];
    $logid = html_escape($logid);
    $pass = html_escape($pass);

    //IDとパスワード設定
    if($logid === 'keserasera' && $pass === 'keserasera'){
        session_start();
        $_SESSION['login'] = 1;
        //ファイル一覧へリロード
        header('Location: file_list.php');
        exit();
    } elseif ($logid === '' || $pass === ''){
        $messege = '<p class="notice"><i class="fas fa-info-circle"></i>IDとパスワードを空文字にしないで入力してください</p>';
    } else {
        $messege = '<p class="notice"><i class="fas fa-info-circle"></i>IDかパスワード、もしくは両方違います</p>';
    }
}

?>
<!doctype html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>ファイル預かり処・マイ保管庫</title>
   <!-- headerインクルード -->
    <?php require_once(dirname(__FILE__).'/header.php'); ?>
<div id="wrapper">
    <header>
       <div id="titleVar">
          <h1><i class="fas fa-circle"></i>ファイル預かり処 マイ保管庫</h1>
          <p class="tx14">ログインページ</p>
       </div>       
       <div id="topvew">My keep folder</div>             
    </header>
    <main id="topMain">
      <form action="" method="post" class="clearfix">
         <label>ログインID</label>
         <input type="text" name="logid">
         <label>パスワード</label>
         <input type="password" name="pass">
         <p id="logBtn"><input type="submit" value="ログイン"></p>
         <?php echo $messege; ?>
      </form>      
    </main>
    <!-- footerインクルード -->
    <?php require_once(dirname(__FILE__).'/footer.php'); ?>

ファイルリスト一覧ページ

AdobeXD イメージ図
file_list.jpg

アップロードとダウンロード、削除ファイルの3つのformがあります。

  • アップロードは同一ページで処理
  • ダウンロードはチェックページに飛ばしてリロード処理
  • 削除ファイルは確認ページを別に作ってpostデータを渡す

ちなみにダウンロードと削除ファイル一覧リストはタブ切替。
フォルダーの中身は一緒でアップすると自動でリストが増えて、削除すると減っていきます。

file_list.php
//ログインしていないとアクセスさせない
session_start();
session_regenerate_id(true);
if(isset($_SESSION['login']) === false){
    header('Location: un_login.php');
    exit();
}

function html_escape($word){
        return htmlspecialchars($word,ENT_QUOTES,'UTF-8');
    }
$up_file = '';
$messege = '';
$select_file = '<p id="take">ファイルを選択して下さい</p>';
$restore = '';
$up_before = 'upBefore';//非表示css
$filename = '';

if($_SERVER['REQUEST_METHOD'] === 'POST'){
    $up_file = $_FILES['file_up'];
    $up_file['name'] = html_escape($up_file['name']);
    $up_file['name'] = strtolower($up_file['name']);//英小文字に変換  
    //var_dump($up_file['name']);

    $extension = Pathinfo($up_file['name'],PATHINFO_EXTENSION);//.以降の拡張子を重複しないよう整形
    $filename = Pathinfo($up_file['name'],PATHINFO_FILENAME);
    $filename = str_replace('.', '', $filename);//ファイル名に.があったら除去

    //ファイルがNGの場合条件処理
    if($up_file['size'] > 30000000 ){
        $messege = '<p id="caution" class="notice"><i class="fas fa-info-circle"></i>ファイルサイズが容量を超えています</p>';
        $up_before = 'upBefore';
        $restore = '<a id="restore" href="file_list.php">こちらからUPし直してください</a>';
        $select_file = '';
        //phpよりエラー表示を出すときファイル選択ボタンを出さないで再読み込みさせる為、空文字設定に
    } else {
        $messege = '';
        $up_before = 'upAfter';
        //fileをアップする関数
        move_uploaded_file($up_file['tmp_name'], './up_file/'.$filename.'.'.$extension);
    }
 }

   //upフォルダの中身
    $dw_items =  glob('./up_file/*');//DL用、同じでも変数変えないとエラーになる
    $del_items = glob('./up_file/*');//削除用、grobは配列形式でファイルパスを取得
?>
<!doctype html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>ファイル一覧 | ファイル預かり処・マイ保管庫</title>  
<!-- headerインクルード -->
<?php require_once(dirname(__FILE__).'/header.php'); ?>
<div id="wrapper">
    <header>
       <div id="titleVar">
          <h1><i class="fas fa-circle"></i>ファイル預かり処 マイ保管庫</h1>
           <p id="logout"><a href="logout.php">ログアウト</a></p>
       </div>       
       <div id="topvew">My keep folder</div>             
    </header>
    <main id="main">
        <h2 class="pageTitle">ファイルアップロード</h2>
     <!-- ファイルup -->
        <form id="upBox" action="" method="post" enctype="multipart/form-data">
              <p class="notice">※ファイルsizeは1つにつき30MBまで、名前は英小文字で</p>
              <!-- UPし直し表示 -->
              <?php echo $restore; ?>
              <p id="<?php echo $up_before; ?>">ファイル「<?php echo $filename; ?>」はアップされました。続けてUPできます</p>
              <label for="up">
                  <!-- ファイルを選択ボタン -->
                  <?php echo $select_file; ?>
              </label>
              <input id="up" type="file" name="file_up">
              <p id="send"><input type="submit" value=""></p>
              <!-- エラーメッセージ -->
              <?php echo $messege; ?>
        </form>

      <div id="fileBox">
          <p id="fileCount">ファイル数<?php echo count($dw_items); ?>項目</p>         
          <h3 class="selectFile" id="dowTab">DL用ファイル一覧</h3>  
          <form id="dowList" action="download_file.php" method="post">
             <!-- 飛び先でLocation リダイレクト処理-->
              <ul>
                 <?php if(count($dw_items) === 0): ?>
                    <li>まだファイルはありません</li>
                    <?php else: ?>
                      <?php foreach($dw_items as $items): $dw_name = Pathinfo($items,PATHINFO_BASENAME); ?>                   
                     <li><input type="radio" name="dowl" value="<?php echo $dw_name; ?>"><?php echo $dw_name; ?></li>                     
                      <?php endforeach; ?>
                  <?php endif; ?>
              </ul>
              <p class="notice">※左のラジオボタンにチェックしてダウンロードボタンをクリックしてください</p>
              <p class="pibtn"><input type="submit" value="Download"></p>
          </form>

          <h3 class="selectFile" id="delTab">削除用ファイル一覧</h3>
          <form id="delList" action="delete_confilm.php" method="post">
              <ul>
                 <?php if(count($dw_items) === 0): ?>
                    <li>まだファイルはありません</li>
                    <?php else: ?>
                      <?php foreach($del_items as $items): $del_name = Pathinfo($items,PATHINFO_BASENAME); ?>
                         <li><input type="checkbox" name="del[]" value="<?php echo $del_name; ?>"><?php echo $del_name; ?></li>  
                      <?php endforeach; ?>
                  <?php endif; ?>
              </ul>
              <p class="notice">※左のチェックボックスを選択(複数可)して確認ボタンをクリックしてください</p>
              <p class="vibtn"><input type="submit" value="削除確認"></p>
          </form>
      </div><!-- //id="fileBox"-->

    </main>  
<!-- footerインクルード -->
<?php require_once(dirname(__FILE__).'/footer.php'); ?>



input type="file"は特殊で、デフォルトのボタンを使うのはビジュアル面で抵抗があったのでカスタマイズしました。

ファイルが選択されたらボタンがファイル名に変わって、エラーだったら上にメッセージ表示。
OKだったらtype="file"ブロックは非表示になって、type="submit"にすり替え。
見た目は一緒のボタンです。

ファイルアップが成功したらボタンの上にファイル名が表示して下のリストに追加といった仕様。

ただ、ファイル選択時はsubmitボタンは押されてないのでphpでの処理が難しい。
そこでjsのchangeイベントを活用。
ここは頭がこんがらがりました。phpとjsとcssのトリプル連携。

submit_btn.js
jQuery('#up').on('change',function(){
      const upfile = jQuery('#up').get(0).files;
      console.log(upfile);
      //多次元配列になるのかな? upfile[[name: xxx,size: xxx]]
      const fileName = upfile[0].name;            
      console.log(fileName);
       //file選択をsubmitにすり替え
      jQuery('#take').css('display','none');
      jQuery('#send').css('display','block');
      jQuery('#send input').val(fileName);
   });


ダウンロードチェックページ

ダウンロードのコードはどうしても分からなかったのでググって動いたものをコピペさせてもらいました。
それまではダウンロードできても開けられなかったり不具合続出。

ここのコードが一番難しい。
今の段階では理解できなかったのですが、そのうち自分でも組めるようになりたいです。

参考サイトはこちら

download_file.php
//ダウンロードチェック
session_start();
session_regenerate_id(true);
if(isset($_SESSION['login']) === false){
    header('Location: un_login.php');
    exit();
}

function html_escape($word){
        return htmlspecialchars($word,ENT_QUOTES,'UTF-8');
    }
$dowload_file = $_POST['dowl'];
$dowload_file = html_escape($dowload_file);

//var_dump($dowload_file);

//ここのコード分からなかったのでネットからググって拾ってきた
    function download($pPath, $pMimeType = null){
    //-- ファイルが読めない時はエラー(もっときちんと書いた方が良いが今回は割愛)
    if (!is_readable($pPath)) { die($pPath); }

    //-- Content-Typeとして送信するMIMEタイプ(第2引数を渡さない場合は自動判定) ※詳細は後述
    $mimeType = (isset($pMimeType)) ? $pMimeType
                                    : (new finfo(FILEINFO_MIME_TYPE))->file($pPath);

    //-- 適切なMIMEタイプが得られない時は、未知のファイルを示すapplication/octet-streamとする
    if (!preg_match('/\A\S+?\/\S+/', $mimeType)) {
        $mimeType = 'application/octet-stream';
    }

    //-- Content-Type
    header('Content-Type: ' . $mimeType);

    //-- ウェブブラウザが独自にMIMEタイプを判断する処理を抑止する
    header('X-Content-Type-Options: nosniff');

    //-- ダウンロードファイルのサイズ
    header('Content-Length: ' . filesize($pPath));

    //-- ダウンロード時のファイル名
    header('Content-Disposition: attachment; filename="' . basename($pPath) . '"');

    //-- keep-aliveを無効にする
    header('Connection: close');

    //-- readfile()の前に出力バッファリングを無効化する ※詳細は後述
    while (ob_get_level()) { ob_end_clean(); }

    //-- 出力
    readfile($pPath);

    //-- 最後に終了させるのを忘れない
    exit;
}

//選択されたファイルがあったらダウンロード、なかったらそのままリダイレクト
//選択されないままダウンロード処理されちゃうと変なファイルがDLされる
if(isset($_POST['dowl'])){
    download('./up_file/'.$dowload_file);
    header('Location: file_list.php');   
} else {
   header('Location: file_list.php');
}


削除確認、完了ページ

AdobeXD イメージ図
check.jpg

削除だけは誤って消してしまって後悔しないように、確認してからの導線にしました。
完了ページのレイアウトもほぼ一緒です。

delete_done.php
//ログインしていないとアクセスさせない
session_start();
session_regenerate_id(true);
if(isset($_SESSION['login']) === false){
    header('Location: un_login.php');
    exit();
}

function html_escape($word){
    return htmlspecialchars($word,ENT_QUOTES,'UTF-8');
}

$delete_file = '';

//POSTで渡されたファイルを削除
if(isset($_POST['check'])){
    for($i = 0; $i < count($_POST['check']); $i++){           
        unlink('./up_file/'.html_escape($_POST['check'][$i]));
        //削除ファイルli書出し
        $delete_file .= '<li><i class="far fa-file"></i>'.html_escape($_POST['check'][$i]).'</li>';
    }    
}

?>
<!doctype html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>ファイル削除完了 | ファイル預かり処・マイ保管庫</title>
<!-- headerインクルード -->
<?php require_once(dirname(__FILE__).'/header.php'); ?>
<div id="wrapper">
    <header>
       <div id="titleVar">
          <h1><i class="fas fa-circle"></i>ファイル預かり処 マイ保管庫</h1>
           <p id="logout"><a href="logout.php">ログアウト</a></p>
       </div>       
       <div id="topvew">My keep folder</div>             
    </header>

    <main id="confiBox">
        <h2 class="pageTitle">ファイル削除完了</h2>
        <p class="confiText">以下のファイルを削除しました</p>
        <ul>
            <?php echo $delete_file; ?>         
        </ul>
        <p id="toListpage"><a href="file_list.php">ファイル一覧ページへ</a></p>
    </main>

<!-- footerインクルード -->
<?php require_once(dirname(__FILE__).'/footer.php'); ?>

ログアウトページ

ログアウトページは、お約束のセッション破棄だけなのでコードは省きます。
レイアウトはログインページと同じにしました。


ひとまず完成

あとは実際のサーバに上げて動作確認。

動いた時は大感動。
あれ?
でもアップできないファイルがある。

色々試して、どうやら日本語名のファイルはアップできないみたい。

XAMPP開発時では日本語のファイル名でも大丈夫だったんですけどね。
そういえば日本語とサーバの相性は良くないと昔から言われてました。

とりあえず注意書きに日本語NGと追加して応急対処。
preg_matchで条件設定した方がいいのかなと思ったりしています。

ひとまず、これで完成として使い込んでみようと思ってます。
制作期間は約1週間、畑仕事と家事の合間にコツコツと作業

お婆ちゃんのweb制作奮闘記でした。

  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む