20190512のHTMLに関する記事は3件です。

投稿日：2019-05-12T23:55:16+09:00

転生したらGoogleボットだった件

※フィクションです。Googleの検索アルゴリズムが実際このように動いているという話ではありません。

やれやれ、ワイは蘇生した。

ワイ「・・・うーん・・・ハッ！？」
ワイ「あれ・・・？」
ワイ「ワイ・・・生きてるんか！？」
ワイ「・・・何やこの真っ白い部屋は・・・！」
ワイ「何がどうなってるんや・・・」
ワイ「確かワイは・・・」

それは昨日のこと

ワイ「確か、ワイらがようやくWebサイトを作り上げた後に」
ワイ「クライアントの一番偉い人が登場して」
ワイ「仕様を根本から変えたいって言い出したんや・・・」
ワイ「それまでのウォーターフォール型開発から、突如メテオフォール型開発¹に方針転換したことで」
ワイ「確か、ワイはショックで殉職してしもうたはず・・・」
ワイ「・・・と思ってたけど、どうやら一命を取り留めたようやな・・・」

しかし何かが違う

ワイ「でも、何か普段と違う感じがするで・・・」
ワイ「・・・あっ！！！」
ワイ「何やこの体・・・！」
ワイ「ワイ、Googlebotになってもうとるやないかい！！！」

ハリー先輩「なんで体を見て分かんねん」
ハリー先輩「設定ムチャクチャやん」

ハリー先輩もいた

ワイ「ハリー先輩！？」

ハリー先輩「どうやら俺達はメテオフォールのショックで、チームメンバー全員が殉職してもうたみたいや」
ハリー先輩「そしてこの世界に転生したいうことやな」

ワイ「そんな・・・」
ワイ「ところでこの真っ白い部屋は何でっか？」
ワイ「ここはどういう世界なんでっか！？」

ここは検索エンジン

ハリー先輩「どうやらここはGoogleの検索エンジンや」
ハリー先輩「世界中のWebサイトの情報を集めて」
ハリー先輩「ユーザーが検索したワードに関する情報が載っているサイトを」
ハリー先輩「一覧にして提供するのがお仕事や」

ワイ「おお・・・！そうなんでっか・・・！」
ワイ「さすがハリー先輩・・・」
ワイ「この何もない真っ白い部屋の中に急にほっぽり出されて」
ワイ「ノーヒントでそこまで状況を把握してまうなんて・・・」
ワイ「やっぱりハンパなさ過ぎますわ・・・！」

ハリー先輩「そんなことはええ」
ハリー先輩「ウダウダ言うててもしゃあない」
ハリー先輩「とにかく、お前はこの世界ではGooglebotや」
ハリー先輩「早くWebサイトをクローリングしてこい！」

ワイ「はいっ！」

クローリング開始

ワイ「まずはjzmstrjp.netlify.comいうサイトやな・・・」
ワイ「おお、一瞬で着いたで」
ワイ「どれどれ・・・」
ワイ「・・・何やこのWebサイト」
ワイ「中身が空っぽやんけ」
<div id="app"></div>
ワイ「body要素の中身、実質これだけやないか」
ワイ「ん・・・？」
ワイ「・・・なんかワイの中から不思議な力を感じるで・・・！」
ワイ「！？」
<div id="app">
    <header>
        <h1>bfjnxkrhorzlb</h1>
    </header>
    <nav>
        <ul>
            <li><a href="/aaa/" title="">lksbjhiu</a></li>
            <li><a href="/bbb/" title="">stih;bjb</a></li>
            <li><a href="/ccc/" title="">nbsltuhbkls</a></li>
        </ul>
    </nav>
    <section>
        <h2>sep:igzrjf:</h2>
        <p>;tpeshj;kzjbxkkb</p>
    </section>

    

    <footer>
        gjs;rsoibjvkjg;lrgk
    </footer>
</div>
ワイ「おお・・・！」
ワイ「さっきまで空っぽに見えたdiv要素の中に」
ワイ「色んな要素たちが生成されたで・・・！」
ワイ「ワイの中のJavaScriptパワーが目覚めて」
ワイ「このサイト内のスクリプトを解釈することができたんやな」
ワイ「前世ではあんなに読めへんかったJavaScriptが」
ワイ「無意識レベルで理解できたで・・・！」
ワイ「最近のGoogleのクローラーは最新のChrome相当やっていうもんな」
ワイ「せやからこういう、JSで動的に生成されるページも解釈可能なんやな」
ワイ「よっしゃ、この調子で色んなサイトを見て回って、内容を保存していくで！」

しばらくして、ハリー先輩のところへ帰る

ワイ「ハリー先輩！」
ワイ「とりあえず10サイトで2,000ページほど保存して持ってきました！」

ハリー先輩「おう、ご苦労やったな」
ハリー先輩「どれどれ、まずはjzmstrjp.netlify.comの内容を見てみよか・・・」

解析開始

ハリー先輩「なるほどな、このページの・・・」
ハリー先輩「ここからここまでの部分は、このテーマについて書いてあるんやな・・・」

ワイ「え？ハリー先輩・・・」
<section>
    <h2>sep:igzrjf:</h2>
    <p>;tpeshj;kzjbxkkb</p>
    
</section>
ワイ「この変な文字列読めるんでっか！？」

ハリー先輩「いや、読めへんで」
ハリー先輩「俺たちロボットは、日本語や英語みたいな自然言語をちゃんと理解できるわけやないからな」
ハリー先輩「sep:igzrjf:みたいな意味不明な文字列としてしか認識できひんねや」

ワイ「ほな何で文書の構造みたいなんが分かるんでっか？」

ハリー先輩「このページはちゃんとセマンティックなタグでマークアップされとるからな」

ワイ「セマンティックなタグ・・・？」

ハリー先輩「html5からぎょうさん増えた、意味のあるタグのことや」
ハリー先輩「例えば・・・」
<div>
    <h2>sep:igzrjf:</h2>
    <p>;tpeshj;kzjbxkkb</p>
    
</div>
ハリー先輩「こんな感じでsectionやなくてdivタグでマークアップされとったら」
ハリー先輩「その中のh2タグがどの範囲に対する見出しなのかが曖昧やねん」
ハリー先輩「divタグってのは、文書構造的な意味を持たない汎用的なタグやからな」
ハリー先輩「せやけど、このページではちゃんとsectionタグが使われとるから」
ハリー先輩「このh2要素は、この章（セクション）に対する見出しなんやな、って分かんねん」
ハリー先輩「俺たちロボットでも読みやすい、マシンリーダブルなhtml文書やっちゅうことや」

ワイ「おお・・・なるほど・・・」

？？「こっちのページなんかも分かりやすいですよ」

ワイ「・・・君は・・・！？」

ハスケル子も転生していた

ワイ「天才中学生ハスケル子ちゃんやないか！」
ワイ「君も転生しとったんやな・・・！」
ワイ「っていうか、インターンなのにブラック案件に巻き込んでごめんな・・・」

ハスケル子「そんなことは今どうでもいいんです」

ワイ「（殉職も意に介さず！？）」

ハスケル子「ここのhtmlソースを見てください」
<figure>
    <img src="aaa.png" alt="a;grhb;z">
    <figcaption>bns*?gjrsj</figcaption>
</figure>
ハスケル子「ちゃんとfigureタグが使われているので」
ハスケル子「このfigcaptionが、この画像に対する説明だってことが分かります」

ワイ「おお〜、そんなタグもあんねんな・・・！」
ワイ「たしかに・・・」
<div>
    <img src="aaa.png" alt="a;grhb;z">
    <span>bns*?gjrsj</span>
</div>
ワイ「もし、こんな感じでdivやspanばっかりでマークアップされとったら」
ワイ「ワイらロボットには、この画像とテキストの関係性が分からへんもんな」

ハスケル子「そういう事です」

ワイ「なるほどな〜」
ワイ「セマンティック要素を使用すると、検索エンジンに対して文書構造を明確にアピールできる・・・」
ワイ「とか聞いたことあったけど、こういうことやったんやな・・・」
ワイ「ホンマいろいろ知ってんな、ハスケル子ちゃん」

ハスケル子「やめ太郎くん・・・やめ太郎くん・・・」

ワイ「ん、ハスケル子ちゃん？」
ワイ「どないしたんや？」

ハスケル子「やめ太郎くん・・・やめ太郎くん・・・」

ワイ「ハリー先輩！ハスケル子ちゃんの様子がおかしいでっせ！」

ハリー先輩「やめ太郎くん・・・やめ太郎くん・・・」

ワイ「ハリー先輩まで！」
ワイ「どないなってんねや・・・！」

ここで目が覚める

社長「やめ太郎くん・・・やめ太郎くん・・・！」
社長「おい！やめ太郎くん！」
社長「堂々と昼寝すなよ・・・！」

ワイ「ファッ！？」
ワイ「ワイは殉職してGooglebotに・・・」
ワイ「早くクローリングの続きをせんと・・・」

社長「何を寝ぼけてんねん・・・」
社長「さっさと昨日頼んだhtmlコーディング終わらしてくれや・・・」

ワイ「ゆ、夢やったんか・・・」

気を取り直してマークアップ

ワイ「よっしゃ、夢の中で学んだことを活かして」
ワイ「セマンティックなマークアップをしていくで！」

しかし5分後

ワイ「ここは何のタグでマークアップすべきかな・・・」
ワイ「いうてもワイ、アホやから・・・」
ワイ「そもそも文章内の言葉の意味が分からん・・・」
ワイ「意味の分からん言葉に意味のあるタグなんて付けられまっかいな・・・」
ワイ「・・・もう全部divタグでええわ！！！」

社長「おい、さっきから全部聞こえてんで・・・！」
社長「ほんまに殉職させたろかい！！！」

〜おしまい〜

神（偉い人）が現れて、隕石のような破壊力のある指示で現場を無茶苦茶にする開発手法。 ↩

　 Tweet
Qiitaで続きを読む

投稿日：2019-05-12T19:50:56+09:00

Bootstrapのnavbarで右寄せにしたいけど、mr-autoが効かないときの対処法

はじめに

今回はBootstrapのnavbarについてです。

Webページにナビゲーションバーを作りたいと思い、bootstrapのnavbarを導入してみました。

しかし公式の通りにやってもうまくいかなかったので、同じく悩んでいる方がいたら参考にしてください。

公式のやり方じゃ適用されなかった、、、

Bootstrapをつかったナビゲーションバーの作り方

Bootstrap公式によると、
左寄せと右寄せでulタグを分けて、左寄せの方のulタグのクラスにmr-autoを適用すればいいのだそう。
<div class="collapse navbar-collapse" id="XXX">
    
    <ul class="nav navbar-nav mr-auto">
      <li class="nav-item active">
        <a class="nav-link" href="#">XXX</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">XXX</a>
      </li>
    </ul>
　　
    <ul class="nav navbar-nav">
　　　　<li class="nav-item">
        <a class="nav-link" href="#">XXX</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">XXX</a>
      </li>
    </ul>
  </div>
Laravelの勉強をララ帳でやっていて、ララ帳でもこのような紹介がされていました。

しかしながら私はこのままではすべて左寄せで表示されてしまいました。

しらべてみると、Bootstrapのバージョン等が問題でmr-autoが効かないというような記事もありました。

Bootstrap4をLaravelに導入をしてみるも左寄せのままでした。

解決策：divタグで無理やり左寄せと右寄せに分ける
<div class="collapse navbar-collapse" id="XXX">
  
  <div class="navbar-left"> 
    <ul class="nav navbar-nav">
      <li class="nav-item active">
        <a class="nav-link" href="#">XXX</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">XXX</a>
      </li>
    </ul>
  </div>
  
  <div class="navbar-right"> 
    <ul class="nav navbar-nav">
　　　　<li class="nav-item">
        <a class="nav-link" href="#">XXX</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">XXX</a>
      </li>
    </ul>
  </div>
</div>
こんな感じにdivタグのクラスにnavbar-rightを追加して、うまく右寄せが適用されました。

　 Tweet
Qiitaで続きを読む

投稿日：2019-05-12T16:29:18+09:00

私がHTML の <select> 要素 multipleに求めること(動くサンプルコードあり)

HTML の要素 multiple

はじめに

まずは下記の画像とマークアップをご覧ください。
index.html
<div class="box">
  <p>select</p>
  <select name="select1">
    <option value="en">英語</option>
    <option value="de" disabled>ドイツ語</option>
    <option value="fr" selected>フランス語</option>
    <option value="ja">日本語</option>
    <option value="zh">中国語</option>
  </select>
</div>

<div class="box">
    <p>select multiple</p>
    <select name="select2" multiple>
    <option value="en">英語</option>
    <option value="de" disabled>ドイツ語</option>
    <option value="fr" selected>フランス語</option>
    <option value="ja" selected>日本語</option>
    <option value="zh">中国語</option>
  </select>
</div>
style.css
.box{
  border: 1px solid;
  margin: 1rem;
  padding: 1rem;
}
何の変哲も無いselect要素です。

この記事ではHTMLのselect要素のUIについてもう一度考えてみました。

皆さんもご存知のように上の画像は、選択肢が限られている際に選択するUIとしてWebアプリケーションで頻繁に使う select要素です。

select要素にmultiple属性を与えると上の画像でいうと下のように複数選択が可能なselect要素になります。

モバイル

私は、モバイルでのselect multipleには不満がありません。

どのように動作するかは下記の画像のようになります。

select要素multiple選択時

選択時のインターフェースはandroid,iosで違えど、各OSでのデフォルトのUIなのでそれぞれのユーザーにとって馴染みがあり操作しやすく、多くの方が複数選択も問題なく選択できると思います。

PC

PCでの不満点が2つあります。
それは

操作が少し難しい

表示が変わる

と思っています。

操作が少し難しい

複数選択するためには、
複数の選択はshiftを押しながらクリックで、最後に選択したところからクリックしたところまでの全てを選択します。また、単体で複数を選択する際には
macならcmd+クリック
windowsならctrl+クリック
になります。もうちょっと簡単だったらいいのに。

表示が変わる

multiple が指定されている場合、多くのブラウザーは単一行のドロップダウンの代わりに、スクロールするリストボックスを表示します。(単一のselect要素にsize="4" の属性が付与されているのと同じ表示になります。)
表示に関してはモバイルとPCで問題が発生しそうなポイントですね。

ライブラリ

こういう時に先人の力を借りるべくライブラリを探すわけです。
自分が使ったことがあり、PCとandroid,iosで確認した複数選択ができるライブラリは下記になります。

UIライブラリ1: https://materializecss.com/select.html

UIライブラリ2: https://bulma.io/documentation/form/select/

React用UIライブラリ: https://material-ui.com/demos/selects/

Vue用UIライブラリ: https://vuetifyjs.com/ja/components/selects/

jQueryプラグイン: https://select2.org/

どれも優秀なライブラリーですが、各ユーザーのデバイスでの慣れや一貫性を考えると、モバイルでのネイティブのUIには劣ってしまうなーと感じます。(bulmaに関してはスタイルをつけているだけなので、モバイルはいいけど、PCでの操作と表示の問題が発生します。)

なぜブラウザのデフォルトUIを求めるのか

見た目にこだわって選択したライブラリが
・思っていたものよりも高機能でコードサイズが大きかった経験ないですか？
・使い心地がPCもしくはモバイルでいまいちだった経験ないですか？
・O(N^2)で計算時間が増加しパフォーマンスが劣化した経験はないですか？
・機能性を追求して結局求めていたものはデフォルトのUIだったみたいな経験ないですか？

作るものによるとは思いますが、基本的にかっこいいからとか可愛いからという理由で自分はUIはなるべくサードパーティを使いたくないですね。
各ユーザーのデバイスでの慣れや一貫性をアプリのレイヤーではなくOSのレイヤーで考えるとブラウザのデフォルトのUIで完結している場合も多い思うんです。

また、ブラウザのデフォルトのUIは安定しているし、パフォーマンス的に考えられていたり、キーボードのショートカットがきちんと割り当てられているので、表面上の「映え」よりも結果的にUXに優れています。

デフォルトUIが見た目的に嫌いでも、スタイリングすればいいのです。本当にライブラリは必要ですか？
UIフレームワークで最近人気の「Bulma」ってありますがスタイルを変えているだけなので、デフォルトの挙動に対してスクリプトで変なことしてないので好きです。

どうなってほしいのか(動くサンプルコードあり)

モバイルに関しては不満がないので、PCの場合だけ少し変えてみたいと思います。
先ほどあげたように

操作が少し難しい

表示が変わる

を改善します。

単一の選択肢の際のselect要素をベースに、アクティブになった時に複数選択のリストボックスを表示してみたいと思います。また、クリックすることで選択のオンオフを切り替えられるようにします。

勢いで書いたのでクロームでしか試していません。一応タッチデバイスではデフォルトのUIが出るようにしています。

動作

コード
https://stackblitz.com/edit/native-multiple-select?file=index.js

まとめ

・多分ブラウザの下位互換や歴史的にUIが変更されることはないと思うので結局自分でライブラリか何かを作るしかないんだろうねー
・ひさびさにDOMを触って昔を思い出した
・Reactなどでラップして小さいコンポーネント作ろうかなと思った

　 Tweet
Qiitaで続きを読む

20190512のHTMLに関する記事は3件です。

転生したらGoogleボットだった件

やれやれ、ワイは蘇生した。

それは昨日のこと

しかし何かが違う

ハリー先輩もいた

ここは検索エンジン

クローリング開始

しばらくして、ハリー先輩のところへ帰る

解析開始

ハスケル子も転生していた

ここで目が覚める

気を取り直してマークアップ

しかし5分後

Bootstrapのnavbarで右寄せにしたいけど、mr-autoが効かないときの対処法

はじめに

公式のやり方じゃ適用されなかった、、、

Bootstrapをつかったナビゲーションバーの作り方

解決策：`div`タグで無理やり左寄せと右寄せに分ける

私がHTML の <select> 要素 multipleに求めること(動くサンプルコードあり)

HTML の要素 multiple

はじめに

モバイル

PC

操作が少し難しい

表示が変わる

ライブラリ

なぜブラウザのデフォルトUIを求めるのか

どうなってほしいのか(動くサンプルコードあり)

まとめ

日付別

タグ一覧

20190512のHTMLに関する記事は3件です。

転生したらGoogleボットだった件

やれやれ、ワイは蘇生した。

それは昨日のこと

しかし何かが違う

ハリー先輩もいた

ここは検索エンジン

クローリング開始

しばらくして、ハリー先輩のところへ帰る

解析開始

ハスケル子も転生していた

ここで目が覚める

気を取り直してマークアップ

しかし5分後

Bootstrapのnavbarで右寄せにしたいけど、mr-autoが効かないときの対処法

はじめに

公式のやり方じゃ適用されなかった、、、

Bootstrapをつかったナビゲーションバーの作り方

解決策：divタグで無理やり左寄せと右寄せに分ける

私がHTML の <select> 要素 multipleに求めること(動くサンプルコードあり)

HTML の 要素 multiple

はじめに

モバイル

PC

操作が少し難しい

表示が変わる

ライブラリ

なぜブラウザのデフォルトUIを求めるのか

どうなってほしいのか(動くサンプルコードあり)

まとめ

日付別

タグ一覧

解決策：`div`タグで無理やり左寄せと右寄せに分ける

HTML の要素 multiple