- 投稿日:2020-05-21T21:04:39+09:00
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>
- 投稿日:2020-05-21T20:41:51+09:00
サクッと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()でフォームの内容を送信しています。
はい、以上になります。おわりに
簡易なメモではありますが、もし間違い等ありましたらご指摘をお願いいたします。
参考資料
- 投稿日:2020-05-21T19:11:02+09:00
簡易的なKrunkerのチートシート(?)を作りました
サイト
https://katudon.000webhostapp.com/Home.php
途中まで攻略サイトみたいにしようと思ったんですが、そんなサイトは既に山ほど存在してるので、ダメージとかを計算できるデータベース的なサイトにしました。なので、銃一覧以外は機能しません。
いつかherokuに移すかも。使用方法
見たい銃を銃一覧から選択するとその銃の性能を見ることができます。
ドロップダウンメニュー(画像の"スナイパーライフル"って書いてるやつ)を選ぶことでその場で他の銃と比較が出来ます。左上の+を押すことで複数の銃と比較も可能。-を押すと一番右端のやつが消えます。
威力のドロップダウンメニューから頭、胴、足それぞれのダメージを見ることが出来ます。
総合DPSは勝手に自分が勝手に編み出したDPSで、下に小さく書いてある通り、人間の反応速度やエイム速度等を反映したDPSを計算します。
総火力の所に数値を入れると(単位はms)、その間に与えることが出来るダメージの総数を計算します。
以上です。
- 投稿日:2020-05-21T15:58:30+09:00
初学者がjavascript教えるならどうするか内容を考えてみた!
前提
本記事はプログラミング初学者の筆者が
「プログラミング初学者に対し、JavaScriptのイベントを分かりやすく教えるならどう教えるか」
という目線で書いております。
筆者もプログラミング初学者のため拙いところや詰めが甘い箇所があると思います。
その際はご指摘頂ければ幸いです。目次
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イベントの実例
今回は「金メダル、銀メダル、銅メダルをクリックしたら消える。」というイベントを書きました。
簡易的なモノなのでイメージがしやすいと思います。
詳細を記載したコードを記入したので、実際に挙動を確認していただければ幸いです。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.cssbody { 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入門】初心者でも分かるイベント処理の作り方まとめ!
- 投稿日:2020-05-21T15:58:30+09:00
「初学者がJavaScriptのイベントを分かりやすく教えるならどう教えるか?」を考えてみた!
前提
本記事はプログラミング初学者の筆者が
「プログラミング初学者に対し、JavaScriptのイベントを分かりやすく教えるならどう教えるか」という目線で書いております。
筆者もプログラミング初学者のため拙いところや詰めが甘い箇所があると思います。
その際はご指摘頂ければ幸いです。目次
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イベントの実例
今回は「金メダル、銀メダル、銅メダルをクリックしたら消える。」というイベントを書きました。
簡易的なモノなのでイメージがしやすいと思います。
詳細を記載したコードを記入したので、実際に挙動を確認していただければ幸いです。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.cssbody { 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入門】初心者でも分かるイベント処理の作り方まとめ!
- 投稿日:2020-05-21T15:57:39+09:00
OpenWeatherMapAPIのアイコンを変える方法
1. OpenWeatherMapのお天気アイコン
OpenWeatherMapには予め気象コードに合わせたアイコンが用意されています。
無料なのにとっても親切!
そんな初期設定のアイコンの一例がこちらです。
なんとも画質も微妙ですし、あまりイケてない気がしますね・・・
変えれるものなら変えたいと思っていじってみたら
とっても簡単にできたので、その方法を記録しておきます。2. ドキュメントを確認してみると...
OpenWeatherMapのドキュメントを確認してみると、下記アイコンの一覧が確認できます。
実際に表示されるものとは少し違いますが、
ファイル名がわかるのでこちらをいじればどうにかなりそうということが分かります。
https://openweathermap.org/weather-conditions
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. 完成したのがこちら...
5. 参考サイト
- 投稿日:2020-05-21T14:43:11+09:00
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年間有効なので勿体無いのですが。)
ここまで読んでいただけてありがとうございます。
ど素人の備忘録ですが、少しでも参考になる部分があれば幸いです。
- 投稿日:2020-05-21T14:12:44+09:00
初心者に捧げるハンバーガーメニューの作り方
対象読者
・ハンバーガーメニューを作りたい人
・細かく作り方の手順を知りたい人
・自分でオリジナルの見た目を作って応用したい人
・(ちなみに筆者の自己学習のためにも記事を書いているので間違っている箇所があれば是非とも教えて頂きたい)目次
・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ヶ月の初心者です。なのでもっと効率よく、尚且つ綺麗に記述できると思います。
ですが、過去の自分はただコードだけ見せられてもどう書けばいいか分からなかった経験があります。なので日本語で手順も記載することによって中の値だけ変えれば誰でもとりあえず実装できるようになると思います。
作成の手順通りに作って中の値だけ変えることによってオリジナルのハンバーガーメニューに応用できると思います。
過去の自分が知りたかったような記事でした。
- 投稿日:2020-05-21T12:49:18+09:00
【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
- 投稿日:2020-05-21T10:37:38+09:00
XPath基礎編(3) ー XPathによく使う関数
前回は最も使われるXPath書き方を紹介して、今回では、より正しくデータを指定するには、XPathによく使われる関数を紹介します。
1. contains() :特定の文字列が含まれる要素を指定する
contains() は通常、属性値またはテキストに含まれる文字列ををあいまい検索することに使われます。
- contains(@class,"XXX") :属性値に特定の文字列が含まれている要素を指定する
例えば、このHTMLからclass属性にRedがつくものをすべて取得したい場合、次のように書きます。
//span[contains(@class,“Red”)]
つまり、このXPathは、classにRedを含むspan要素を取得するという意味になります。
例えば、このHTMLから『Rowling』という文字を含んでいる要素を指定したい場合は、次のように書きます。
//span[contains(text(),"Rowling")]
ヒント!
ページ送りボタンを指定する場合はよく『contains(text(),"次へ")』 を使います。
ページ送りボタンを指定するXPathの書き方についてはこちら➡ ページ送りボタンを指定するXPathの書き方2. position():特定位置の要素を指定する
前回の記事では、で数値を囲むと、順番の要素を取得できることを紹介しました。positionでもN番目の要素を指定することもできます。
- position()=
例えば、上記のHTMLで『商品3』は4番目のth要素であるため、次のように書きます。
//tbody/th[4]
position()=を使うと、次のように書きます。
//tbody/th[position()=4]
- position() >
『広告』以外の要素を取得する場合、『広告』は1番目のth要素であるため、次のように書きます。
3. and/not/or:複数の条件が含まれている要素を指定する
複数の条件が同時に含まれている要素を指定したい場合はand/not/or関数を使います。
このHTMLから、『S_20』と『pdf』を含むhrefを取得したい場合は、次のように書きます。
//a[contains(@href,“S_20”) and contains(@href,“pdf”)]
このHTMLからhttps://helpcenter.octoparse.jp/hc/ja/xpath/S_10.html 以外の[@href]を取得したい場合は、次のように書きます。
//a[not(contains(@href, "S_10"))]
この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
- 投稿日:2020-05-21T05:26:59+09:00
初心者によるプログラミング学習ログ 322日目
100日チャレンジの322日目
twitterの100日チャレンジ#タグ、#100DaysOfCode実施中です。
すでに100日超えましたが、継続。
100日チャレンジは、ぱぺまぺの中ではプログラミングに限らず継続学習のために使っています。
322日目は、
おはようございます
— ぱぺまぺ@webエンジニアを目指したい社畜 (@yudapinokio) May 20, 2020
322日目 1.5h
・架空LP模写11日目1.5h(@ririru_123)
・架空LP模写:お問い合わせ部分を作成
累計時間にして14時間ぐらいか・・・
スマホ版いまだ完成せずだわw#早起きチャレンジ#駆け出しエンジニアと繋がりたい#100DaysOfCode
- 投稿日:2020-05-21T01:33:05+09:00
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=feedtypeとcharsetパラメータを指定
Content-Type: application/atom+xml; type=feed; charset=utf-8名前空間
拡張子
「.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
- 投稿日:2020-05-21T01:19:57+09:00
webカメラを使って、1000px ×1000px のプロフィール画像を量産してくれるサイトをつくった
完成品
サイト名:1000×1000 証明写真
https://id-photo.ml (ダメだったらこっち:https://id-photo.herokuapp.com/)作り方!!
・まずファイル構造はこんな感じ
今回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.jsconst 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 .npmProcfileweb: node index.jsそのほかのファイルは下記コマンドからインストールできます。
npm init -y npm i body-parser express完成
触って遊んでみましょう。
step1「サイトへ飛ぶ」
https://id-photo.ml (ダメだったらこっち:https://id-photo.herokuapp.com/)
step2「カメラアイコンをクリックして撮影」
カメラのアイコンをクリックすると、1000px × 1000px の画像が下に量産されていきます。
step3「画像をダウンロード」
量産された画像の上で、右クリックをするとメニューがでるので、そこで「名前を付けて画像を保存...」を選択してください。
ダウンロードされた画像が、少し縦に伸びている感じになっているのはスリム効果です。
おわり
一応、今回使用した画像を貼っておきます。ご自由に使用してください。
また今回参考にさせていただいた記事です
・https://qiita.com/kino15/items/8f8feffca54015555f4b最後まで読んでいただきありがとうございました。
- 投稿日:2020-05-21T00:58:56+09:00
プチ・クラウドストレージ作ってみた
初めまして
60歳を間近にウェブデザイナーを目指して独学で勉強しているお婆ちゃんです。
去年の暮れからphpを勉強して、初めてシステムらしきものを作ってみました。
やりたいこと
プチ・クラウドストレージ
・ファイルをどこからでもアップ、保管してダウンロードもできる。
・セキュリティも兼ねてIDとパスワードでログイン形式にする。
まずはパワーポイントでサイトの系図を設計しました。
Excel、Word、パワポは商工会議所で習いたてホヤホヤです。
それぞれ基礎編までクリアして1月半くらいかかりました。
全部で5万円くらいはかかったかな。次は手順を考えてイメージを具体化。
これは無料版のAdobeのXDを使ってみました。操作も簡単で、感覚的に作れちゃうので便利です。
ページ自体はシンプルにしたかったのでフォントだけで作りました。
コードを書くのもAdobeの無料Brackets。Adobeドップリ。
ログインページ
AdobeXD イメージ図
パスワードと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'); ?>
ファイルリスト一覧ページ
アップロードとダウンロード、削除ファイルの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.jsjQuery('#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'); }
削除確認、完了ページ
削除だけは誤って消してしまって後悔しないように、確認してからの導線にしました。
完了ページのレイアウトもほぼ一緒です。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制作奮闘記でした。