- 投稿日：2020-11-17T23:46:22+09:00
画面透過について
bodyに背景画像や背景色を挿入したものの、containerなどの要素の中も透過して画像や色を反映させたいと思った事はありませんか？
そんな時はrgba(255,255,255,0)と設定しましょう。
以下のようになります。
- 投稿日：2020-11-17T23:10:05+09:00
vue.jsにおけるエンターキー押下時の挙動をハンドリングする
解決したい課題
エンターキー押下時に､ボタン押下と同じ挙動にしたい｡
課題の詳細
内にが2つある場合､の韻字的なtype="button"が2つになってしまい(ここは仮定)
意図していないがエンターキーでsubmitがされない状態｡結論
※参考
https://qiita.com/sd131/items/06e13b5008efc41102d1
※参考サイトからの引用
v-form、v-btnコンポーネントを利用していると、 v-btnがtype="button" となる。
よって、テキストフィールドがあり、submitボタンがない状態のため 、Implicit submission （暗黙の submit）という HTML の仕様により、エンターキーで submit され、リロードされてしまう。従って､そのtext内でエンターキーによるsubmitを有効化したいときは､
その内にkeyイベントを以下のように追加してあげれば良い｡
<v-text-field>
@keydown.enter="submit"
</v-text-field>
keydownとkeyupとkeypressの違いは以下がわかりやすい｡
https://murashun.jp/blog/20191110-52.htmlvuetify.jsのbuttonイベントについては以下にかなりまとまっている｡
公式:https://v15.vuetifyjs.com/ja/components/buttons/
Qiita:https://qiita.com/rubytomato@github/items/890d59804978aa959e9cQiita､すげーな｡｡｡
- 投稿日：2020-11-17T23:00:40+09:00
PHPの勉強でポートフォリオ投稿サイトを作ってみた
はじめに
新卒でウェブ制作会社に就職し、コードの量産に嫌気が差し営業に転職。
趣味で作りたいもののために勉強しているウェブエンジニアです、こんにちは。今まではWordpressを使用しウェブサイトを作ってきましたが、ウェブサービスを作りたく思いバックエンドの勉強を開始しました。
その時、悩んだこと、作ったサービスを簡単に書こうと思います。「PHP」を選択するか、あるいは「Laravel」選択するか
結果的にタイトルにあるように
PHPを選択しましたが、すごい悩みました。
というのもPHPはあまりいい噂を聞きません。
「やれ、古い」「やれ、汚い」挙句の果てに「オワコン」なんて言葉も見つけました。それに比べて
Laravelはかっこいい。
なんかモダンな香りがしますよね。
「PHP勉強してるより、Laravel勉強してる」の方がかっこいい。形から入るタイプの私はすごい悩みました。
通勤電車中、仕事中、食事中、ずっと考えました。
考えて考えて考え抜いた結果、「とりあえず手を動かそう、早く作ろう」という結論に至りました。そうすると環境構築するのも面倒くさいので、もう
PHPでいいやと吹っ切れました。結果的に
PHPのことが良く知れたので正しい選択をしたと思っています。
たぶんLaravelの勉強の役にもたったんじゃないかと思い込むようにしています。勉強開始～制作完了まで
言語選択に時間をかけ過ぎました。
勉強を始めてみるとPHPは確かに学習コストがそこまで高くなく、いい感じで進むので楽しく作成することができました。
学習期間は、ほとんど作りながらの学習だったので、2020年8月20日～2020年10月20日。
丸２か月かかりました。
結構かかりましたが、データベースとPHPをまるっと学べることができたので、有意義な時間でした。
作っているものが形になっていく過程は相変わらず、面白いですね。ポートフォリオ投稿サイト
作ったのはポートフォリオ投稿サイトです。
機能は見ていただけるとわかりますが簡単にリスト化すると
- ログイン
- 投稿
- イイネ
- コメント
- 投稿削除
- ログアウト
こんな具合。
まあ、多くの投稿サイトと同じ機能を持っていると思います。サイトは下記URLになりますので、よろしければ投稿してみてください。
またアドバイスもお待ちしております。ぜひとも、何卒。作ってみた感想と今後
とにかく物を作りたいという欲求を満たすことができました。
学習コストの低いPHPそういった入り口として非常にいい言語なのかもしれません。ただ実力不足でサービスとしては物足りない部分も多く、例えばセキュリティー対策も最低限しかできていないですし、イイネ機能の非同期通信も結局、実装せずに満足してしまいました。投稿された画像の軽量化とかもしたかった。
そしてにより、作っただけのサービスになってしまいましたので、そこも反省材料として血肉にしていこうと思います。
次は
Laravelを使用し、サービスとして確立できるものを作りたいと思います。
- 投稿日：2020-11-17T21:58:10+09:00
未経験のおっさんがプログラミングを学ぶまで
はいどうも！
某プログラミングスクールに通い始めた37歳のおっさんです。
プログラミングは完全に未経験。
そんなおっさんが転職するまでの軌跡（奇跡？）をぼちぼち綴っていこうと思います。投稿は今日が初めてですがスクールは今日で9日目。
HTML＆CSSをやってRubyに入り、Railsをやって試験を受けて、というところです。簡単に私の経歴を
↪️
地方出身、東京の文系私立大学卒、東京で就職し営業職(toC & toB)でマネジメント経験あり。
インディーズですが学生時代にやっていたバンドでCDを1枚だけ出しています。
キャンプとジム通い、音楽掘りが趣味。
ジャンルはRock、JazzからEDMまで幅広く聴きます。
今はちょっと難しくなってしまいましたが海外旅行もそこそこ行きました。
なぜプログラミングを始めたのか、どうして転職を決意したのかなどは後々ゆっくりとupしていこうと思います。
とりあえずまだ始めたばかりですが感想としては
「めちゃくちゃやることがいっぱいある」
「勉強すること、覚えることが今までやってきたことの比じゃないレベルで多い」
この二つですね。
日々思ったこと、できなかったこと、疑問点などなど
自分が見返した時に
「あ〜こんなことあったな」とか、
「こんなことで悩んでたんだな」とかとか、
あとはこれを読んだ他の方に少しでも役に立てればなと思います。そんな具合ですが本日は頭がパンクしているのでこれにて
- 投稿日：2020-11-17T21:53:02+09:00
自作PC特化だけど、リモート起動や自動起動を好きにカスタムできるWebアプリをobnizで試作してみた
自作PCの自動起動を好きにカスタムできる良い感じのアプリが無いので、自分で製作を考えている。試しにobnizを利用してWebアプリから電源ONを試作。 ※今回は電源ONの代わりにLED点灯を試す。
ちょっと分かり辛いが、電源ONクリックするとLEDが１秒点灯して消える。
Webアプリ画面
曜日別に起動時間を設定したいので、曜日別時間設定画面を設けた。データベース保存はまだ実装出来ていない。CodePenはコチラから
コード
.html<!DOCTYPE html> <html lang="jp" > <head> <meta charset="UTF-8"> <title>HPC-accede</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.0/css/bootstrap.min.css'> </head> <body> <!-- 全体をVue.js有効にする --> <div id="app" class="container text-white bg-dark p-1"> <!-- タイトル --> <div class="row text-center"> <div class="col-sm-6 mx-auto"><h1>HPC-accede</h1></div> </div> <!-- 設定 --> <div class="form-group my-3 mx-4"> <div class="border-bottom col-sm-12"><h5>Obniz ID</h5></div> </div> <div class="form-group form-inline my-3 mx-5"> <input v-model:value="ObnizID[0]" class="form-control" type="text" maxlength="4" style="width:80px;"> <label class="control-label mx-2">-</label> <input v-model:value="ObnizID[1]" class="form-control" type="text" maxlength="4" style="width:80px;"> </div> <!-- 即時電源ON --> <div class="form-group my-3 mx-4"> <div class="border-bottom col-sm-12"><h5>即時起動</h5></div> </div> <div class="form-group my-3 mx-5"> <button v-on:click="PowerON" class="btn btn-success">電源ON</button> </div> <!-- 曜日指定 --> <div class="form-group my-3 mx-4"> <div class="border-bottom col-sm-12"><h5>曜日別時間設定</h5></div> </div> <div class="form-group form-inline col-sm-12"> <!-- 日曜 --> <div class="form-inline col-sm-4 mb-2"> <label class="control-label mx-3">日曜：</label> <input v-model:value="WeekTime['Sun']" class="form-control" type="time" step="1" style="width:130px;"> </div> <!-- 月曜 --> <div class="form-inline col-sm-4 mb-2"> <label class="control-label mx-3">月曜：</label> <input v-model:value="WeekTime['Mon']" class="form-control" type="time" step="1" style="width:130px;"> </div> <!-- 火曜 --> <div class="form-inline col-sm-4 mb-2"> <label class="control-label mx-3">火曜：</label> <input v-model:value="WeekTime['Tue']" class="form-control" type="time" step="1" style="width:130px;"> </div> <!-- 水曜 --> <div class="form-inline col-sm-4 mb-2"> <label class="control-label mx-3">水曜：</label> <input v-model:value="WeekTime['Wed']" class="form-control" type="time" step="1" style="width:130px;"> </div> <!-- 木曜 --> <div class="form-inline col-sm-4 mb-2"> <label class="control-label mx-3">木曜：</label> <input v-model:value="WeekTime['Thu']" class="form-control" type="time" step="1" style="width:130px;"> </div> <!-- 金曜 --> <div class="form-inline col-sm-4 mb-2"> <label class="control-label mx-3">金曜：</label> <input v-model:value="WeekTime['Fri']" class="form-control" type="time" step="1" style="width:130px;"> </div> <!-- 土曜 --> <div class="form-inline col-sm-4 mb-2"> <label class="control-label mx-3">土曜：</label> <input v-model:value="WeekTime['Sat']" class="form-control" type="time" step="1" style="width:130px;"> </div> </div> </div> <!-- CDN --> <script src='https://cdnjs.cloudflare.com/ajax/libs/vue/2.6.11/vue.min.js'></script> <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js'></script> <script src='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.3/js/bootstrap.min.js'></script> <script src='https://unpkg.com/obniz@3.9.0/obniz.js'> </script><script src="./script.js"></script> </body> </html>script.js// 任意の秒数待つことができる関数 const sleep = (msec) => new Promise(res => setTimeout(res, msec)); // Obniz関数 let obniz; // Obniz呼び出し関数 const connect = function(func, ob){ console.log(ob.connectionState); // Obnizへの接続を確認 if (ob.connectionState === "connected") { func(); } else { ob.on('connect', () => { func(); }) } } const app = new Vue({ el: '#app', // Vueが管理する一番外側のDOM要素 data: { // Vue内部で利用する変数定義 ObnizID: ['0000', '0000'], WeekTime: [ {'Sun':'00:00:00'}, {'Mon':'00:00:00'}, {'Tue':'00:00:00'}, {'Wed':'00:00:00'}, {'Thu':'00:00:00'}, {'Fri':'00:00:00'}, {'Sat':'00:00:00'}, ], }, methods: { // 関数はココに記述 PowerON: function() { // LED ON // Obniz ID 指定 let obnizid = `${this.ObnizID[0]}-${this.ObnizID[1]}`; console.log(obnizid); this.obniz = new Obniz(obnizid); let me = this; // thisを関数内で使えないので変数に代入 // connect関数を呼んで、connect関数内で以下のFunctionを実行 connect(async function() { const led = me.obniz.wired('LED', { anode: 0, cathode: 1 }); me.obniz.display.clear(); me.obniz.display.print('ON'); led.on(); await sleep(1000); led.off(); // LED点灯 1s me.obniz.display.clear(); }, this.obniz); }, }, });弟に使い勝手とかを聞いてみた
今回はLED点灯だが、完成後はPCが起動するようになるイメージを持ってもらったうえで使ってもらった。
操作面
- 初回実行時のLED点灯の動作がちょっとおかしい。 ※コーディングミスってるかも。
- 初期設定（ObnizID）は別メニューの方が良いと思う。
- 電源ON を押したらすぐ起動しちゃうの？間違えて起動とか考慮したら？
- 毎日を同じ時間にしたい場合、一つずつ設定するのは面倒では？
- 電源OFF は出来ないんだよね？（聞いてみただけみたい。）
- この日だけ臨時で時間設定とか出来たら良いのでは？
- プリセット登録（パターンを予め設定できる）とかどう？
企画面
- 自作PCじゃないから使わないな。（自作PCでしか出来ない？）
- 同じ仕組みで遠隔起動出来ると良いかもしれないけど、思いつかないね。（私も思いつかない。）
なぜ自動起動したいか（補足）
PCでTV録画しているからって理由。毎日同じ時間で起動はBIOSで設定できるけど、もう少し起動時間をフレキシブルに変更したいっていう私のわがまま。
想定イメージ
今回はWebアプリとObnizの連携部分のみの実装。LED部分をリレーと置き換え、自作PCのPowerSWと置き換えてショートさせれば電源ON出来る想定。（たぶん。）
- 投稿日：2020-11-17T19:58:11+09:00
HTML/CSSについて
今回は今まで習ったことの内容の中の、HTMLとCSSについてアウトプットしていきます！！
HTMLについて
HTMLとはマークアップ言語の一つで簡単に言えば文字を表示するための言語です。入れ子構造になっている。
例）< h1 >文字を入力< /h1 >
上記のように左右をタグと呼ばれるもので囲み表示します。
タグには沢山種類があり、主要な物を下記に記します。
h1,h2,h3,h4...タグ
見出しタグ。数字が大きくなっていくほど、小さい文字となる。
pタグ
段落を指定するためのタグ。
headタグ、bodyタグ
headタグには簡単に言えばHTMLの設定を記載する。bodyタグには実際にweb上に表示したい文字を記載
headerタグ、mainタグ、footerタグ
この三つはbodyタグの中に記載するものになる。
※ headerタグとheadタグは間違えないようにしよう！！
divタグ
ブロックレベル要素としてグループ化できる要素。基本的に何もない限りこのタグを使用する。
ulタグ、liタグ
ulを親要素としてliタグを使用。基本的にlistとして使用するため、同じ意味合いを持つものをいれる。CSSについて
簡単に言えば、CSSとはHTMLで記述した文章に色やサイズ等を適用するための言語である。
例)
index.html<html> <head> <link rel = "stylesheet" href = "style.css"> </head> <body> <div class = "class">背景が赤くなる</div> <div class = "class-j"> <p>文字が赤くなる</p> </div> </body> </html>style.css
.class{ background-color: red; } p{ color: red; }上記のように、HTMLの方でlinkタグを指定してあげることで、CSSが適用されるようになる。CSSはHTMLでclassを指定して使用することも可能であると同時に、要素を指定して使用することも可能。
また、CSSは上記で記載したように、プロパティ(background-color等)と呼ばれるものを記載することで色や大きさなどを変更することが可能。
プロパティの主要なものは下記に記載。colorプロパティ
文字の色を変更
background-colorプロパティ
背景色を変更
font-sizeプロパティ
文字のサイズを変更
heightプロパティ
高さを指定できるプロパティ
widthプロパティ
幅を指定できるプロパティHTMLの表示について
HTMLは箱のような形になっており、外から順にmargin,border,paddingとなっている。それらの幅の指定を行う方法が下記のプロパティである。
marginプロパティ
外のサイズを指定できるプロパティ
paddingプロパティ
内側のサイズを指定できるプロパティ
borderプロパティ
marginとpaddingの間の線の部分を指定できる。FlexBoxとは
HTMLが箱のようなものと前述に記したと思うが、この箱を自由に動かす便利な概念みたいな物。
基本的に下記を使用する。
display: flex
親要素に指定すると、小要素のブロックが全て横並びになる。
justify-content: A;
親要素に指定すると子要素の互いの横幅を一括で指定することが可能。Aにはspace-aroundやspace-betweenなどを指定する。
align-items: A;
親要素に指定すると小要素の縦の位置を一括で調整できる。Aにはcenterなどを用いる。
float: A;
子要素に指定すると横並びになる。Aにはrightとleftが入る。
※ floatとdisplay: flex;は、一見似たようなものに見えるが、display: flex;の方が圧倒的に移動できる範囲が広いため、floatはあまり使用されない。まとめ
まだまだ、色々なタグやプロパティが存在するが、この範囲はいずれ何度も行う内容だと思うので、開発の際にその都度公式リファレンスを確認すると良いのではないかと思います。
- 投稿日：2020-11-17T18:35:21+09:00
CSSグリッド活用によるレスポンシブ対応
はじめに
現在オリジナルアプリを作成中です。投稿した画像を一覧で表示するページを作成しました。一覧を見栄え良くするため、タイル型レイアウトを採用しました。具体的手段はグリッドの活用です。忘れないように書き記します。
開発環境
ruby 2.6.5
Rails 6.0.3.4
HTML
CSS目次
1.HTMLの準備
2.CSSの設定HTMLの準備
タイル状にしたい部分全体(親要素)をdivタグで囲い、クラス名をわかりやすく「grid」とつける。
補足：Ruby on Railsでアプリを制作しています。index.html.erb<div class = "wrapper grid"> #全体をdivで囲み、クラス名gridを追加する <% @desks.each do |desk| %> <%= link_to desk_path(desk.id) do %> <%= image_tag desk.image, class: "desk-img" %> <p> <%= desk.title %> <%= "by#{desk.user.nickname}さん" %> </p> <% end %> <% end %> </div>2.CSSの設定
※最終コードは一番下にあります。
CSSではdisplayプロパティにgridを設定する。これにより、子要素はタイル状にレイアウトされる。タイル間の余白はgapプロパティで設定する。
index.css.grid { display: grid; gap: 26px; }次に各タイルの横幅設定をする。grid-template-columsプロパティにより、横に並べたいタイルの枚数だけfrを設定する必要がある。ここで1frは親要素に対する横幅を自動で調整する。下記の場合、1frが3つあるので、1:1:1の3等分されたグリッドが配置される。もし1fr 2fr 1frのように設定した場合、タイル枚数は3枚であるものの、各タイル幅は左から1:2:1となる。
index.css.grid { display: grid; gap: 26px; grid-template-columns: 1fr 1fr 1fr; margin-top: 6%; margin-bottom: 50px; }最後にレスポンシブ化を記す。repeat関数を使うことにより、タイル数を指示し、コードを簡略化できる。
index.css.grid { display: grid; gap: 26px; grid-template-columns: repeat(3, 1fr); /* 1fr 1fr 1frと同じ */ margin-top: 6%; margin-bottom: 50px; }またminmaxを使うことにより、1タイルの最小と最大幅を設定できる。下記の場合、最小値を240px、最大値を1fr(親要素の3等分相当)となる。最大値は親要素の幅(画面サイズ)に依存する。一方で最小値は24opxに固定され、これ以上は小さくならない。
index.css.grid { display: grid; gap: 26px; grid-template-columns: repeat(3, minmax(240px, 1fr)); /* 1fr 1fr 1frと同じ */ margin-top: 6%; margin-bottom: 50px; }最終コードを下記に記す。上記おrepeat関数のタイル数を表す「3」をautofitに書き換えた。これにより、画面の幅に応じて最適なタイル数を自動で表示する。
index.css.grid { display: grid; gap: 26px; grid-template-columns: repeat(autofit, minmax(240px, 1fr)); /* 1fr 1fr 1frと同じ */ margin-top: 6%; margin-bottom: 50px; }参考：
1冊ですべて身につくHTML-CSSとWebデザイン入門講座以上
- 投稿日：2020-11-17T16:05:12+09:00
「伸び悩んでいる3年目Webエンジニアのための、Python Webアプリケーション自作入門」を更新しました
本を更新しました
チャプター「「動的に生成したHTML」を返せるようになる」 を更新しました。
続きを読みたい方は、ぜひBookの「いいね」か「筆者フォロー」をお願いします ;-)
以下、書籍の内容の抜粋です。
「静的ファイル配信」と「動的なHTMLの生成」
さて、ここまでで「適切なヘッダーの生成」（
Dateとか、Content-Typeとか)ができるようになり、「並列処理」もできるようになり、HTTPのルールに従ってレスポンスを返す基盤の部分はかなり整ってきました。これで 「Webサーバー (=HTTPサーバー) として最低限の機能を揃えていく」 というステップは、ほぼ終わりです。
次のステップとして、 「レスポンスボディとして何を返すか？」 についてもう少し詳しく見ていきましょう。
既に実装済みである「HTMLファイルや画像ファイルの内容をレスポンスボディとしてそのまま返す」という機能は、一般的には 「静的ファイル配信」 と呼びます。
この機能さえあれば、例えば IETFによるRFCのWebページ などは十分に作成可能です。
内容をHTMLファイルに書いて保存しておけば良いだけですから。しかし、皆さんの見慣れたホームページを作成するにはまだまだ機能不足です。
例えば 前橋先生のホームページ ^[本書を書くきっかけを与えて頂いた「Webサーバを作りながら学ぶ 基礎からのWebアプリケーション開発入門」の著者です。詳しくはこちら] のような比較的簡素な^[前橋先生、すいません。]ホームページですら、まだ作れません。
何が作れないかと言うと、下記のようないわゆる「アクセスカウンター」の部分です。
アクセスカウンターの数字は、ページを読み込むごとに数字が増えていきます。
この機能を、皆さんの今のWebサーバーで実現するにはどうすればいいでしょうか？アクセスカウンターの数字が変わるということは、レスポンスボディの内容が変わるということです。
現在のWebサーバーから返却されるレスポンスボディはHTMLファイルの内容そのままですので、レスポンスボディの内容を変えようと思うとHTMLファイルを編集する必要があります。つまり、この機能を提供しようと思うと、HTTPリクエストが来る度に毎回HTMLファイルを自動で（もしくは手動で）編集して保存するような機能が必要になってしまいます。
これは（実現可能ですが）あまりに非効率そうですし、面倒くさそうです。そうなってくると、
「レスポンスボディをファイルから取得するのではなく、Pythonの文字列として生成すれば毎回違うレスポンスボディを生成するのは簡単なのでは？」
という発想になるのは自然なことでしょう。これを 「動的なHTMLの生成」（あるいは 「動的なレスポンスの生成」）と呼びます。
コラム: 「静的」と「動的」
「静的」という言葉はなかなか厄介です。また、対義語である「動的」という言葉も同様に厄介です。
「静的」とは「変化しないもの」、「動的」は「変化するもの」を意味するわけですが、「何に対して何が静的なのか」「何に対して何が動的なのか」を常に意識する必要があります。
例えば「
静的ファイル配信」は「変化しないファイルの配信」を意味しています。
これは、何に対して何が変化しないファイルなのでしょうか？HTMLファイルそのものは、常に変化しえます。ファイルをエディタで編集するだけです。
Webサーバーの機能として見た時も、HTMLファイルを編集してしまうとレスポンスボディも変化してしまうでしょう。「静的ファイル配信」のことを「"いつも"同じレスポンスが返ってくるWebサービス」と表現する方もいらっしゃいますが、このことを考えると正確ではないことが分かります。
HTMLファイルを編集すればレスポンスも変化するのですから。答えは、「リクエストに対して内容が変化しないファイルの配信」です。
「リクエストに応じて内容を変化させないファイルの配信」と言ったほうが分かりやすいかもしれません。ですので、ファイルを編集したときは、内容が変化してもよいのです。
私がジュニアエンジニアだったころは、
「でもHTMLファイルを編集したらレスポンスは変わるんでしょ？いつも同じって嘘じゃない？」
と思って混乱していました。
また他にも、Javascriptを説明する際に「Web上で動的なコンテンツを提供するためのプログラミング言語」と説明されることがあります。
この説明における「動的なコンテンツ」というのは、「時間の経過あるいはユーザーの操作に対して、配信済みのHTMLが変化するコンテンツ」のことです^[正確にはJavascriptが変化させるのはDOMであってHTMLではありませんが、そこはご愛嬌。]。ブラウザに表示させるHTMLは一度レスポンスとしてブラウザへ送ってしまうと、サーバー側のプログラムから変更させることは基本的にはできません。
CSSなどは確かにコンテンツの表示内容を変化（文字の色を赤くしたり）させますが、配信済みのHTMLの内容を変化させているわけではありません。ただし、HTMLと一緒にプログラムをブラウザに送りつけておけば、ブラウザがそのプログラムを後から実行することで配信済みのHTMLを変更させることができます。
それがJavascriptなのです。単に「動的なコンテンツ」を「Webページを変化させる」とだけ理解してしまうと、
「文字の色を変化させるCSSも動的コンテンツを提供しているのでは？」
「HTMLのformタグもボタンを押すかどうかでページの挙動が変わるわけだから、動的なのでは？」
などと混乱してしまいます。
（私は混乱していました。）
このように「静的」「動的」という言葉はよく出てくるわりに理解が難しいので、何に対して何が変化する/しないのか、常に注意しておきましょう。
現在時刻を表示するページを作成する
少し回りくどい説明をしてしまいましたが、やりたいことはソースコードを見てもらったほうが早いかもしれません。
実際に「動的なHTMLの生成」を行い、リクエストする度に結果が変わるようなページを作成してみましょう。
アクセスカウンターをいきなり実装するには過去のアクセス数を保存しておくデータベースのようなものが必要になり少し面倒ですので、まずは簡単のため
/nowというpathにアクセスすると現在時刻を表示するだけのページを作成してみましょう。（アクセスカウンターの実装はもう少し後で取り組みます。）
ソースコード
現在時刻を表示するページを追加するために、
workerthread.pyを変更したソースコードがこちらです。
study/workerthread.py
https://github.com/bigen1925/introduction-to-web-application-with-python/blob/main/codes/chapter14/workerthread.py解説
42-59行目
response_body: bytes response_line: str # pathが/nowのときは、現在時刻を表示するHTMLを生成する if path == "/now": html = f"""\ <html> <body> <h1>Now: {datetime.now()}</h1> </body> </html> """ response_body = textwrap.dedent(html).encode() # レスポンスラインを生成 response_line = "HTTP/1.1 200 OK\r\n" # pathがそれ以外のときは、静的ファイルからレスポンスを生成する else: # ...追加したのはこの部分です。
やっていることは、
「pathが/nowだったら、pythonで現在時刻を表示するHTMLを生成し、レスポンスボディとする」
ということです。
ソースコードについていくつか補足しておきます。
response_body: bytes response_line: str
response_bodyやresponse_lineを代入する箇所が複数に分かれてしまっていますので、事前に型注釈をしておくことにしました。変数の型注釈は、エディタ等に「この変数はこの型の値を代入することを想定していますよ」とヒントを伝える意味があります。
このように記載しておくと、間違って「あっちではstrを代入、こっちではbytesを代入」などとしてしまった際にエディタが事前に警告してくれるようになります。html = f"""\ <html> <body> <h1>Now: {datetime.now()}</h1> </body> </html> """ response_body = textwrap.dedent(html).encode()
ヒアドキュメント+dedent()を使っています。
単に普通のhtmlを書きたいだけなのですが、インデントとか改行とかがpythonでは意味を持ってしまいますので、工夫しています。
それほど難しくはないので、「python ヒアドキュメント」「python dedent」などで調べてみてください。動かしてみる
それでは早速動かしてみましょう。
いつもどおりサーバーを起動した後、Chromeで
http://localhost:8080/nowへアクセスしてみてください。
質素ではありますが、上記のようなページが表示されたでしょうか？
表示されたら、何度かページをリロードしてみてください。
毎回、表示される内容が変わっているでしょうか？
これで動的なHTMLの生成の完了です。
簡単でしたね。改めて振り返っておくと、今回やったことの大事なポイントは、
「サーバ起動後、ソースコードもHTMLファイルも全く編集していないのに毎回違う結果がブラウザに表示されている」
ということです。単にファイルの内容をそのままレスポンスボディとして出力しているだけでは実現できなかった機能です。
HTTPリクエストの内容を表示するページを作成する
せっかくなので、もう1つぐらい動的なHTMLのページを作ってみましょう。
次は、送られてきたHTTPリクエストの内容をそのままHTMLで表示する
/show_requestというページを追加してみます。
続きはBookで！
- 投稿日：2020-11-17T11:46:27+09:00
HTML.CSS.JavaScript.Ruby.Rails概要
HTML
HTML(Hyper Text Markup Language)とはWEBページを作成する際に使用されるマークアップ言語である。
WEBページのほとんどにHTMLが使用されている。
HTMLはタグを使いコンピューターに命令を出す事により見出しを付けたり段落を付けたりと、WEBページのレイアウト、構成を形作ることができる。CSS
CSS(Cascading Style Sheets)は先ほどのHTMLと組み合わせて使用する言語である。
CSSは文字の色やサイズ、レイアウトを変えたり、WEBページを装飾する言語である。
HTMLでもWEBページの装飾をすることは出来るが、CSSの役割なので分けて使う必要がある。JavaScript
WEBサイトに動きをつけるためのプログラミング言語である。
具体的には文章や画像を拡大表示したり、より動的なWEBサイトを作ることができる。
サーバーを介さずにブラウザ上で動かすことができる。またこのようなプログラムをクライアントサイド・スクリプトというRuby
Rubyとは日本人であるまつもとゆきひろ氏によって作成されたオブジェクト指向スクリプト言語である。
WEBサイトやECサイトなどの製作、SNS開発など様々なことができる。有名なサイトではぐるなびや食べログなど
Rubyは他の言語に比べシンプルなコードのため開発スピードが早く読みやすいRails
Ruby on RailsとはRubyを使用したフレームワークである。
フレームワークとは雛形のことで、一からプログラミングをしなくても枠組みが用意されているため開発時間を大幅に削減することができる。他にもSinatraやHANAMIなどがある
- 投稿日：2020-11-17T10:06:46+09:00
【HTML】videoタグで動画を埋め込む
videoタグで動画を埋め込む
イメージ的にはimgタグで画像を扱うような感じです。
videoタグでHTMLに動画を埋め込む場合には、例えば以下のように記述します。index.html<video src="movie.mp4"></video>sourceタグの使用とユーザー環境への配慮
sourceタグを使用することで、ブラウザに再生させたい動画を提示できます。
また、sourceタグでは、フォーマットの異なる動画データを複数指定することができます。
このことにより、ブラウザは記述された順に、再生可能なデータを利用するので
より多くの環境で動画を視聴してもらえる可能性が高くなります。index.html<video> <source src="movie.mp4"> <source src="movie.ogv"> <source src="movie.webm"> </video>videoタグの様々な属性
videoダグの属性は、主に4つです。
1. poster属性
ユーザー環境で利用できる動画が無い場合に
表示させる画像ファイルを指定することができます。index.html<video src="movie.mp4" poster="samnail.jpg"></video>2. controls属性
再生・一時停止・再生位置の移動・ボリュームなど
動画を利用しやすくするインターフェースを、
ブラウザが自動で表示することができます。index.html<video src="movie.mp4" controls></video>3. autoplay属性
ウェブページを読み込んだ時点で、動画が自動再生されます。
index.html<video src="movie.mp4" autoplay></video>4. preload属性
ウェブページを読み込んだ時点で動画を裏側で読み込みます。
動画をあらかじめ読み込んでおくことで、ユーザーが再生ボタンを押したときに
動画の再生がスムースになる…かもしれません。index.html<video src="movie.mp4" preload="none"></video>ユーザーが動画をあまり必要としていないことが想定される場合や、
サーバに余分な負担を掛けたくない場合には
preload="none" を指定すると良いそうです。最終的に私が書いたコード
index.html<div class="movies"> <video controls autoplay poster="images/samnail.jpg" width="320" height="240"> <source src="images/movie.mp4"> </video> </div>実際のブラウザでは
まとめ
- HTMLに動画を埋め込む場合には、videoタグで実装可能です。
- sourceタグを使用することで、より多くの環境で動画を視聴してもらえる可能性が高くなります。
- videoダグの属性は、『poster属性』『controls属性』『autoplay属性』『preload属性』の4つです。
- 投稿日：2020-11-17T09:54:14+09:00
【HTML】リスト作成時に使用するul要素とli要素（ol要素）
※超初心者向けの内容です。
なぜli要素にはul要素が必要なのか
結論から言うと、必要です。HTMLでリストを作成した際に、そのレイアウトを変更する為です。
私がHTMLの学習を始めて間もない頃の話です。
『リスト表示をするためには、ul要素とli要素を用います。』とだけ教えられました。
さらにそれぞれの説明として、以下の通りでした。
ul要素・・・順序のないリストを示すブロックレベル要素です。li要素と組み合わせて使用します。
li要素・・・リストの項目を示すブロックレベル要素です。ul要素の子要素として記述します。リストはul要素とli要素を組み合わせて使う
index.html<ul class="lists"> <li class="list">いちご</li> <li class="list">みかん</li> <li class="list">りんご</li> </ul>
私は、この説明では、日本語としては言葉はわかるけど、頭の中に内容が入ってきませんでした。
好奇心旺盛で、思いついたことはすぐに実行してしまう方ならわかるかもしれませんが
実は単にナカグロのリスト作成をするだけならば、
ul要素を書かなくても以下のように実装されるのです。
- いちご
- みかん
- りんご
（厳密には、多少見え方が異なります。）
よって、ul要素を記述することに合理性必要性を感じませんでした。
「単に“こういうものだから”っていう理由で、よくみんな勉強できるよな」
と、本気で思っていました。リスト作成には、ul要素, li要素, そして ”ol要素”
HTMLでリストを作成するときは、ul要素、ol要素、li要素を使います。
（ol要素が無い時点で、説明不足だと個人的には思います）
- ul要素
- ulは「Unordered List」の略です。「順序のないリスト」を意味して、ナカグロのリストを作成します。Disc型と呼ばれます。
- ol要素
- olは「Ordered List」の略です。「順序のあるリスト」を意味して、数字のリストを作成します。Decimal型と呼ばれます。
- li要素
- liは「List Item」の略です。「リストの項目」を意味して、ulタグまたはolタグを親要素として、それらで挟むことによって、項目を箇条書きできます。
index.html<ul class="lists"> <li class="list">いちご</li> <li class="list">みかん</li> <li class="list">りんご</li> </ul>次のようになります。
- いちご
- みかん
- りんご
index.html<ol class="lists"> <li class="list">いちご</li> <li class="list">みかん</li> <li class="list">りんご</li> </ol>次のようになります。
- いちご
- みかん
- りんご
まとめ
HTMLでリストを作成する際に、そのレイアウトを変更する為、ul要素は必要です。
HTMLでリストを作成するには、ul要素、ol要素、li要素を使います。
ul要素・・・li要素の親要素となり、ナカグロのリスト（Disc型）を作成します。
ol要素・・・li要素の親要素となり、数字のリスト（Decimal型）を作成します。
li要素・・・ul要素、ol要素の子要素となり、項目を箇条書きできます。
- 投稿日：2020-11-17T07:25:16+09:00
HTMLでよく使う要素と属性について
よく使う要素
HTMLでよく使う要素は以下のものです。
- h1~h6要素(見出し要素)
- p要素
- b要素
- br要素
- a要素
- meta要素
- link要素
- div要素
これらの要素はよく使うのではないでしょうか。
しかし、これらの要素の役割をそれぞれ把握していないとheadにwebページに表示される情報を書いたりと見にくいコードや意味の通らないプログラムになってしまいます。そういったことを避けるためにもよく使う要素については抑えておいて損はないはずです！
具体的にどういった要素なのか見ていきましょう。
h1~h6(見出し要素)・p要素
これらはページの見出しとなる要素です。
丁度こういったブログのようなもので各セクション似タイトルがあるかと思いますが、そのタイトルに当たる部分がこの要素です。<h1>見出し</h1> <h2>見出し</h2> <h3>見出し</h3>このようにタグで囲んだ部分が見出しになります。
hの数字が大きくなるにつれて見出しに表示される文字は小さくなります。p要素は段落を作ります。
<p>これは段落です</p>というように記述します。
実際の表示ではこんな感じになります。
これは段落です要するに何かの文字列を配置したいときはほとんでp要素を使うということです。
b・br・a要素
これらの要素は主に文字の装飾を行う要素です。
それぞれ見ていくと、b要素は囲んだ文字を太文字にします。
次にbr要素は、囲んだ箇所から「改行する」ことを意味する要素です。
最後にa要素ですが、これは囲んだ文字をリンクにすることができます。このように主に文字の装飾を行う要素をインラインレベル要素といいますが、また解説していきます。
div要素
この要素は特に意味を持たない要素ですが、そのため使い勝手がいいのが特徴です。
例えば特定の場所だけCSSを適用させたいとき、この要素にclass属性を付与しておけばCSSのセレクタに、そのclassを指定するだけでこの問題を解決することができます。
<div class="header-title"> <h1>タイトル</h1> </div> <p>これはタイトルです</p>このようなとき、「h1だけにCSSを適用させたい！」と思ったときにdivで与えたクラスをセレクタに指定するだけでh1のみにCSSを適用させることができます。
非常に便利な要素なので覚えておきましょう。
meta要素・link要素
これらはHTMLやページの情報を記載するための要素です。
したがって、これらの要素はhead内に記述します。それぞれの役割を見ていきましょう。
meta要素はページに使われる文字の種類(文字コード)を指定することができます。
link要素は実際に使用しているHTMLファイルと外部の情報を関連付ける要素です。これらの要素を使うときには、属性と属性値が必要になります。
実際のコードを見ていくと、<head> <meta charset="UTF-8"> <link rel="stylesheet" href="style.css"> </head>このような記述になります。
ここではmetaの属性が文字コードを指定するcharsetに、linkの属性が参照するファイルが現在のファイルとどんな関係があるのかを指定するrel属性
実際にどこのファイルにリンクとして飛んでいくのかを指定するhref属性ということになります。
それでは属性とは一体何なのでしょうか。属性と属性値
属性とは要素に情報を付け加えるもので例えば、先程のlink要素の場合、link要素で外部ファイルと関連付けするだけでなく、rel属性を使って、どんな関係があるのかを情報として追加しています。
このように属性は要素に必要な情報を追加しているのです。
そして、属性値はどのような属性なのかを示す値のことを指しています。
つまり、rel属性の場合、「CSSのファイルと関係がある属性ですよ〜」といったことを、属性値が示しているのです。まとめ
以上がHTMLでよく使う要素と属性についての解説です。
参考になればSNSで共有・紹介していただけたら嬉しいです！
それではまた！
- 投稿日：2020-11-17T03:20:03+09:00
XFREEアカウント作成〜ファイルアップロードまで
XFREEでHTMLをアップロードのしたのでその方法を共有します。
サーバーに配置することで、作成しているアプリを公開できます。私も今回このサーバーを使わせていただきましたが今のとのところHTML/CSS/JS（JQuery）が動いていることを確認しております。(2020/11/17現在)”簡単”とはいえサーバーの設置やファイル転送なれていない方には結構キツそうなので、参考になれればと思います。
流れの説明
１、XFREEのアカウント作成
→ここはそんな難しいことはないので普通に登録しましょう。
※パスワードとIDの設定が少しややこしいいです。メモを忘れずに！２、サーバの起動〜動作確認
→登録したアカウントでログインし、サーバーを起動。初期ページが用意されているので動作確認をしつつ、管理パネルの使い方になれましょう。３、ファイル転送
→ファイル転送ソフトを用いて、自身のアプリをサーバーにアップロードします。
※macはFileZila、windowsはFFFTPを使用します。所持してない場合は用意しておきましょう。４、アプリの起動確認
→アプリがサーバー上で起動できればアップロード成功です。
まだ正直機能を全て把握していないのでわかりませんが今後独自ドメインなどの設定もしていければと思います。１、XFREEのアカウント作成
ではさっそくアカウント登録からやっていきます。
こちらから登録します。そんな難しいことはないので下の画面とコメントを参考に進めてください。
ここまででアカウント作成は終了です。
・XFREEのログインパスワードは忘れずに保管しましょう。２、サーバの起動〜動作確認
作成したアカウントでログインしサーバーを起動します。下の画面とコメントを参考に進めてください。
※「サーバーID」は一度決めたら二度と変更できないので納得のいくサーバIDを設定しましょう。サイトのURLになります。
ここまでできたらサーバーの起動は完了です。また上記画面では、
・index.html
・default_page.png
・htaccess
の３つが初期状態として用意されています。右上の「xxx.html.xdomain.jp」がサーバーのアドレスになります。これをコピーしブラウザ上にペースト、表示すると「index.html」がエントリーポイントとして呼び出されます。「xxx.html.xdomain.jp」をコピペし初期画面を起動させましょう。
上記のような画面が出れば起動完了です。
豆知識：エントリーポイントとは？
エントリーポイントとは「アプリのアドレスにアクセスした際に一番最初に呼び出されるファイルのこと」です。どの言語においてもフレームワークを使用したアプリケーションでは、基本的には「index.htmlがエントリーポイント」とお約束ごとがあります。（１００％必ずではありませんが・・・）
今後Wordpressやその他FWを使用する際必要な知識になりますので覚えておきましょう。３、ファイル転送
初期画面が起動できたことを確認できたら、ローカルある自分のアプリをアップロードします。ここでポイントなのが「ファイル転送ソフト」を使うことです。
じつはXdomainの方でもアップロードできる機能があるのですが、使いづらくとても使えたものではないのでファイル転送ソフトを使用します。ここでは準備に関する記事は載せませんがググれば情報はたくさんあるので頑張って準備しましょう。
・windowsはFFFTP
・macはFileZila
を使用します。今回は当方のPCがmacなのでmacの場合の手順を載せます。ただログインするまでが結構大変なのでそんなに難しいことはないです。windowsでも似たような操作をしますのでなんとなくイメージを掴めるかと思います。
ではまずソフトが準備出来次第、ログインに必要な情報を集めます。
FTPアカウント設定画面に情報が記されています。初回はパスワード変更しろとあるので「編集」から変更します。（画面を閉じてしまった場合はログイン→管理パネルログイン→FTPアカウント設定の順で画面を開きましょう!）
ここまでできたらFileZilaを起動します。
左上のオプションバーより「ファイル」→「サイトマネージャー」の順でログイン画面を開きます。以下にそれぞれどの項目に対応しているか関係を記します。
FileZilaの画面
ここまでできたらFTP接続は完了です。
あとはローカルからリモートサイトへフォルダを丸ごとアップロードします。
４、アプリの起動確認
アップロードが完了したら、アプリの起動確認をします。先ほど同様「xxx.html.xdomain.jp」をコピペします。ここで注意なのがフォルダごとアップロードしたので、少しアドレスが変わります。
例）
html-css
∟css
∟img
∟index.html上記フォルダ構成の「html-css」というフォルダを丸ごとD&Dした場合。
ブラウザで確認するアドレスはxxx.html.xdomain.jp/html-cssとなります。
なぜアクセスが成立するか？
「html-css」には「index.html」が存在します。「xxx.html.xdomain.jp/html-css」というアドレスに接続した場合は、この配下にある「index.html」がエントリーポイントとなります。
なので「xxx.html.xdomain.jp/html-css」にアクセスすると「index.html」が呼び出されアプリが起動したということになります。ちなみに「xxx.html.xdomain.jp/html-css/indx.html」と入力しても同じ結果になります。まとめ
今回は無料でアプリをサーバー上にアップロードする方法をお伝えしました。今後はできるかわかりませんが、XFREEで独自ドメインの取得とかできたらいいなって思います。
- 投稿日：2020-11-17T00:14:46+09:00
CSSでの立方体の作り方（サイコロも作れるよ）
どうも7noteです。立方体の作り方
サイコロを作ったり、写真をはめ込んだ立方体を作ったりすることができます。
作ったことがなかったので、作り方を調べたので記録代わりに投稿。使い方をマスターすればいろいろなものが作れそう。
①線のみVer.
index.html<div class="box"> <div class="item"></div> <div class="item"></div> <div class="item"></div> </div>style.css.box { display:block; position:relative; margin:30px auto 0; width:100px; height:100px; transform-style:preserve-3d; transform:rotateX(-25deg) rotateY(-45deg); /* ここで四角の角度を調整できる */ } .box .item { position:absolute; left:0; right:0; box-sizing:border-box; border:1px solid #333; width:100%; height:100%; } /* 上 */ .box .item:nth-child(1) { transform:translate3d(0, -50px, 0) rotateX(-90deg); } /* 左 */ .box .item:nth-child(2) { transform:translate3d(0, 0, 50px); } /* 右 */ .box .item:nth-child(3) { transform:translate3d(50px, 0, 0) rotateY(90deg); }②色付きVer.
style.css/* ①に↓を追記 */ .box { background: #ccc; }※各面で違う色や背景画像を指定することも可。
その場合は各nth-child()の指定があるところにbackgroundを指定。③文字入りVer.
index.html<div class="box"> <div class="item">1</div> <div class="item">2</div> <div class="item">3</div> </div>style.css/* ①に↓を追記 */ .box { display:flex; flex-direction:row; align-items:center; justify-content:center; }④サイコロVer.
style.css/* 画像を用意して①に↓を追記 */ /* 上 */ .box .item:nth-child(1) { background: url(sai1.png) no-repeat center center / 100% 100%; } /* 左 */ .box .item:nth-child(2) { background: url(sai2.png) no-repeat center center / 100% 100%; } /* 右 */ .box .item:nth-child(3) { background: url(sai3.png) no-repeat center center / 100% 100%; }※画像は一番下にあります。
⑤サイコロ アニメーションVer.
index.html<div class="dice"> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> </div>style.css.dice { display:block; position:relative; margin:30px auto 0; width:100px; height:100px; transform-style:preserve-3d; transform:rotateX(360deg) rotateY(360deg) rotateZ(720deg); animation:rotate-animation 2s linear infinite; } .dice .item { position:absolute; left:0; right:0; border: 1px solid #333; box-sizing:border-box; width:100%; height:100%; } /* 1 */ .dice .item:nth-child(1) { transform:translate3d(0, -50px, 0) rotateX(-90deg); background: url(sai1.png) no-repeat center center / 100% 100%; } /* 2 */ .dice .item:nth-child(2) { transform:translate3d(0, 0, 50px); background: url(sai2.png) no-repeat center center / 100% 100%; } /* 3 */ .dice .item:nth-child(3) { transform:translate3d(50px, 0, 0) rotateY(90deg); background: url(sai3.png) no-repeat center center / 100% 100%; } /* 4 */ .dice .item:nth-child(4) { transform:translate3d(-50px, 0, 0) rotateY(-90deg); background: url(sai4.png) no-repeat center center / 100% 100%; } /* 5 */ .dice .item:nth-child(5) { transform:translate3d(0, 0, -50px) rotateY(180deg); background: url(sai5.png) no-repeat center center / 100% 100%; } /* 6 */ .dice .item:nth-child(6) { transform:translate3d(0, 50px, 0) rotateX(-90deg); background: url(sai6.png) no-repeat center center / 100% 100%; } @keyframes rotate-animation { from { transform:rotate3d(0); } to { transform:rotate3d(1, 1, 1, -360deg); } }感想
.2sくらいで超高速でアニメーションさせたら、桃鉄のサイコロ振る時みたいにできるよ。
あ〜〜桃鉄やりたい。
参考・素材
https://shanabrian.com/web/css3/transform-cube-dice.php
https://chicodeza.com/freeitems/saikoro-illust.html
おそまつ！
~ Qiitaで毎日投稿中!! ~
【初心者向け】HTML・CSSのちょいテク詰め合わせ
