箇条書きで現状の自分の状態や思いを書いてみた(プログラミング学習をし始めて現在8か月目)

プログラミングは病気やPC環境がないなどの理由がある日を除いて毎日勉強している

記事の更新が最近できていない

著作権関連で書いていいのか微妙な内容が多い

書いていいのか分からず筆が進まない

アウトプットとしてはローカルのメモ帳などを活用して書きだめている

最近更新を繰り返すような記事をたまに書いている

更新を続けることで新しい情報を書き加えたり、情報をよりよく、より正しくできる

勉強(インプットやアウトプット)した事は復習が大事

結局、あとになって見返したり、聞かれたときに全然覚えていなければ意味がない

でもggったりして調べれば使えるという状況は、全く知らない状況よりはいい

 

まだまだ勉強したい事がたくさんあるしどんどん増えていく

今やっていることは料理に例えると、下処理を学んでいる段階

例えばカレーを作るために玉ねぎ、にんじん、大根、ごぼう、モロヘイヤなどの素材の下処理方法を学んでいる

一般的にはカレーには入れないであろうモロヘイヤなども混ざるが、いつか違う場面で使う可能性は高い

目的を決めて最短距離で目的を達成するために情報収集や学習を進めることは確かに大事なことだと思う

でも個人的には色々な知識を知っていることでできること、分かること、教えられることを増やしていきたいなと思っている

ただ、下処理はこんなにできますよ!って言っても、つまるところ何かを作ることが最終目的ではあるので下処理を学んだ上で作り上げるという段階にも進んでいきたい

作り上げるだけじゃなくて、例えば食べた人の感想を基により良いものにしたり、好きな味付けで食べれるように醤油やふりかけを作れるようにもなりたい

 

最終的に自分はどんな風になりたいのか、どう成長していきたいのか、まだしっかりと定めることができていない現状

WordPressを自作する、アプリを作る、サーバーを作る、プログラムで動く機械を作る、自宅の家電を魔改造する、組み込み関数やOSSなどに手を加えてみる、セキュリティの知識を深める、など色々と進める道はある

どれも深い知識が必要になる

ただまだ、これがやりたいんだ!っていう明確なものはない。

もしかしたら、ひとりでじゃなくて張り合えるような誰かが必要なのかもしれない

これからおそらくチーム開発にも携われると思うのでそういった機会を活かして考えていきたい

誰かが必要だけどいないからしないとか、目的がないならじゃあ立ち止まってみるかということも考えていない

学べることはどんどん学んでいく

エンジニアの方とリアルでの交流が増えていくのでそこも大事にしていきたい

 

これまで習慣を増やしていくことが大事なことだと思ってきた

思ってきたし習慣にしてきたことは実際に自信にも繋がっている

料理、収納、掃除、運動、英語、マッサージ、プログラミング、タイピング、ネットでの検索、習慣の作り方、ライティング、スケジュール管理、携帯・ネット・クレジットカードなどのお得な情報や知識、FX、小説、映画、ドラマ、漫画、アニメ、ゲーム、なぞなぞ

などなど

これからも習慣を増やし、継続し、自信や生活の質向上につなげていく

phpmyadmin(MySQL)にログインできない問題の解決法の1つを記録として残す(#2002 MySQL ログインできません)

 

1.状況説明

初めてLAMP環境を構築した初学者

paizaラーニングでAWS講座にて学習

AWSのEC2を利用しLAMP環境を構築

AWSの無料で利用可能な枠は750時間の制限があり、それを超えると費用発生

費用を抑えるためにインスタンス(仮想マシン)停止

インスタンスを再開してphpmyadminにログインを試みる

「♯2002 MySQL サーバにログインできません」と表示される

 

2.解決策

GitBashでパスキーとパブリックIPを使ってssh接続

sudo suでスーパーユーザー権限

service mysqld start

と入力して解決した

 

3.感想

MySQLが動作していなかっただけ?

まだこの内容を熟知できていない状態の私。

先輩プログラマさん達から見たらアホみたいに見えるんだろうか。

プログラム等のエラーというよりサーバーの起動すらしていないわけで。

 

でも私からすればサーバを停止したら内包しているMySQLも停止することが分かった良い失敗だった。全ての環境でそうなるとは言えないかもしれないが。

 

ん?

 

もしかして仮想マシンを停止する前にMySQLを停止(stop)させておかないと、場合によっては(複数コマンド実行中にサーバ停止とかで)データ吹っ飛んだりするのかな?ありえるな。むしろ練習である今の内に、どんな動作をしている時にサーバが停止したらデータが吹っ飛ぶかの実験も経験しておくべきなのかもしれない。

7月26日 -3度の失敗を経てAWS上にLAMP環境を生成した。その失敗から成功までの流れを記す-

 

大きな失敗①

 

まず1つ目の失敗は、大事な秘密鍵を削除してしまったこと。

Linuxコマンドのmvで存在しないディレクトリにpem(秘密鍵の拡張子)ファイルを移動したところ、pemファイルが削除されてしまった様子。rmではなくmvを入力して操作していることは何度も確認したので、もしかしたらどこかにあるのかもしれないが今回は探さずに新しいインスタンスとその秘密鍵を作成することにした。

 

大きな失敗②

作業の概要

 

AWSのEC2を利用してインスタンスを作成することでLinux仮想マシンを作成。

Linux仮想マシンにパブリックIPアドレスを設定。

Linux仮想マシンOSSApacheをインストールして起動し、仮想マシンが起動する度にApacheが起動するように設定。

Windows環境のためGitBashをインストールし、Linuxコマンドが使えるようにした。

 

難しかった所とその解決策、そして流れの詳細

 

GitBashでexitコマンドを入力した後も設定したパブリックIPアドレスに接続すると同様のHTMLが表示される。これはexitコマンドを入力してもapacheは継続して稼働しているということだろうか。それともPCのキャッシュに情報があるから表示されるのか。インターネットに関してはサーバーがOFFになると404か500番台のエラーが出ると思うからそれはないかな。とにかくまだまだ勉強が必要。

 

AWSの学習が一通り終わったらLinuxWindows上にインストールしてLinuxについて学んでいきたい。Linuxを学ぶとサーバーサイドの理解が深まるらしい。

 

ちなみにLinuxコマンド関連の話しで、pwd,lsなどを今までWindowsのコマンドフロンプトで何度もやってみて出来なかったのはLinuxコマンドだったから対応していなかった様子。実際、コマンドフロンプトでhelpと入力すると別のコマンドが出てきていた。Windowsのコマンドフロンプトにはそれ独自のコマンドが用意されているようだ。

 

AWSについてはpaizaラーニングをメインの教材にして学習中。

前回GraspyにてAWSインスタンスを1つ作成しているので、今回はリージョン(サーバーの拠点?)を変更してそちらでインスタンスを新規作成している。

 

GitBashでexitコマンドを入力してもapacheは継続して稼働しているの?

→exitコマンドはあくまでもGitBash上にてSSHでのサーバー接続を切断しているだけで、Linux仮想マシン自体を停止させる操作ではないのでページには引き続き接続できている。

 

 sudo dateでUTCになっている場合、ロンドン時間になっているので、日本時間のJSTに変更するコマンドを入力しておく。

sudoコマンドで毎回権限付与するのも良いが、面倒であればそれを省略するコマンドを入力する。$マークが#マークに変わっていれば常時権限が付いている状態。

 

viはターミナル上で動作するテキストエディタ

PHPをインストール後、PHPのiniファイルの設定をいじる。その際にpaizaでは520行目をあるが、461行目で発見したので一応記録しておく。

「error_reporting = E_ALL & ~E_DEPRECATED & ~E_NOTICE」の件

そのあとは537行目ではなく478行目で発見。あれ、もしかして私のインストールしたPHPのversionが古いのかな?

あとindex.phpファイルを作成した後にパブリックIPアドレスに直接接続してもindex.phpに接続されるとあったが、私のPCではindex.htmlに接続された。

所々変更点(?)もあるようなのであとでしっかり戻ってきて復習したい。

 

MySQLが上手くインストールできなかった。

【AWS】Amazon Linux2環境にMySQLをインストールしようとしてはまった - Qiita

こちらを参考にしてmariadbをアンインストールしてmysqlをダウンロードしてみた。

その後のpaizaでの設定でmysqld_safeの前に設定を追加とあるがmysqld_safeが見つからない。正規の流れからずれている気がする。

 →mysql_safeと書かれていないだけだった。mysql_safeの中身の記述自体はちゃんとあったのでその上にutf8の文字コード設定を記述した。

→lsコマンドで /etc/httpd/conf.dと入力してそのディレクトリ内を見てみたが、phpMyAdmin.confが見当たらない。一度寝て仕切り直そう。

 

こちらを参考にphpMyAdminをインストールしてみた。

EC2にphpMyAdminをインストールする手順 - 今やるログ

 

3度目の正直

なんでmysqlやらphpadminやらがすんなり進まないんだろうとggりながら試行錯誤してきた。どうやら最初の段階でAmazon Linux 2 AMIを選択したことが原因らしい。よくみるとこちらにはMySQLやらが記載されていない。選ぶべきはAmazon Linux AMIだったようだ。paizaの講座を見返して見ていたらしっかり書いてあった。今回はpaizaの講座に沿って進めていきたいので3度目の正直、ということで再度インスタンスを作成することにした。

 

3度目にしてようやくAWS上にLAMP(Linux+Apache+MySQL+PHP)環境を整えることができた。嬉しい。明日からこの環境に掲示板を作成していく次のステップに進む。がんばるぞ。

 

その他

不明な単語の意味の確認

EPEL、Fedoraディストリビューションについて

EPELとはFedoraのパッケージを他の環境で使えるようにするための拡張パッケージ。

EPELとは - bnote

FedoraとはRedHatが支援している、安定よりも最新の技術を積極的に取り込むディストリビューション

Fedora をおすすめする 3 つの理由

ディストリビューションとはLinuxの配布形態のこと。Linuxカーネルのみを指すためそのままでは動作しない。OSの動作に必要なライブラリやソフトウェアなどをまとめたパッケージとして配布されている。

ディストリビューションとは - コトバンク

 

文中に記述できなかった参考URL等 

 

更新情報

7月25日 学び+書き始め

7月26日 学び+更新

7月27日 学び+更新+修正

7月28日 ひとまず完成とする

8月7日   復習+更新

所感

1.作業の概要

2.作業の流れ

3.作業の詳細

4.難しかった所と改善策

5.新しく知った単語

6.文中に記述できなかった参考記事

7.更新情報

という風に項目別に記述できたら見やすいように感じた。

あと、メリット・デメリットを書いてもいいかもしれない。

 

paizaの動画内でdateコマンドを入力した際に2016年という情報がでていた。今はそれから3年が経過してAmazon Linux 2が出ている。そちらも必要に応じて覚えていくことになるかもしれない。でもまずは基礎を抑える意味で講座のあるAmazon Linuxの使い方をしっかりマスターしておきたいと思う。

 

上記の流れでまとめようかと一度考えたが、大きな2つの失敗とそれを乗り越えて成功を1つ経験したので失敗①→失敗②→成功という流れで書き直してみた。失敗②の大項目の中身が少し見づらいような気がしないでもない。borderで囲って、これは全て失敗談の一部だよーってまとめるのもいいのかも。(気が向いたら)

 

2章のLAMP環境の構築が終わり、最後の3章は主にデータベース(SQL文)の扱いについて学んだ。SQL文の入れ子とかには触れず、さらっと基礎を学んだ感じだったので、DB/SQLの講座でしっかり復習する予定。1週間ほど体調不良で寝込んでいたので体調管理にも気を付けつつ学習を進めていきたい。

 

今回はAWSでのPHPphpmyadminのインストール方法を学んだ。AWSだと元々PHPやadminがインストールしやすい状態になっていた。おそらく通常であればWeb上からPHPやadminなどをインストールする必要があるんだろう。それも今度学んで使えるようになりたい。

 

今後のIT分野での成長のために

学習するごとにIT分野は新しい知識を学んで知識の幅が横に広がっていく。ひとつひとつしっかり把握して使えるようにしていきたい。焦らず。一歩ずつ。浅く広くではなく、深い所を学びながら、余裕や必要に応じて横にも広げていく。時には浅く広く学んで必要な知識に出会ったら深くする場面もあるかもしれない。

学びたいと思った事を、思うだけに留めない。

学んだことを学んで終わりにしない。

それを活かして自分で何かを創り出すクセをつける。(必ずしも目新しい必要はない)

定期的に自分を客観的に評価して成長を見える化する。

6月25日 -近況-

1.ここ数日の取り組み

ここ数日、記事の更新を怠った。別ブログは更新したりしている。プログラミング関連でここ最近取り組んでいる内容としては以下。

ここではまずAWSの登録をし、その中のcloud9というIDEを利用してJavaScriptについて学んでいる。基礎を学びながらWebでのJavaScriptの動かし方を関連付けて学んでいる。DOM操作だったりWebページへのアラートの出し方だったり、最初の方だけでも知らなかった使い方が出てきて学ぶことが多い。後半にjsonajaxという、私が知りたかった内容についても触れられるみたいなので楽しみで仕方がない。

  • HTMLプロフェッショナル認定試験

こちらは頼んでいた書籍2冊、テキストと問題集が届いた。早速テキストを読み進めている。この資格に関しては7月中に取りたいと思っている。何事も期日を決めて目標を立て、それに向かって進んでいきたい。テキストを1~10まで読み続けるのも楽しいと思うが、問題→テキスト→問題という流れで、自分が分かっていない部分を理解したうえで学習を進めていきたい。

こちらは試験が10月なので10月の試験申し込みが7月11日に開始される。こちらも10月には取得しておきたいのでそれに向けてスケジュールを組みたい。こちらもテキストと問題集を購入している。同じように取り組んでいきたい。

 

2.最優先で取り組みたいこと

まずは上記で挙げた3つに本腰を入れて取り組みたいと思う。

その上でブログの記事執筆も出来る限り続けていきたい。文字を入力しながら学び、知識が定着する総量を増やす。書いた記事を見直して自分の中の情報を磨き上げていく。twitterやNOTEなど、知識を収集する手段を複数確保する。そういった自分なりの勉強・実践手法をどんどん取捨選択し、選定し獲得つつ、成長し続けていきたい。

6月21日 -引き続きHTMLプロフェッショナル認定試験について学ぶ-

1.今日の目標

 HTML5プロフェッショナル認定試験の勉強を進める

 

2.結果・感想

 急用にてサンプル問題できなかったため明日取り組む予定。twitterにてこういう話があった。「解いた問題をA分かる、Bなんとなく分かる、C分からないに分類する。そうすると自分の理解してない部分が分かるから全てをAに分類できるまで繰り返す。」なるほどなと納得した。その方式、使わせてもらって頑張ろう。資格は出来るものなら来月中には取得したいと考えている。問題集の難易度を確認して試験日を決めようと思う。

 

3.学んだことの書き出し

canvas要素の特徴について

 canvas要素はJavaScriptを使ってブラウザに描画できる。canvas要素内はブラウザがcanvas要素に対応していない場合に表示される。未対応ブラウザにcanvas未対応などの注釈をつけるとユーザーに対して親切。canvas要素での描画はピクセルベースとなり、デフォルトの大きさは横300px、縦150px。

canvas要素で線を描くにはbeginPath();でpath(軌跡)を始めると宣言する。そして描画開始座標をmoveTo(x軸,y軸)で指定し、x軸は右に向かって、y軸は下に向かって数値が増えていく。lineTo(x軸,y軸)でどこまでpathを引くかを指定する。最後にstroke();で軌跡を描画にして線が描ける。

他に2dで描画できるものは以下に参考記事あり。

HTML Canvas 2D Context

簡単な描画でも何行かのコードが必要で、複雑化すればするほどコード量が増える。それを解決するのが処理や機能を部品化してまとめたもので、ライブラリと呼ばれる。

canvasのライブラリ一覧は以下。

EASELJS

CreateJS | A suite of JavaScript libraries and tools designed for working with HTML5

three.js

three.js – Javascript 3D library

jThree

http://jthree.jp/

 

SVG(scalable Vector Graphics)について

SVGとはcanvas要素のピクセルベースではなく、どれだけ拡大・縮小しても画像が荒れないベクターベースのぎょうが方法。SVGHTML5で勧告された要素ではなくSVGで勧告された要素。SVGCSSをサポートしており、HTML5の要素と同じようにsvg要素も大きさを指定できる。chromeではデフォルト値はcanvasと同値。 

SVGの基本的な要素であるline要素で線を描くには

<line x1="線の始まりのx座標" y1="y座標" x2="線の終わりのx座標” y2="y座標" stroke="線の色” />と書く。line要素は空要素で終了タグがないが、要素の最後に/を入れる。HTML5の空要素には/は不要だが、SVGXMLという文章構造のためHTML5とは違う文書ルールになる。SVGはフォントにも活用できるが、ブラウザごとのサポートが統一されていないので使用時には注意が必要。

 

Sketch3を使ったSVGデータのエクスポートについて

ベクターデータを扱うソフトウェアとしてSketch3を使ったSVGデータをエクスポートするには、グラフィックを描いてエクスポートする時にSVGを選択することで可能。他にもadobe社のillustratorなどがある。

https://html5exam.jp/measures/dojo_1_06.html

 

FileAPIとjQueryで作れるフォトギャラリーについて

FILEAPIはローカルデータをブラウザであつかえるようにする技術のこと。テキストや画像のようなバイナリデータを扱える。ローカルデータとはユーザーのコンピュータにあるデータのことを指す。

 

jQueryについて

jQueryとはJavaScriptのライブラリのこと。

jQuery

からjQueryライブラリをダウンロードできる。ライブラリのバージョンは1系と2系があり、サポートしているブラウザの種類でバージョンが分かれている。バージョンによって提供されているAPIに違いがある場合もあるので注意が必要。

1系はInternet Explorer8をサポート

2系はInternet Explorer8は非サポート

Internet Explorer8は提供元のMicrosoftがサポートを終了してユーザーは減る見込み。Google AnalyticsなどでWebサイトのユーザーのブラウザを調べた上で判断をおすすめ。

jsファイルを参照する場所がhead要素内の場合、jsファイルの先頭におまじないとよく言われるコードを書く。

$(function(){処理});

これでhtmlファイルが読み込まれてから処理をすることになる。JavaScriptの役割は振る舞いのため、振る舞う対象であるhtmlを先に読み込まないと振る舞う対象に対して処理ができないのでこのプロセスが必要となる。bodyタグ終了の直前でjsファイルを読み込む場合はおまじないは不要。dragoverやdropなどは状態や挙動を意味するイベントと呼ぶ。

Objectとは{プロパティ:値,プロパティ:値,...}というデータを格納する型のこと。この値には数字や文字列、Objectなど様々なデータの型が入る。Console.log()とはChromeデベロッパーツールのConsoleに情報を表示させるための命令。通常は画像ファイルをブラウザにdropすると画像のみブラウザに表示されてしまう。このブラウザの機能を働かせないようにするためにe.preventDefault();を記述する。これはdragoverとdropどちらにも必要な処理になる。

https://html5exam.jp/measures/dojo_1_07.html

 

ドラッグした画像の読み込みについて

FileReader APIを使ってユーザーのコンピュータ内にあるファイルを読み込めるようにする。new演算子でObjectを作りreaderというインスタンス(実体)を生成する。インスタンスを作成することによって処理・実行できる状態になる。そのためにnew演算子が使われる。ドロップした画像ファイルのデータはイベントのe.originalEvent.dataTransfer.filesに配列として格納される。そのデータをreadAsDataURL()で読み込む。その読み込み処理が終わるとreaderのresultプロパティにはbase64エンコーディングされた文字列が格納されるのでそのデータを画像の表示に活用する。

append():セレクトした要素の内側の最後に引数内のコードを追加する

attr():セレクトした要素に属性と属性値を設定したり、属性値を取得することができる。サムネイル画像をクリックして大きな画像を表示させるにはクリックイベントをトリガーとして画像を表示させる。その場合on()を利用するがon()の書き方は複数あり、場合によって使い分けができるといい。

add():セレクタを追加する

https://html5exam.jp/measures/dojo_1_08.html

 

マルチデバイス対応について

モバイルフレンドリーとはモバイルにはモバイルに適したサイトを表示し利便性を上げるための基準。モバイルフレンドリー対応していると検索結果に「スマホ対応」と記載される。モバイルフレンドリーテストでスマホ対応しているかどうか調べると、スマホ対応できていない場合にどこが悪いかを教えてくれる。

モバイルファーストとは最初からモバイルユーザーのことを考えてWebサイトを作ろうという考え方。単に表示をスマホ用に体裁を整えるだけでなく、情報設計やコンテンツなど様々なことをモバイルで使用する前提で考える。

 

マルチデバイスへの対応方法

マルチデバイス対応するために2つの方法がある。1つはダイナミックサービング、もう1つはレスポンシブWebデザイン。ダイナミックサービングはWebサイト利用者のユーザーエージェントを基準に判断して1つのURLでデスクトップ・ラップトップ用のサイトやタブレット用のサイト、スマートフォン用のサイトの表示を切り替える方法。それぞれの端末の利用者に最適な表示やコンテンツを考えることができる。デメリットとしてそれぞれの表示ごとでWebサイトを管理しないといけなくなるのでサイトの修正の手間が増えるなどがある。レスポンシブデザインは端末ごとで表示を考えるのではなく、どのようなブラウザの幅でもワンソースでWebサイトを最適に表示させるという方法。ワンソースなので基本的に修正などが発生した場合、一度で済む。場合によってはWebデザインに制約が出ることがある。レスポンシブWebデザインはフルスクラッチのコーディング以外にも、フレームワークというすでに作られた枠組みを使うことで効率よく制作することができる。フルスクラッチとは既存のフレームワークなどに頼らず1からコードを書いていくこと。

  • Bootstrap

グリッドシステムだけでなく、ハンバーガーメニューなどのモバイルサイトでよく使用される機能は実装されていて、ひょうやボタンなどのCSSも予め用意されている。目的に応じてクラス名を追加するなど作業が簡単かつ効率的に進めることができる。

  • Responsive Grid System

グリッドシステムだけに機能を絞ったフレームワーク。導入の敷居が低く軽量なため、グリッドシステムだけあればいい場合に適している。

 

UIについて

 UIとはユーザーインターフェースの略でユーザーが操作をする対象(リンクボタンやコンテンツのレイアウトなど)のこと。マウスで操作するデスクトップやラップトップPCに対して、指で操作するタブレットスマホには指で操作するという前提でボタンのを大きくしたり配置を高くしてボタンを押しやすくするなどの工夫が必要。単純にデスクトップやラップトップ向けのWebサイトの体裁を整えるだけではモバイルユーザーを満足させることはできない。

 

モバイル端末の通信とパフォーマンス

有線やwifiで通信するデスクトップやラップトップに対してモバイル端末はキャリアが用意した電波を利用することが多い。表示速度が遅いとユーザーの離脱などが起こるので表示速度が遅くならないように工夫する必要がある。例は以下。パフォーマンスの改善点を調べられるWebサービスもある。

  • 画像をあまり使わず、画像を最適化する
  • CSSJavaScriptなどのファイルへの参照数を減らす
  • パフォーマンスへの影響が少ないコードを書く
  • サーバのチューニング

モバイルでの表示速度を高速化する技術としてAMP(Accelerated Mobile pages)がある。AMPとはモバイル端末のレンダリングを早くするためのプロジェクト。

AMP - a web component framework to easily create user-first web experiences - amp.dev(AMP公式サイト)

https://html5exam.jp/measures/dojo_1_10.html(参考サイト)

 

オフライン対応について

オフライン対応はユーザーがシームレスにWebを体験できるので利用頻度も高まり、Webサービス自体への信頼度の向上にもつながる。サービスを提供する側は設定したKPI(ビジネスなどの目標達成のための指標のこと。)への貢献にもなる。これを実現する技術としてService WorkerというAPIが注目されている。

Service WorkerとはWebページとは別にバックグラウンドで実行するJavaScriptで、ブラウザ側に実装されるAPI。Webサーバーのキャッシュを保持し、ブラウザがWebサーバーに接続することなくオフラインでもWebページを表示することができる。Proxy(代理)サーバーの役割をする。Webじょうで使うにはセキュリティ上の問題でHTTPS(WebサーバーとWebブラウザの間の暗号化された通信で、HTTPSを使うことでその通信間でのデータの盗み見や操作を防ぐことができる)サーバーが必要になる。(ローカルでも可)

Service Workers 1

W3Cが技術仕様を勧告するまでの4つのステップ

  • Working Draft:技術仕様を定める検討の草案として発行されたもの
  • Candidate Recommendation:技術的な要求を満たしていてWorking Draftよりも技術仕様として検討できる文書で、実装経験を収集するためにつくられたもの
  • Proposed Recommendation:現実的な技術として検討されたレポートでW3Cの諮問委員会に意見を求めるもの
  • W3C Recommendation:技術関係者に広く合意を得た仕様

オフライン対応以外で注目されているService Worker関連技術には、ネイティブアプリで可能なプッシュ通知がWebでも可能になる技術が注目されている。以下でGoogle Developersのプッシュ通知について学べるコンテンツがある。

Web Fundamentals  |  Google Developers

 

これで一通りのHTML5道場にある10回のコラムが終了した。一度サンプル問題を一通り解いてみる。サンプル問題の項目は以下。

  1. Webの基礎知識
  2. CSS
  3. 要素
  4. レスポンシブデザイン
  5. APIの基礎知識
  6. 要素の旧サンプル問題

 

4.明日の課題

 明日明後日はPCが使えないのでモバイルにて勉強。HTMLプロフェッショナル認定試験の問題集本屋さんで探して、いいのあれば購入して勉強予定。

 

5.参考URL

 

 

6.今後やりたいこと・高めたいスキル・優先順位

HTML5プロフェッショナル認定資格の取得、基本情報技術者資格の取得、簿記2級の取得、ウェブカツ、WEBアプリケーション作成、PHP、説明図作成、30DAYSトライアル、JQuory、Wordpressはてなブログの機能、アルゴリズムSEO、PerfectPixel、線形代数(詳細ではなく全体の流れ)

6月20日 -HTML5プロフェッショナル認定試験についての勉強を進める-

1.今日の目標

 HTML5プロフェッショナル認定試験についての勉強を進める。

 

2.結果・感想

 参考までに公式HPにて学べる項目は以下10項目となっている。

  1. Hello HTML5 World
  2. 要素とCSS
  3. 音声・動画の取り扱い、CSSによる要素の動的な制御
  4. HTML5JavaScript
  5. canvas要素
  6. SVG
  7. File APIJQueryでつくるフォトギャラリー(前編)
  8. File APIJQueryでつくるフォトギャラリー(後編)
  9. マルチデバイス対応
  10. オフライン対応

 そしてサンプル問題・例題解説。優良並みの内容を分かりやすくまとめてあり、勉強する方は参考にすべきだと思う。HTML5プロフェッショナル認定試験の問題集も販売されているようなので試験を受ける前に一度解きたいと思う。

 

3.学んだことの書き出し

 

 

4.明日の課題

 

 

5.参考URL

 

 

6.今後やりたいこと・高めたいスキル・優先順位

HTML5プロフェッショナル認定資格の取得、基本情報技術者資格の取得、簿記2級の取得、ウェブカツ、WEBアプリケーション作成、PHP、説明図作成、30DAYSトライアル、JQuory、Wordpressはてなブログの機能、アルゴリズムSEO、PerfectPixel、線形代数(詳細ではなく全体の流れ)

6月18日-HTML5プロフェッショナル認定試験について調べ、学習する-

 

1.今日の目標

 HTML5プロフェッショナル認定試験に向けて勉強を進める。

 

2.結果・感想

 ウェブカツの無料体験入部で学べる部分を学び終えてしまった。本入部に関しては我が家の財務大臣に相談中。

 

【コラム】HTML5プロフェッショナル認定資格を受け・・ - IT資格取得~受験料の節約~

2015年の記事だが、この記事を読んでHTML5プロフェッショナル認定資格という資格があることを知った。早速公式HPを見てみるとHTML5道場という学べるサイトを発見した。下記URLだがリンクの埋め込みができなかったのでそのまま貼付。

https://html5exam.jp/outline/(HTML5プロフェッショナル認定試験のサイトへのリンク)

 

このリンク先の下部にある、学習方法の項目にサンプル問題がある。Webの基礎知識の問題を試しに解いてみた所、解けたのは半分ほどだった。その解説記事がとても分かりやすい内容だった。この資格を取りたいと思い早速ユーザー登録をして試験日を確認すると、試験会場によっては日曜日を除いてほぼ毎日受験できるようだった。最短で明日から。試験料は15000円。挑戦するからには確実に資格取得をしたいので、公式HPから応募できる無料ポスタープレゼントに応募しポスターを自宅の見える所に貼ることにした。選択した画像は以下。

f:id:gfc1300:20190618144606j:plain

HTML5プロフェッショナル認定試験ポスター

 あれ、今回の勉強でbrタグは見た目を整えるために使ってはいけないって書いていたけど思いっきりbrタグを見た目を空間作りで使っていることに気付いた。はてなブログだとどうするのが正解なんだろうか。

 

年のせいか元々の性格なのか。小ネタを挟みたくなってしまう。「ユーザーがこう使えそうだなと思う操作感のことをユーザーインターフェイスという」という文章を書いていた時のことです。操作感を捜査官と誤変換してしまいました。頭の中では妄想が広がり、「捜査官と言えば銭形警部」という妄想から銭形とルパンの追いかけっこが始まりました。

f:id:gfc1300:20190618212856p:plain

銭形とルパン

話は変わるが、昨日書いた記事は大見出し(h3)の下の階層を中見出し(h4)を飛ばして小見出し(h5)で作成した。

programi.hatenablog.com

それに対してこの記事は見出しの下を中見出しで書いている。見た目や見やすさで個人的に好きなのは昨日の記事。今日の記事は<hr>を使ったり<br>で(本当はやっちゃダメらしいけど)空間をあけて個人的に見やすいようにしている。セマンティックを実現するためには中見出しで書くべきだろう。でも見た目的には小見出しで書きたい。この葛藤。調べてみるとグーグル検索のSEOの観点からは問題ない様子。

webtan.impress.co.jp

 

3.学んだことの書き出し

Webサイトやアプリを構成している技術について

 

 日常的に使っているWebサイトやアプリはWebの様々な技術で作られている。WebサイトはHTML+CSS+JavaScriptなどで制作される。アプリはネイティブアプリWebアプリハイブリットアプリに分けられる。ネイティブアプリはJavaobjective-c、swiftなどのプログラムで開発される。WebアプリはHTML+CSS+JavaScriptなどで開発される。ハイブリットアプリはHTML+CSS+JavaScriptなどとCordovaなどのフレームワークを使って開発される。

HTML5は2014年10月28日に勧告(技術の仕様が決まり、規格文書が公式に発表された状態)された。HTML5が出るまではXHTMLが使用されていたが、徐々にHTML5に移行されつつある。必要に応じてXHTMLも学ぶ。

 


Webサイトの仕組みについて

 

Webサイトを見るにはIPアドレスを持っているサーバーからWebサイトのデータを送ってもらう必要がある。IPアドレスは数字の羅列のため、人間にとって見やすいURLを使う。DNS(Domain Name System)サーバーはそのURLをIPアドレスに変換してどこにアクセスすればよいかを教えてくれる。PC、スマホタブレットなどブラウザで表示させる側をクライアントサイドと呼び、サーバー側をサーバーサイドと呼ぶ。サーバサイドにWebサイトのデータであるHTMLやCSSJavaScript、画像などが入っている。

 


HTML、CSSJavaScriptそれぞれの役割について

 

HTML:文章構造→テキストを表示、画像を表示、指定した場所に移動(ページをまたぐリンク、ページの任意の場所に移動するなど)

CSS:視覚表現

JavaScript:振る舞い

 


HTMLの書き方について(html要素、head要素、body要素、meta要素、img要素、a要素、br要素)

 

HTMLを記述するには要素を使用する。要素には開始タグ終了タグがあるものと、終了タグがない空要素がある。開始タグ内には属性=値を書く。html要素内にはhead要素とbody要素を書く。

head要素にはブラウザの表示枠には表示されない検索エンジンやブラウザなどへの様々な情報を記述する。body要素にはブラウザの表示枠に目に見える形で表示される文書全体を記述する。meta要素は文書に関する情報(メタデータ)を指定する時に使用し、charset属性は文書の文字のデジタルデータの羅列を変換するエンコーディングという処理の方法を指定する。正しくない文字コードを使用すると文字化けを起こす。img要素src属性は画像の引用先を相対パス絶対パスで指定する。alt属性はその画像の説明をする。a(anchor)要素は別のhtmlファイルに移動したり、ページの任意の場所に移動する時に使用する。 br要素は改行するために使用する。あくまで改行することのために使い、空間をあけるために使用するものではない。

https://html5exam.jp/measures/dojo_1_01.html

 


セマンティックWebについて

 

目的別に要素を使い分け、検索エンジンにWebサイトの部分ごとの意味を解釈させることで、情報の収集や加工をしやすくしていくような考えをセマンティックWebという。

 


cssについて(セレクタ、プロパティ、値)

 

CSS(カスケーディングスタイルシート)は拡張子がcssのファイルを作り、その中に記述してhead要素内でlink要素を使ってcssファイルを参照するのが基本。直接HTMLファイルにstyle要素をつかって記述したり、要素に対してstyle属性でスタイル指定もできるがメンテナンス性が悪いので外部ファイルを参照するのが基本。

CSSセレクタ{プロパティ:値;}で構成されている。

セレクタ:どこにCSSをかけるのかを指定。セレクタで使用できるのは要素名や要素に対して分類名をつけるclass属性や固有の識別子をつけるid属性などが使用できる。

プロパティ:効果の種類を指定

:指定したプロパティの値を指定

class属性は同一文書内で複数回使用可能。id属性は一回のみ。

CSSはバージョン2.1までは勧告されているがCSS3以降はモジュール(機能の規格)ごとに勧告されており、モジュールによって策定状況が異なる。ブラウザごとに先行して対応しているプロパティがある。ベンダープレフィックスを使用することでそのプロパティを使用できる。ブラウザごとのプロパティの利用可否は以下を参照。

Can I use... Support tables for HTML5, CSS3, etc

 


ブラウザごとのスタイルの差の解決方法について(ユーザーエージェントスタイルシート、reset.css、normarize.css)

 

各ブラウザにはデフォルトで設定されたCSSが反映されている。デフォルトのCSSユーザーエージェントスタイルシートと呼ぶ。ブラウザごとに微妙に数値が違う。それを解決する主なものがreset.cssとnormarize.css

reset.cssとは数値をリセットするもので、要素に対してCSSを書いているのが特徴。リセットしてCSSを書くのでコード記述の効率が悪いというデメリットがある。新しい要素が増えない限りバージョンアップされるリスクが少ない。

normarize.cssとは、ユーザーエージェントスタイルシートの値をある一定の値に調整したもの。デフォルトのCSSを活かせて無駄なCSSを書く必要が少ないのが特徴で、reset.cssよりパフォーマンスが良い。ユーザーエージェントスタイルシートに対して調整をかけるのでブラウザの持つデフォルトのCSSが変更したり新しいブラウザが出てくると差し替えが必要になる可能性がある。

 


CSS設計手法について(OOCSS、SMACSS、BEM、FLOCSS)

 

OOCSS:構造と見た目の定義されたセットを組み合わせる設計手法

SMACSS:それぞれのスタイルを役割ごとのカテゴリに分けて管理する設計手法

BEM:該当箇所の役割とその影響範囲が分かりやすい命名ルールを定めた設計手法

FLOCSS:OOCSS、SMACSS、BEM、またSuitCSSから影響を受けている設計手法。役割によって名前やファイル構成のルールが決められている。それぞれの場所や役割が理解しやすく、不要なCSSを捨てやすいという特徴がある。

 


CSS設計をサポートするCSSプリプロセッサについて

 

CSSプリプロセッサとはCSSの記述を楽にしてくれるツールのこと。Sass、LESS、Stylusなど様々な種類がある。CSSプリプロセッサを使えば必ずしも良いCSSが書ける訳ではないので注意。

https://html5exam.jp/measures/dojo_1_02.html

 


音声と動画について(audio要素、video要素)

 

音声はaudio要素を使用し、属性によっていくつかの制御ができる。音声も動画もモバイル環境では自動再生されない。スマホの契約が定額でない場合、動画などのデータ容量が大きいものが自動再生されるとユーザーの意図とは関係なく課金が発生する。そういった配慮から自動再生できないようになっている。

<audio src="音楽ファイルのパス" controls autoplay loop></audio>

src属性:値にあるパスで音声ファイルを参照する

autoplay属性:ページが読み込まれた際、自動で再生を開始する。

loop属性:繰り返し再生する

controls属性:コンテンツを制御するインターフェイス(再生・停止ボタン、再生箇所の移動、音量調整)を表示する

 ブラウザやブラウザのバージョンによってサポートしている音声ファイルの拡張子が異なる。対応するブラウザに合わせて、用意する音声ファイルを複数用意する。

<audio controls autoplay loop>

<source src="音楽ファイルのパス.mp3" type="audio/mp3">

<source src="音楽ファイルのパス.webm" type="audio/webm">

</audio>

 

動画はvide要素を使用する。音声のaudio要素と同じ用途で使用する属性が多い。(src、autoplay、loop、controls)

poster属性:再生しなくてもどのような内容か分かる動画の1フレーム

controlsのインターフェイスには画面を拡大するボタンがある

<video controls autoplay loop poster="1フレーム画像のパス>

<source src="動画ファイルのパス.mp4" type="video/mp4">

<source src="動画ファイルのパス.webm type="video/webm">

<source src="動画ファイルのパス.ogg" type="video/ogg">

</video>

 


CSSでの要素の動的な制御について

 

 CSS3では要素に対して動的な制御ができるようになった。制御できるのは回転・拡大・縮小・変形など。Webサイトにはリンクボタンが設置されていることがあるが見た目やマウスカーソルを重ねた時にクリックできそうだなと操作感がユーザーに伝わると使いやすさが増す。ユーザーの操作感のことをユーザーインターフェース、使いやすさのことをユーザービリティーという。

 :hoverは疑似クラス。疑似クラスは疑似的にクラスを扱う。他にも要素の前後に疑似的に要素を作り出す「疑似要素」がある。疑似クラスは:(コロン1つ)、疑似要素は::(コロン2つ)。CSS3から疑似クラスと疑似要素でコロンの記述が変更になった。ブラウザではコロン1つでもエラーにならない。

 疑似クラス一覧
  • :active
  • :checked
  • :default
  • :defined
  • :desabled
  • :drop
  • :empty
  • :enabled
  • :first
  • :first-child
  • :focus
  • :focus-visible
  • :focus-within
  • :host
  • :host()
  • :hover
  • :indeterminate
  • :in-range
  • :invalid
  • :lang()
  • :last-child
  • :last-of-type
  • :left
  • :link
  • :matches()
  • :not()
  • :nth-child()
  • :nth-last-child()
  • :nth-last-of-type()
  • :nth-of-type()
  • :only-child
  • :only-of-type
  • :optional
  • :out-of-range
  • :placeholder-shown
  • :read-only
  • :read-write
  • :required
  • :right
  • :root
  • :scope
  • :target
  • :valid
  • :visited

developer.mozilla.org

 疑似要素一覧
  • ::after
  • ::before
  • ::cue
  • ::first-letter
  • ::first-line
  • ::selection
  • ::slotted()

 (上の5つはコロン1つでも動く)

developer.mozilla.org

qiita.com

https://html5exam.jp/measures/dojo_1_03.html

 


HTML5JavaScript(JavaScriptの参照方法、コメント)

 

JavaScriptHTML5の要素が持つ機能をより引き出すことができるプログラム言語。CSSと同様に外部ファイルを参照して利用する。参照する場合はHTMLを先に読み込ませるためにbody終了タグの直前で参照、記述する。

<script src="JSファイルのパス"></script>

</body>

JavaScriptを使えばWeb要素の動画の再生をコントローラーのボタンを押して再生するのではなくbutton要素で再生ボタンを作るなどができる。JavaScriptと似た名前でJavaがあるが別物。略す時はJSやジャバスクと略されることが多い。

 JavaScriptのコメントは2種類の記述方法がある。//一行だけのコメントという記述方法と/*コメント(複数行可)*/という記述方法。

 


動画の再生と一時停止の制御について 

 

button要素にonClick属性を使用する。onClick属性は要素がクリックされた際に処理を発生させることができる。このクリックなど動作や状態の変化を表すものをイベントと呼ぶ。クリックイベントが発生した際に、関数を使って処理を実行させることができる。JavaScript内で;は処理の終わりを意味する。リンク先の「動画の再生と一時停止の制御をしてみよう」という見出しにある「クリックイベントが発生した時に関数を使って動画の再生処理を実行させる」サンプルファイルの説明がとても分かりやすい。重複している処理の記述は変数を使って短く書けるようにする。変数の宣言は,で区切ると連続して書ける。document.getElementById('id名').命令();で任意のid属性の値の要素を指定しそのidに対して命令を与えられる。

document.getElementById('id名').play();再生する

document.getElementById('id名').pause();一時停止する

document.getElementById('id名').innerHTMl();文字を出力する

 

メソッドについてはW3CのWebサイトに情報がまとまっている。全部英語だった。解読し甲斐があるな。

www.w3.org

.addEventLister('イベント名',関数名,falseかtrue);

指定したものに状態の変化があったら設定した関数を実行する。イベントの伝播を上の階層にする場合はtrue、必要なければfalseにする。

https://html5exam.jp/measures/dojo_1_04.html

 

4.明日の課題

 引き続きHTML5プロフェッショナル認定試験について学ぶ。

 

5.参考URL

 

 

6.今後やりたいこと・高めたいスキル・優先順位

HTML5プロフェッショナル認定資格の取得、基本情報技術者資格の取得、簿記2級の取得、ウェブカツ、WEBアプリケーション作成、PHP、説明図作成、30DAYSトライアル、JQuory、Wordpressはてなブログの機能、アルゴリズムSEO、PerfectPixel、線形代数(詳細ではなく全体の流れ)