今さら聞けないHTML　2020年01月17日

materializeを使ったformのselectタグで、iOS13だと正しく選択できない

# materializeとは？
Googleが作ったWeb用のフロントエンドフレームワークです。
レスポンシブデザインに対応していて、BootStrapみたいな感じで使えるので使いやすいです。
~~何よりいいのが、Bootstrapみたいに使えるのにBootstrapっぽくないので「あ、こいつフロントエンドはお手軽に済ましたな！」みたいに思われにくく、作り込んだ感が出ます~~

iconも豊富でカラーバリエーションも多いので、作り込まれたサイト感が出しやすいです。
またフラットなデザインなので、[UnDraw](https://undraw.co/)のイメージともなじみやすくよきです。
最近流行りの感じのサイトをお手軽に作ることができます。

https://materializecss.com/

Bootstrapから抜け出して次に行きたい！という人、ぜひmaterializeCSSを使いましょう。
日本語の情報がまだ少ないっぽいので、もっとやれるひとを増やしていきたいのです。

# 問題の詳細
さて、そんなすばらしいmaterializeですが、ちょっと不具合があったのです。

ゲーム2を作ってみた

タイトルは`yui2`となっています。


https://syui.cf/imgame2

まずロゴを作りました。数字の部分、最初はフォントを使おうと思ったんですが、めんどくさいですしね、でもしっくりこなかったので、自分で作る羽目になりました、2です。

今回もアイテムから背景、キャラクター、シナリオなどを設計しました。

例えば、モンスターボックスというアイテムが登場するのですが、以下のようなデザインから構成されています。なんとなく線を引いたり、消したり、塗りつぶしてみたり。


シナリオに関しては、最初のシリーズで謎だった部分の伏線がいくつか回収されていると思います。

イラストで描いている背景、アイテム、キャラクターは方向性がそれぞれに決まっている

あえてseleniumを使わずにフォームに入力してみる

# はじめに
「あえて」というほどでもないのですが、Pythonでフォームの編集を調べているとseleniumが良く出てくるのでRequests+BeautifulSoupで実装してみました。

[以前投稿した記事](https://qiita.com/sssssssiiiiinnn/items/14f7035abe9ce4111323)の発展編としてちょうどいいのでQiitaのプロフィール文を編集してみました。

# 編集用関数
編集可能な多くの項目はtypeが[‘text’, ‘url’, ‘checkbox’]のいずれかであることがソースから判明したため、ほとんど手打ちする必要なく取得できました。
取得もれである’user[desctiption]]’を追加するついでに編集すればpost用データの完成です。なぜかemail公開のチェックボックスがデフォルトでチェック済みになっていたため0に修正しています。データの作成ができたらログイン時のセッションを使ってPostすれば完成です。

“`Python
def edit_profile(session):
profile_

Swipe.js スライド時にイベントを発火させる

Swipe.jsでiphoneライクなTimepickerを実装したので共有します。
出来上がりイメージ図は
こんな感じです。
コードはこちらから確認できます。
[Timepicker using Swiper.js](https://codepen.io/dogoku/pen/zNxKpd)

公式ドキュメントはあまり参考ならなかったです。(わたし的に)
[Swiper](https://swiperjs.com/)

# 補足
iphoneライクに指でスワイプできるようにすると
どうしてもイベントが発火しなかったので、
泣く泣く指スワイプは外しました。
(実装に成功した方は是非教えていただきたい)

ちなみに指スワイプを実装したコードは以下にな

Google しごと検索に求人情報が掲載されるようになるまで（勤務先住所が複数の場合）

**Google for Jobs？**
**Google しごと検索？？**
**Google 求人検索？？？**

いま主流の呼び名ってどれなんでしょうね・・・
とにかく、**Googleの検索結果に求人情報が出るようになったという例のアレ**です。

[Google Japan Blog: Google しごと検索で、仕事探しをもっとスムーズに！](https://japan.googleblog.com/2019/01/shigoto-search.html)
（2019年1月23日水曜日）
> 本日より、Google しごと検索 の提供を開始します。この新機能は、ウェブ上の転職・求人情報サイトや企業の採用ページ等から求人情報を探して、検索結果に分かりやすく表示します。

検索結果上に求人情報が表示されるようにした際のメモです。

# 主な参考記事

[求人情報 | 検索 | Google Developers](https://developers.google.com/search/docs/data-types/job-posting?hl=ja)
[構造化データに関する

[Vue.js] ケバブケースとかキャメルケースとかパスカルケースとか

Vueでのケースの書き方って場所によって何がいいか若干悩みますよね。（私だけ？）
なので、まとめてみました。

## そもそも○○○ケースって？（復習）
一言で言うと「クラス名や変数名等の名前の付け方の総称」
覚えておくべきケースをざっと説明すると。。

## ケバブケース
文字と文字の区切りを`-`で表現するやり方。「チェインケース」とも言う。
ケバブのお肉をぶっさしている感じからきているとか。:meat_on_bone:

“`
this-case-is-god
“`

## キャメルケース
文字と文字の区切りを大文字で表現するやり方。
よく見るやつです。ラクダのこぶですね。:camel:

“`
thisCaseIsGod
“`

## パスカルケース
文字と文字の区切りを大文字で表現＋先頭の文字も大文字にする。
それもそのはず、「アッパーキャメルケース」とも呼ばれるのだから。
これもよく見ますね。

“`
ThisCaseIsGod
“`

## どこにどのケースを書くべきか？
### 基本的に下記の方針でOK

– コンポーネントは「パスカルケース」
– Ja

S3に静的HTMLファイルやSPAのスクリプトを配置して公開する

S3はファイルを補完するだけでなく、以下の手順を踏むことでHTTPサーバとしても利用することができます。
EC2などのサーバを立てなくても簡単にHTMLページが公開できます。
また、ReactやVueなどで作ったスクリプトを配置することもできます。費用はファイルサイズやアクセス数をベースに計算され、安価で簡単に情報公開ができるのでおすすめです。

## S3バケットの作成

バケットを作成していない場合は、Create bucketボタンを押して、S3バケットを作ります。

最初のBucket nameは同じ名前のバケット名を（同じリージョンで）ほかの人が使っているとエラーが出ます。
重複しないバケット名を入れて、Nextを押して次に行きます。②～④は、一旦そのままの設定で構いません
iPhone Safariなのに…。::-webkit-scrollbarが使えない…！

iPhoneのスクロールバーをカスタマイズする時、jsで実装するとスクロールの挙動が変わる。
デフォルトの挙動を残したかったので、::-webkit-scrollbarを使おうとしたが表示されなかった。

#参考URL
**・iOS13でCSSでスクロールバー拡張できる::-webkit-scrollbarが使えなくなったよう**

iOS13でCSSでスクロールバー拡張できる::-webkit-scrollbarが使えなくなったよう

**・慣性スクロール実装でスクロールバーは常に表示できない？**

慣性スクロール実装でスクロールバーは常に表示できない？

**・iOS デフォで慣性スクロールできるようになった？**
https://qiita.com/cubkich/items/d192a70856e8bc63c7bc

#考察
1. iPhoneで慣性スクロールを指定すると、::-webkit-scrollbarが使えなくなる
2. iOS13から慣性スクロールがデフォルトになった
3. デフォで慣性スクロールなので::-webkit-scrollbarが使えなくなる

CSSだけで画像などの要素を上下にふわふわ動かす

#はじめに
CSSとHTMLだけで、要素（画像など）を縦にフワフワと動かしてみます。
下記参考ページの「一番上のスマートフォン」のような動きが可能です。
【参考】
https://www.ana.co.jp/ja/jp/amc/promo/app-service/

#方法

動かしたい要素のclassに任意の文字列を設定します。
この場合は「img scr=”○○○”」に対して、classを設定します。
###HTML

“`HTML:index.html

“`
その任意の文字列に以下のコードを設定
###CSS

“` CSS:style.css
.#### {
animation-name: ▲▲▲▲;
animation-timing-function: ease-in-out;
animation-iteration-count: infinite;
animation-direction: alternate;
animation-duration: 1.5s;
}

おい、ダークモードには対応していないのか？

「おい、ダークモードには対応していないのか？」と、誰かから言われたり言われなかったり。

で、調べてみたらCSSとJSで良さげなのが見つかったので備忘録代わりに

### CSS

“`CSS

@media (prefers-color-scheme: light) {
/* ライトモード用CSS */
}

@media (prefers-color-scheme: dark) {
/* ダークモード用CSS */
}

“`
CSSの場合、まだ草案段階なので、ダークモードだけ`@media`を使っていくのが良さげ

対応率も良さげ（低いが、ダークモード対応端末だけで見るとよい割合な気がする。）

[Can I U

WordPressと静的コンテンツを共存させる方法

WordPressのトップにあるindex.phpを確認。
初期設定通りであれば、
wp-blog-header.php
を参照するように設定されているはず。

“`index.php
ドキュメントルート/wp/index.php
/** Loads the WordPress Environment and Template */
require( dirname( __FILE__ ) . ‘/wp/wp-blog-header.php’ );
“`

wordpressが読み込む順番は、
index.php→wp-blog-header.php

なので、index.phpと同じ階層に表示させたいコンテンツを配置することで、
1. 静的コンテンツを配置したディレクトリ
2. wp-blog-header.php
の順番に参照します。

ここで１つ問題なになるのが、
Wordpressと静的コンテンツのディレクトリが重複してしまう場合です。

例)
WordpressのURL
https://sample.com/test/
静的コンテンツとして表示させたいURL
https:

画面遷移せずにHTMLで値を送る方法

画面遷移せずにGETで値を送る方法のメモです。

##HTMLで値をGET送信
a href=”URL?属性名=変数名”

“`html



“`

##Javaで値を受け取る
request.getParameter(“属性名”)
sは文字列「sample」を受け取ります。

“`java
protected void doGet(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {

String s = request.getParameter(“action”);
“`

HTMLImageElementインターフェースについてまとめ

###はじめに
JSを勉強している中で、**「HTMLImageElementインターフェース」**というモノを知り、最初は何を言っているのかさっぱりわからなかったところから少しづつ理解したこととまとめてみます。

###HTMLImageElementとは
>HTMLImageElement インターフェースは、 タグに相当します。
>エレメントの一種です。
>画像を読み込んで表示するための機能がまとまっています。

つまり、JS上で `タグ` に相当するモノ(オブジェクト)を作成し、htmlに反映できるだと理解しました。

こちらのサイトがわかりやすかったので引用させていただきました。
>https://hakuhin.jp/js/image.html

###どんな感じに使うのか
####使い方：Image() コンストラクタを使用する
“`js:コンストラクタを使用
// HTMLImageElement オブジェクトを作成する
var image = new Image();
“`
簡単にボタンクリックで画像切り替え処理を作成しました。

Retinaディスプレイに表示させる画像のこと

ある方からLPコーディングの件でご教授いただいた時に、

「ちなみに私の場合はデフォルトでRetinaディスプレイにも対応させているので1倍と2倍のサイズで書き出すことが多いです。」

って言われて。

？？？

だったんですよね。

いや、Retinaディスプレイのことは知ってましたよ！！

・・・あのアップルのきれいなやつですよねwww

##結論
###２つのサイズの画像を用意してディスプレイに対応した方の画像を読み込ませる
####コーディング１例(1xに普通ディスプレイ用、2xにRetinaディスプレイ用）
“`

“`
####準備する画像サイズ
普通のディスプレイ用の画像が1000×1000だった場合、
Retina用は500×500のサイズに「縮小」した物を準備する

##？？？な状態で調べた内容

>Retinaディスプレイ（英語：Retina Display）は、アップル製品のうち、

HTMLの引用タグについて調べた

タイトル通り、引用を使うことがあって、ちゃんと理解していなかったので調べた。

##結論

###コーディング例
（リンク先URLはテストなので存在しません。）

“`

ここが引用文だよテストだよ

hogefugapedia

“`

ここが引用文だよテストだよ

hogefugapedia

###感想
**ちゃんと書いたらぱくりじゃない**
正しくガンガン引用しようとおもいました！

##調べた内容
>引用（いんよう、英語：citation, quotation[1]）とは、広義には、自己のオリジナル作品のなかで

Vue.jsを参考に、BladeファイルにJavaScript, CSSをまとめてみる。

# Vue.jsの開発者的メリット
– HTML, JavaScript, CSSを1つのファイルに記述するというのがシンプルで良い
– scopedが便利
– コードが複雑化しにくい

そして思ったのです。
**これって普通のアプリケーションにある程度応用できそう。**

# 実際に考えてみる
ちょっと考えてみました。方針としては、

– 仕様に応じてBladeのディレクトリ構成をシンプルに考える
– JavaScript, CSSはBladeのディレクトリ構成に合わせる。
– 影響範囲は対応するBladeファイル内にとどまるように気をつける。

## Bladeファイルのディレクトリ構成
サンプルです。実際には画面仕様などにより異なるはずです。

– ルール
– views/直下は、layouts/および、メニューに対応するディレクトリ（menus/を作ろうと思ったが階層が深くなりすぎるのが嫌なので却下）
– メニューごとのディレクトリには、ページに対応するbladeファイルがある
– メニューごとのディレクトリには、parts/があり、ページを構成する部品

HarmonyEngineっていうサイトを創っていく日記（不定期） 1

# HarmonyEngineってなんやねん

まあ端的に言うと、うちの兄貴が作ろうとしている新しいサービスの実装です。
以下**HE**と呼称していきますね。人生で初めてこういった記事を書くので下手糞ですがお付き合いください。その際使った技術などのアウトプットのために記事を作成していこうと思います。ブログに書くかQiitaに書くか迷ったのですが、結局Qiitaにしました。

#HEの内容

HarmonyEngine、通称**HE**は**普段埋もれてしまっている才能あるクリエイター達を発掘するための新しいサービス**のプロトタイプネームです。と兄貴は言っていますが今のところ概要はあんまし掴めてません。でもサービスの内容的にちょっと面白そうなので制作に加わりました。あと、私のTwitterを見ている方ならわかるとは思いますが、将来やりたいことのためのポートフォリオとして有効活用していきたいなと。

#ちなみに

このサービスの名前は某小説家の中に出てくる名前からとったそうです。まあ**steins;gate**みたいでカッコいいと思うけどね。

#仕様

一応今後のポートフォリオにす

テスト投稿

テスト
https://qiita.com/kenz_firespeed/items/5cab42ad323913957935
https://developers.google.com/web/fundamentals/design-and-ux/responsive?hl=ja

レスポンシブデザインの作り方！簡単にスマホ対応する方法について

【入門】レスポンシブWebデザインとは？概要と作り方を丁寧解説

「レスポンシブ」デザインを前提としたWebサイト制作【基礎編】

[備忘録]「-webkit-text-size-adjust」は指定しておこう、今のところは！

今更だけどCSSって何ぞや　あとPHPってHTMLの中に書けるのに.phpってどういう意味だってばよ？

##という方に向けてざっくりCSSとPHPを解説して行きたいと思います。

まあCSSがCascading Style Sheetsの略で、表示に関する記述って言うのは誰でも分かると思うんですが、じゃあCSSの中身はどういう仕組みになってるの？という問いに対して答えられる人ってIT人口の何割なんだろうねって気がします。

HTMLに関してもPHP使うなら必修だと思うけど、pとかaとかimgとか、主要なタグさえ覚えればheadの中身とか理解しなくても使えてしまったりするので「今更HTMLとかなぁ～」って思ってる人こそ勉強してみると楽しいと思う。

あと分かってるとは思うけど、仕組みと言いつつ低レイヤーの話はしない（出来ない）のでCSガチ勢の方は帰ってどうぞ。

##CSSの役割とは何ぞや

これに関しては長々と解説するより実例を見てもらった方が早いでしょう。

![Qiita.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/541457/a02c8cd

【HTML】構造体のメンバ表示

“`html:html

aaaa

aaaa

+