手習いHTML5 (2)

整理がし切れていないが、直近で使用したHTMLタグの覚書きを記す。


省略のできないタグ
■<TITLE>
該当の文書にタイトルを付ける場合、任意の文字列を挿入する。

<TITLE>ここにタイトルを入力する。</TITLE>
検索結果として表示されるため、分かりやすいタイトルが求められることもある。

ページを構成する基本的なタグ
■<HEAD>
前回の<HTML>と同じく、文書の構造に深くかかわる。

ヘッダーに似た名称だが、実際のページには表示されない要素を多く含む。
主にGoogleをはじめ検索サーチエンジン文字コードなど、文書の全体に影響を及ぼす情報が含まれる。

<HEAD>が使用された場合は、</HEAD>も同じく使用されている。

■<BODY>
<HTML><HEAD>につづく文章構造を定めるタグの一つ。

ページの内容を表示するためのタグであり、実際にページに表示される要素が含まれている。

確認できた限りでは、これらのタグは1ページ当たり1組のみが使用されている。

手習HTML5 (1)

ホームページ作成を始め、手探りながら理解できたことをまとめてみる。。


1.タグやコードはしっかりと閉じる。
HTMLにはさまざまなタグやコードが使用されているが、“<>”“{}”をはじめとしてしっかりと閉じる必要がある。
基本的なところだが、すでにいくつかのエラーはこれらのどちらかが欠けていたことにより発生していた。

いくつかの共通したタグやコードで、どれか特定のコードがエラーを起こしている場合は、記号の欠けが発生している場合がある。


2.最初に<!DOCTYPE html>の宣言を行なう。

HTML形式でのファイルを作成する場合は、当たり前のようだがHTMLドキュメント形式であることを指定する必要があるとのことだ。
何か別のHTMLがデータを引用づる場合などを除き、HTML形式となるファイルのほとんどは、HTMLであることが宣言されている。

過去のHTMLのバージョンは長い宣言が必余だったようだが、HTML5は<!DOCTYPE html>で事足りるようだ。


このようにその都度気づきをまとめていき、整理ができることで、理解が深まるのではないかと思い、少し試してみようと思う。

手習いHTML(準備号)

20年前、Windows95が普及し始めた頃、黎明期のインターネットで自作ホームページや掲示板などで盛んな交流が行われていた。

当時のバージョンはHTML2.0であったと思われる。

タグ入力で掲示板の文字の色やサイズが変わり、ホームページはあまねくソース表示ができ、構造の理解こそできないが、何らかの不思議なからくりによって、彩りに満ちた空間が映し出されていることだけは強く記憶している。

そこからしばらくHTMLと無縁の生活を送っていたが、ふとしたことから再びHTMLと向き合うこととなった。

今や基本的なこともおぼつかない始末、これを機にいま一度HTMLについて、少しずつではあるが理解を深めるべく、ここに覚書をまとめていきたい。

プログラミングテスト3

問3

http://www.sekaimon.com/pbapi/search.do?searchCountry=us&keyword=BMW

http://www.sekaimon.com/pbapi/search.do?searchCountry=us&keyword=nike

でアクセスしてもわかるようにJSON形式でおのおのの情報が取得できます。

 

http://153.126.153.193:8887/test3/

で開いたページのサンプルのようにしてください。

手順は

①検索した文字列をキーワードにAPIを呼び出す

②category1テーブルに入っているカテゴリのみをリストに表示させる

③BANの値が1の場合はX、0の場合はOと表示する、1の場合はグレーにする。

 

サーバーアクセス手順はこちらを参考にしてください。

category1のデータの登録、更新は自由に行ってください。

デフォルトで入っているデータは削除しないでください。

sekaimon.hatenablog.com

 

なぜ紙は白いのか

「なぜ一般的なテキストエディタをはじめ、デフォルトの背景が白いのか。」

背景に色のついたテキストエディタを使ってふと考えさせられる。

今でも小中学校では黒板を使い、暗い背景色のディスプレイが根強く支持されている。

スマートフォンが普及した21世紀が17年目となってなお、チョークと黒板なのか。

 

真っ先に思いつくのはコスト面である。

電子化されたディスプレイは確かに便利そうではあるが、おしなべて精密機器であるからして、耐久性においてアナログに劣る。

また、消耗品としてもチョークは、タッチペンやホワイトボード用のペンよりはるかに安い。ただ安いだけではなく、書こうとして書けない、といった心配もなく、一度や二度折れたとしても使用に支障をきたさない。

そして何より、夜空に星がきらめくがごとく、暗い中での明るい色は目立ちやすく、さらにチョークは一定の太めの線で書き続けることができる。

そして何より、強すぎる光が目に負担を与えるように、背景が明るい色であった場合は、光の当たり具合によっては見えにくくなるのではないだろうか。

 

当たり前になり過ぎたことで、疑問を持たなくなっていることが日常には数多くある。不便さばかり目につきがちな黒板であるが、存外に今でも一定の高い実用性を保っている。

見過ごされがちな長所に気づけたように感じられたのは、ひとつの収穫であった。

 

なお、紙が白いのは印刷の発色をよくするためであり、人工的に漂白しているからである。

未経験でもできるエンジニア実践テスト 問1と問2

サーバーのIPアドレス 153.126.153.193

アカウント:test1 パスワードは別途報告します。

ポート:29870

 

Windowsの場合はWinSCPMacの場合はFileZillaなどでサーバーに入ってください。

WinSCPの場合は下記を参考にしてください。

https://winscp.net/download/WinSCP-5.9.6-Portable.zip

でダウンロードしてZIPを解凍

f:id:sekaimon-staff:20170628111438p:plain

青線がかかっている部分のアイコンをクリック

f:id:sekaimon-staff:20170628111820p:plain

New Siteを選択

Hostnameに153.126.153.193

Port numberに29870

User nameにtest**

Passwordに**

全て入力してLoginをクリックしてログインする。

f:id:sekaimon-staff:20170628112144p:plain

Yesをクリック

f:id:sekaimon-staff:20170628112813p:plain

赤い線で囲った部分をダブルクリック

f:id:sekaimon-staff:20170628113021p:plain

Open directoryにソースコードのパス、/var/www/test_**を入力

あとはダブルクリックで、上に階層に行けたり、下位の階層に行けるので任意のファイルを編集することができます。

 

問1

http://153.126.153.193:8887/test1

で見えるとおり

f:id:sekaimon-staff:20170208174111j:plain

IDと価格のデータしか見れないの

でそれを下記の画像のように商品名も表示する

 f:id:sekaimon-staff:20170208174433j:plain

/var/www/test_8888/app/views/responsive/test1.php のファイルをいじってお願いします。

秀丸ATOMなどのテキストエディタを使用すればわかりやすくできると思います。

 

 DBのアクセスは

phpMyAdmin

からはいって

'database' => 'sample1',
'username' => 'sample',
'password' => パスワードは別途報告します。

で入れます。

 

問2

f:id:sekaimon-staff:20170208174841j:plain

http://153.126.153.193:8887/test1

と同じように

ここに商品名と価格の値を入れてDBに登録できるようにする。

 /var/www/test_8888/app/controllers/Test1Controller.php

を変更して改修してください。

laravelのクエリビルダーを使ったほうがいいかと思います。

データベース:クエリービルダー 5.1 Laravel

わからないことがあれば何でも質問してください。
すべて正解しなくても、そこまでの思考、どういうコードを書くのか
質問内容によって判定したいと思います。

 注意としては毎時0分にソースコードは初期化されます。

 

 

Google Feed APIが完全終了したっぽいので代替えを考えてみた

前職の人から次のような内容で連絡が来た。(ちなみにその会社内にITの知識を持つ者はゼロ)

----------------------------------------------------------------------

前職でサイト内のインフォメーション(社内向けとお客様向け)を管理するため、フリーのインフォ管理アプリを使用しそのRSSGoogle Feed APIで取得・表示していたのだが、ある時から取得(2017/1/13に確認)できなくなり今も取れていない。どうにかして。

----------------------------------------------------------------------

 


そこで代わりに使えるものがないか調べてみた。
まずは自分の手は動かしたくない(⇦超重要)ので作業工数を限りなくゼロにしたいのと自社内にシステムに詳しい人がいなくても運用できることを条件に探してみた。

1.phpで受ける
2.jsonで取得
3.YQL APIを使う
4.iframeを使う


1.phpで受ける
php使えないサーバーなのでダメ
社内にphpわかる人がいないと運用できない
工数ゼロじゃない


2.jsonで取得
ドメインなのでダメ
工数ゼロじゃない

 

3.YQL APIを使う
これもサービスが終了した時保守できる人がいないといけないのでダメ
工数ゼロじゃない

 

4.iframeを使う
工数ゼロに近い
サービスが終了することもない

 

結局最後の4を提案した。
jsonで取ることばかりを考えていたのですっかりiframeを使うという考えが抜け落ちていた。
何事も近視眼的になるのはよくないなーと感じた出来事。