カテゴリーアーカイブ HTML

著者:杉浦

IDEによる補完入力、外部ファイル参照

 IDE(Integrated Development Environment)は統合開発環境と呼ばれる便利な機能を多く備えたエディタです。エディタの上にはコンパイラ、バージョン管理、実行環境、などの機能が搭載されています。私見ですが数多くの機能を備えていようと、一番の基礎はコーディングを行うエディタです。IDEは補完入力と外部ファイル参照によって素早く快適なコーディングを実現してくれます。
 これらの機能が有効に働く顕著な言語がhtmlです。htmlのコードを記述する時、手打ちでいちいち行っていては非常に長い時間がかかります。例えば、aというタグを表す時、多くはを記述します。必須の属性hrefがあるため、’a’に比べて長い文字数が必要になります。IDEはこの開きタグ、閉じタグ、属性を含めた完成系を’a’,補完入力実行とするだけで記述してくれます。
 
 大体、補完入力実行という命令はctrl,tab,spaceあたりのキーに繋がっています。上の動画はa,tabキーの2打のみの動作です。
 開きタグ、閉じタグに同じ文字列を使用しているということは同じ修正を二度行う必要があるということです。IDEはこれも省略してくれます。
 
 上の動画でdivと入力した後にいくつか候補が出ています。この候補にカーソルを合わせて補完命令を実行するとその候補が記述されます。divがdivergenceになる感じです。よく使うものであればスニペットも標準で登録されています。
 
 外部ファイル参照が良く役に立つのはcssライブラリ関連です。styleがclassに紐づいているのですがclassの種類があまりにも多く、ページをめくる様な調べ方はいちいちしていられません。IDEの外部ファイルの参照で今そのclassがどのstyleに紐づいているかがわかります。

 html以外の言語にもこれらの機能が対応しています。PHPDocもこの系統の機能で容易に参照できます。

  • この記事いいね! (0)
著者:杉浦

webページ評価ツールLighthouse

 Lighthouse – Chrome ウェブストア
 Lighthouse によるウェブアプリの監査 | Tools for Web Developers
| Google Developers

 Lighthouseはwebページの評価を行ってくれるツールです。お手軽な使い方は上記リンクのウェブストアからChrome拡張機能としてのLighthouseを導入し使用することです。オプションもコマンドも必要なく、ただ起動するだけで監査を行い、結果を出力します。 Lighthouseの評価は下図の様にPerformance,ProgressiveWebApp,Accessibility,Best Practices,SEOに分かれています。

 それぞれ、Performanceはおおよそ速度、データ量関連に問題が無いか、ProgressiveWebAppはネイティブアプリのようにふるまえるか、Accessibilityはわかりやすさ、Best Practicesは良いとされるやり方をしているか、SEOは検索エンジン最適化がされているか、です。画像の更に下の方には細分化された指摘がいくつもあります。
 Lighthauseの特徴は、googleが奨励しているPWAとしての評価がgoogle自身の規定でできる、という点です。またSEOは大概眉唾物ですが検索エンジン大手のgoogleが提供するツールが評価するSEOですから多少は当てになるでしょう。
 これが高得点ならばよいwebページというわけはないです。PWAは特に顕著でアプリである必要のないページは多々あります。基本的にぱっと見の第一印象がどうか、という点から評価がなされます。ただ高得点のページならば低得点のページよりも快適に使用しやすいのではないでしょうか。
 また、Lighthouseの指摘により今まで知らなかったより良いやり方を知ることもできます。

  • この記事いいね! (0)
著者:杉浦

多くのcdnリンクを持つcdnjsの紹介

 cdn(contents download link)はjs,cssのライブラリを簡単に読み込む手法です。オープンソース配信サービス、Google Hosted Librariesの紹介で紹介したGoogle Hosted Librariesの様にcdnは多くの場所で配信されています。cdnjsはそのようなcdnの配信リンクをまとめて検索できるサイトです。
 下の画像の様に検索してリンクをコピーするだけでとりあえず使えます。特定のフォーマットで単一のデータを返してくれるAPIも備わっています。
 

 また、cdnjs上でリンクがコピーされた回数をランキングしています。人気が高く、汎用性の高いライブラリが上位に連なっています。jqueryは格別ですね。

  • この記事いいね! (0)
asaba 著者:asaba

mapboxのポップアップについて

今回は、mapbox上でピンをタッチすると、画像がポップアップとして出てくるコードを紹介します。

 

ポップアップを付けるときに、画像を撮影した場所にピンを付与して、それをクリックすると

画像がポップアップとして出てくる機能を追加する作業をしていたので備忘録として載せておきます。

 

ざっくりですが説明します。

ポップアップを表示するメソッドを作ったあとに


var el = document.createElement('div');

でピンのオブジェクトを生成します。

 

その後に

 
popup = new mapboxgl.Popup({offset: [16, 0]})

で、ポップアップオブジェクトを生成して使用可能にします。

 

次に、画像をポップアップとして扱うコードなのですが

.setHTMLメソッドを使って表示します。

本来は、htmlの文字列を表示する役割ですが、ここでは

 

 
src = '+image+'

引数のimageを取って中の画像のurlを渡すことができます。

 

ピンが複数立っている時は、そのピンをクリックするときに引数に画像のurlを持たせて

そのurlに合わせて表示するポップアップを変えていると考えるとわかりやすいかもしれません。

 

後は

setLngLat([lmg,lat])

 

 

で、引数のlatとlngを渡せば撮影した場所にピンが立ちま

す。

以上ですが、ここでは肝だけ説明させていただきました。

 

mapboxは柔軟性が高く、細かい箇所まで地図をカスタマイズできるので

慣れてきたらシムシティ感覚で楽しくなってくると思います!

  • この記事いいね! (0)
asaba 著者:asaba

JSXの中で即時関数を使ってみた

Reactでコードを書いていると、jsxの中でコードを埋め込んでコンポーネントを動かしたい時があります。自分は即時関数を使って処理を書きました。

 

 

即時関数は通常使う関数と違い、いちいち変数を宣言して関数を格納しなくても記述した時点で使うことができます。

 

ここでは少し使い方が異なりますが、自分の中での即時関数の解釈です。

 

コードの初めと終わりに{}で関数を内包していますが

java scriptで通常通り(()から即時関数を書き始めると関数と認められずエラーになります。

 

Reactを使ってJSXをいじりたいときはこの方法で記述します。

ユーザーの特定するもの(会員番号など)を値として受け取り

その値に沿ってコンポーネントを変化させたいときは便利です。

jsxを中からいじる方法は他にもあるかもしれないので

発見次第投稿したいと思います。

  • この記事いいね! (0)
著者:杉浦

HTMLの勧告とCSSの仕様

 HTML、CSSを始めとする様々なWWW(World Wide Web)上で用いられる技術の標準化を進める団体としてW3C(World Wide Web Consortium)という団体があります。W3Cの活動にはWHATWF(Web Hypertext Application Technology Working Group)が開発しているHTMLの仕様の勧告とW3C自身が開発しているCSSの仕様書の公開も含まれています。
以下はW3Cの公開している資料へのショートカットです。

HTML & CSS – W3C:HTMLとCSSについての基点になるページ
All Standards and Drafts – W3C:文字通り、全ての標準と草稿。仕様や技術文書が色々

 和訳がない文書が多数、文章量が多量、といったため読むのは結構な苦労ですが、情報はとても多く、ブラウザ依存の問題以外は網羅されているはずです。詳しく調べたい時にあたる資料として使えます。

  • この記事いいね! (0)
村上 著者:村上

【CSS】:activeなどの疑似クラスがスマートフォンで効かない時の対処法

クリックした時や、要素の上にマウスを乗せたときのスタイルを指定できる疑似クラスはとても便利でよく使いますが、今回スマートフォンではスタイルが反映されないという現象に遭遇しました。
しばらくCSSの書き方が間違っているのかと悩みましたが、どうやら関係なかったみたいです。
で、対処法がこちら。

 

a:active, a:hover {
    background-color: red;
}
<a href="[リンク先]" ontouchstart="">リンクはこちら</a>

疑似クラスを指定した要素、今回は、aタグに対して、ontouchstart属性 を追加するだけです。
これを追加することにより、:active:hover が有効になります。
ちなみに、:active は要素がタップされたとき、ここで指定したスタイルが反映されますが、:hover は、マウスオーバー時ではなく、要素をタップ後、別の要素がタップされるまでの間、指定した要素が反映されます。

参考にさせていただいたサイトはこちらから。

:hoverに設定したCSSがスマホで反応しない時の対処|ビギナーズハイ
http://beginners-high.com/css-hover/

なお、追加する属性は、ontouchstart 以外にも、ontouchendontouchmove でも良いとのこと。

 

対処法としては以上です!
予想以上に簡単でしたので、同じことでお悩みの方は、是非お試しください。

  • この記事いいね! (0)
村上 著者:村上

【HTML】フォームデータの送信先を指定する「formaction」属性

デバックのためにコード見ていて、使ったことがない属性だったので、覚え書きとして。
HTML の Button要素である、「formaction」属性についてです。
なお、今回参考にさせていただいたサイトはこちら。

formaction属性 ≪ button要素 ≪ フォーム ≪ 要素 ≪ HTML5入門
http://html5.cyberlab.info/elements/forms/button-formaction.html

 

私がよく使うFormの書き方ですが、


&lt;form action="データ送信先" method="post"&gt;
    &lt;input type="text" name="name"&gt;
    &lt;input type="email" name="email"&gt;
    &lt;input type="submit" name="submit" value="送信"&gt;
&lt;/form&gt;

今まで、上記のように書いていました。

が、今回後輩君が書いたコードの中に、下記のような記述を発見。



&lt;form action="[データ送信先URL]" method="post"&gt;
    &lt;input type="text" name="name"&gt;
    &lt;input type="email" name="email"&gt;
    &lt;button type="submit" formaction="[データ送信先]"&gt;送信&lt;/button&gt;
&lt;/form&gt;


butoon要素に、見慣れない formaction という属性があります。

 

この「formaction」ですが、HTML5で新たに追加されたもので、フォームデータの送信先URLを指定するときに使う属性とのこと。
で、注意したいのが、button要素の formaction属性 で定した送信先URLは、form要素の action属性 で指定した送信先URLよりも優先されること。
そのため、下記の場合は、botton要素 で指定した「送信先URL2」が優先されます。



&lt;form action="[データ送信先URL1]" method="post"&gt;
    &lt;input type="text" name="name"&gt;
    &lt;input type="email" name="email"&gt;
    &lt;button type="submit" formaction="[データ送信先2]"&gt;送信&lt;/button&gt;
&lt;/form&gt;


私の場合、うっかり違うURLを指定してしまい、違う送信先に送られる!?ということをやらかしそうです。
それを回避するためには、冒頭で挙げた記述方法を使うのが良さそうですね。

 

ということで、見慣れない formaction属性 についてのまとめでした。
これ便利!使おう!というよりも、こんな属性あるよ!という意味合いの方が強いまとめでした。

  • この記事いいね! (0)
村上 著者:村上

【HTML5】入力値の形式を正規表現で指定できる「pattern」属性

今まで、正規表現って PHP で行っていたのですが、HTML5 なら HTML 側で入力値をチェックできるとのこと。
使う機会がなかったので、今まで知りませんでしたが、これは便利そう。
ただ、「送信」などのボタンを押した後に、入力値のチェックを行うので、入力自体は出来てしまうんですよね。

 

使い方は、下記の通りです。

<form>
    <input type="text" name="userid" pattern="^[0-9A-Za-z]+$">
    <input type="submit" value="送信">
</form>

input タグに pattern 属性があるので、ここに正規表現を記述するだけです。
なお、正規表現で記述した文字列のパターンに一致しない場合は、下記のようにエラーメッセージが表示されます。

わざわざエラー文を表示する手間が省けて、これ良いですね!
見た目が買えられないのが難点かなとも思いますが、シンプルでわかりやすいので、このデザインでも問題なさそう。

と、いうことでHTMLで入力チェックをする方法でした。
…正規表現、覚えよう…。

 

最後に、よく使うのにすぐ忘れる、メールアドレスを判断するための正規表現をメモ。

// メールアドレス
^[0-9a-z_./?-]+@([0-9a-z-]+\.)+[0-9a-z-]+$
  • この記事いいね! (0)
村上 著者:村上

【CSS】要素に指定した position: fixed が効かない時の対処法

そこまで長時間悩んだわけではないのですが、ちょっぴりハマったのでご紹介。

とある要素に、下記のようにCSSを指定していたのですが、スクロールした際に、親要素の下部にくっついて動くような挙動になってしまいました。

position: fixed;
bottom: 0;
left: 0;

本来は画面の下部にくっついて動かないでいてほしかったのですが、気が付けばページ自体に追従する形になっており、そこそこ慌てました。
が、親要素を確認しても、特に変な記述は見つからず…。

 

で、色々調べてみたところ、bodyに指定した下記のCSSが原因でした。

transform: translateZ(0);

親要素ばかりみていたので、これは盲点でした。

どうやら、子要素に position: fixed を指定した時、親要素に transform が指定されていると、position: fixed が希望した通りの挙動をしてくれなくなるみたいでした。

対処法としては、body に指定した transform を削除するか、下記のように !important を用いて無理矢理上書きするかですね。

// transform: translateZ(0);
// transform を解除

transform: none !important;
// !important を使って none で強制的に上書き

力業感が否めませんが…正常に動くようになったので、今回はこれで問題なしということにしておきます。

position を指定した要素の挙動がおかしくなった場合は、親要素もしくは body に transform が指定されていないか確認してみてください。

  • この記事いいね! (2)