カテゴリーアーカイブ HTML

村上 著者:村上

【React】onClickが呼び出されたときに任意の値の引数を渡す

React の書き方に未だに慣れていないところがあるので、まとめ。
今回は、onClick で呼び出した関数に、任意の引数を渡す方法です。

参考にさせていただいた記事はこちらから。

【React】イベントハンドラで引数を使いたい【備忘録】 – Qiita
https://qiita.com/tsuuuuu_san/items/73747c8b6e6e28f6bd23

 

上記の記事内でも書かれていますが、Reactの場合、下記のように書いても動きません。

sample(num) {
    // 行いたい処理
}

render() {
    return (
        <div>
            <button onClick={this.sample(100)}>ボタン</button>
        </div>
    );
}

記事によると、引数は渡せたものの、画面描画のたびに押していないはずのボタンの関数が実行されたとのことです。

で、解決策としては、下記のような書き方があるとのこと。
一つ目がこちら。

<button onClick={ () => this.sample(100) }>ボタン</button>

しかし、上記の方法だと、描画のたびに関数を作成することになるため、あまり良くない書き方だそうです。

二つ目がこちら。

<button onClick={ this.sample.bind(this, 100) }>ボタン</button>

何故動くのかは分かりませんが、とにかく動きました、とのこと。
引数が一つであればすっきりとしているので、個人的には好きな書き方ですね。
ですが、やはり何故動くかわからないものを使うのは少々怖いので、使用は見合わせかな。

三つ目がこちら。

sample(e) {
    console.log(e.currentTarget.getAttribute('data-num'));  // 100
}

render() {
    return (
        <div>
            <button onClick={this.sample} data-num="100">ボタン</button>
        </div>
    );
}

こちらでは、HTML5 から導入された、カスタムデータ属性を使用しています。
これは無理矢理感がなくて一番きれいかな、と思いますね。
ということで、今後は3番目のカスタムデータ属性を利用しようと思います。

 

以上、Reactで関数に引数を渡す方法でした。
と言うか、いい加減にReactの書き方に慣れたい…。頑張ります。

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

【HTML】様々な形式のコンテンツを埋め込めるobject要素

実際に使うかは分かりませんが、便利そうなので自分のための備忘録としてまとめ。
外部リソースをページに埋め込めるobject要素についてです。

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

HTML5/埋め込み/外部リソースを埋め込む – TAG index
https://www.tagindex.com/html5/embed/object.html

 

こちらの要素は下記のように使います。

<object data="[埋め込みたいデータのURL]" type="[データのMIMEタイプ]"></object>

必須項目はこれだけ。
なお、data属性とtype属性は、どちらか1つは必ず指定しなければいけないとのことです。

また、下記のように複数の param を指定することもできます。

<object data="example.swf" type="application/x-shockwave-flash" width="300" height="150">
    <param name="movie" value="example.swf">
    <param name="quality" value="high">
    <param name="bgcolor" value="#ffffff">
</object>

こちらの object要素の属性には typemustmatch というものがあり、こちらを指定した場合、data 属性で指定したコンテンツと type 属性で指定したMIMEタイプが一致する必要があります。
コンテンツを厳密に指定したい場合は、こちらを使うと良さそうですね。

 

なお、参考にさせていただいたサイトでは、他の要素との比較についての記載もありました。
画像やHTMLを埋め込む場合は、それぞれ img要素ifreme要素 を使った方が良いとのこと。
対して、動画・音声を埋め込む場合は、video要素audio要素 は利用できるファイル形式が限られていますが、object要素は、それよりも多くのファイル形式を埋め込むことが可能らしいです。
video要素 は以前紹介しましたが、再生するファイル形式によっては object要素を検討してもいいかもしれませんね。

 

以上、object要素についての簡単なまとめでした。

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

【HTML】Content-Security-Policyについての私的簡易まとめ【Cordova】

タイトル通り、本日の記事は私のための備忘録です。
たまに読み方が分からなくなり、どういう設定なのか解読できないことがあるので、その対策としてまとめ。

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

Cordova アプリの Content-Security-Policy 設定について – Corredor
http://neos21.hatenablog.com/entry/2017/12/27/080000

 

まず、「Content-Security-Policy」とは「クロスサイトスクリプティング (XSS) やデータインジェクション攻撃などのような、特定の種類の攻撃を検知し、影響を軽減するために追加できるセキュリティレイヤーです。」とのこと。
上記の参考サイトでは、「サーバサイドからクライアントサイドのブラウザに対して「このコンテンツはこういう範囲で扱っていいよ (それ以外の扱い方はしないでね)」というポリシーを伝えることで、クロスサイトスクリプティングなどの脆弱性攻撃を軽減するために設定する。」とありました。
こちらの説明の方が分かりやすいですね。

では早速簡易まとめ。
まず、default-srcです。
これは名前のとおり、基本的な設定を指定することができ、‘self’ は自身のホストを、* はすべてのホストへのアクセスが許容されます。
なお、Cordova の環境の場合、プラグインが動作するためには gap: プロトコルが必要とのことなので、必要に応じて gap: も追加します。

記述方法はそれ以外も同じで、style-srcimg-srcmedia-src など、それぞれ定義したい項目ごとに記述します。

ちなみに、私の環境では下記のような指定になっています。

<meta http-equiv="Content-Security-Policy" content="default-src 'self' data: gap: https://ssl.gstatic.com 'unsafe-eval'; style-src 'self' 'unsafe-inline'; media-src *; img-src 'self' data: content:; connect-src *;">

‘unsafe-inline’ はインラインのCSSやJavaScript を有効にするもので、これがないと CSS、JavaScript が有効にならないので追加します。

とりあえずは、このあたりまで分かっていれば基本的なところだけは大丈夫のはず…?
下記のサイトに記述例が記載されている箇所があるので、こちらも参考になります。

コンテンツセキュリティポリシー (CSP) – HTTP|MDN
https://developer.mozilla.org/ja/docs/Web/HTTP/CSP

 

以上、Content-Security-Policy についての簡易まとめでした。

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

【HTML】標準のHTMLから動画を再生するための<video>タグ

実は使ったことがなかったので、使い方を簡単にまとめ。
動画を再生する際に使用する、<video>タグです。
Flashなどのプラグイン導入が不要で、手軽に動画を扱うことができます。

 

実装はとても簡単で、下記のように指定するだけ。

<video src="[動画ファイルのパス]"></video>

ほどんど <img>タグの感覚で使えます。

また、下記のような指定をすることで、その再生できるファイルの候補をいくつか指定することもできます。

<video>
  <source src="[動画ファイル1.mp4]">
  <source src="[動画ファイル2.ogv]">
</video>

上記のように <source>タグを使い、複数の動画ファイルを指定できます。
ブラウザは、上から順に再生可能な動画データを再生するので、仮に mp4が再生できなくても、その次の orv を再生してくれます。

また、この<video>タグにはいくつかの属性があります。
まず autoplay属性で、こちらはその名のとおり、自動で動画を再生してくれます。
次に、preload属性で、ウェブページを読み込んだ時点で動画を裏側で読み込みをしてくれます。
こちらはデフォルト値は auto で、一般的なブラウザでは、特に明記しなくてもあらかじめ読み込みをしてくれます。
もし、事前読み込みを禁止したい場合は preload="none" を指定します。
controls属性を指定すると、再生・一時停止・再生位置の移動・ボリューム などのメニューを表示するようにしてくれます。
最後に poster属性で、これは指定した動画ファイルが再生できなかった時に表示する画像を指定できます。
これは、<img>タグのalt属性のようなイメージですね。

 

以上、HTMLで動画の再生をする時に使える <video>タグのご紹介でした。
Youtubeの埋め込みの印象が強く、動画の再生=ifremeというイメージがあったのですが、こんな簡単に実装できたのですね。

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

様々なHTMLショートコードを公開しているdCodesの紹介

dCodes is a comprehensive HTML framework with over 1500+ template shortcodes.
Build next generation, feature rich websites rapidly! Just copy ‘n’ paste hosted codes!

引用元:Template Shortcodes – dCodes Framework v2
 dCodesは様々なテンプレートショートコードを含むHTMLフレームワークです。Template Shortcodes – dCodes Framework v2には1500以上のコード例が載っており、これらの例をコピペしていい感じに配置するだけで、豊富な機能を持ったwebページを簡単に早く作れます。

 上の画像はショートコードが載っているページの一つです。赤丸の部分からコードを持ってきてコピペでページに用いるパーツを増やします。CSS、JS部は主にCDNを用います。このCDNは月間トラフィック1000万まで無料で使えます。個人で使う分にはよっぽどな使い方をしない限り無料枠に収まるでしょう。dCodesは単にデザインや機能の参考としても十分有用です。

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

Vue.jsの単一ファイルコンポーネント

 Vueはwebページを部分部分に分け、管理することができるJavaScriptフレームワークです。Vueはコンポーネントという単位で、下の画像の四角に当てはまる部分それぞれのHTML、JS、CSSを管理します。小さな四角を集めて大きな四角を作る形です。この手法は関数を小さく分割し、繋げて、積み重ねる、という手法に似ており私は大変好みです。

 単一ファイルコンポーネントはこのコンポーネントを一ファイル一コンポーネントで扱う仕組みです。大本のbodyからtemplateがtemplateを呼び、大きなwebページを管理しやすく作ります。具体的な1コンポーネントコードは例えば次の画像です。

 template内にHTML、script内にJS、style内にCSSときれいにわかれて一つのパーツを作れます。この分割によって改良されたことがシンタックスハイライト、文字の色分けです。HTML中にJS、CSSを直書きしようとした場合、3言語の文法が入り乱れて実に読みにくいです。ここからここまでJS、ここからここまでCSS、という区分で背景色を色分けするエディタはありましたが、余分に色を使う、短文が入ると斑模様になって結局分かりにくい、ということになりました。また、細かい単位、パーツ単位での単体テストが容易になりました。Vueは管理しやすく、記述しやすい便利なフレームワークです。

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

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)