はじめに JSを勉強している中で、「HTMLImageElementインターフェース」というモノを知り、最初は何を言っているのかさっぱりわからなかったところから少しづつ理解したこととまとめてみます。 HTMLImageElementとは HTMLImageElement インターフェースは、 タグに相当します。 エレメントの一種です。 画像を読み込んで表示するための機能がまとまっています。 つまり、JS上で <img>タグ に相当するモノ(オブジェクト)を作成し、htmlに反映できるだと理解しました。 こちらのサイトがわかりやすかったので引用させていただきました。 https://hakuhin.jp/js/image.html どんな感じに使うのか 使い方：Image() コンストラクタを使用する コンストラクタを使用 // HTMLImageElement オブジェクトを作成する var image = new Image(); 簡単にボタンクリックで画像切り替え処理を作成しました。 See the Pen LYEBEGd by RS (@shimamar) on CodePen. まとめ 簡単な処理を作成してみましたが、まだまだ理解仕切れてないことが多いなと痛感しました。 もっと画像をJSで扱う動作を勉強してもっと臨機応変なコードを描けるようにしたいと改めて思いました！ 勉強をしていく上でもっと良い方法や内容があれば更新していきます。
JSを勉強している中で、「HTMLImageElementインターフェース」というモノを知り、最初は何を言っているのかさっぱりわからなかったところから少しづつ理解したこととまとめてみます。
HTMLImageElement インターフェースは、 タグに相当します。 エレメントの一種です。 画像を読み込んで表示するための機能がまとまっています。
つまり、JS上で <img>タグ に相当するモノ(オブジェクト)を作成し、htmlに反映できるだと理解しました。
<img>タグ
こちらのサイトがわかりやすかったので引用させていただきました。
https://hakuhin.jp/js/image.html
// HTMLImageElement オブジェクトを作成する var image = new Image();
簡単にボタンクリックで画像切り替え処理を作成しました。
See the Pen LYEBEGd by RS (@shimamar) on CodePen.
簡単な処理を作成してみましたが、まだまだ理解仕切れてないことが多いなと痛感しました。 もっと画像をJSで扱う動作を勉強してもっと臨機応変なコードを描けるようにしたいと改めて思いました！ 勉強をしていく上でもっと良い方法や内容があれば更新していきます。
ある方からLPコーディングの件でご教授いただいた時に、 「ちなみに私の場合はデフォルトでRetinaディスプレイにも対応させているので1倍と2倍のサイズで書き出すことが多いです。」 って言われて。 ？？？ だったんですよね。 いや、Retinaディスプレイのことは知ってましたよ！！ ・・・あのアップルのきれいなやつですよねwww 結論 ２つのサイズの画像を用意してディスプレイに対応した方の画像を読み込ませる コーディング１例(1xに普通ディスプレイ用、2xにRetinaディスプレイ用） <img src="img/hoge.jpg" srcset="img/hoge.jpg 1x,img/hogehoge.jpg 2x" alt="hogeImage"> 準備する画像サイズ 普通のディスプレイ用の画像が1000×1000だった場合、 Retina用は500×500のサイズに「縮小」した物を準備する ？？？な状態で調べた内容 Retinaディスプレイ（英語：Retina Display）は、アップル製品のうち、100〜160ppi程度であった従来のディスプレイ解像度の、およそ倍の解像度、高画素密度のディスプレイを指す名称である。「Retina」（レティナ）は英語で「網膜」という意味で、画素が細かく人間の目で識別できる限界を超えている[1]、ということから命名された。 Wikipedia-Retina ああ、要するに今まであったディスプレイと同じサイズだけど、 だいたい倍くらいの細かさであのつぶつぶピクセルが詰まってるみたい ふむふむ っで、本来は同じサイズの画像を表示すると小さくなるはずなんですよね。 ルービックキューブを想像してください。 - 従来のディスプレイ - 画面いっぱいのルービックキューブ（画面に縦３つのピクセル、横３つのピクセルがある状態） - Retinaディスプレイ - 画面の面積の1/4の面積のルービックキューブ(画面の縦に６つのピクセル、横に６つのピクセル。なお１つのピクセルの縦横長は従来ディスプレイの半分） めっちゃわかりやすい絵を書いたので一緒に載せときますね でもこれだと画像とか表示させるものが小さくなるので都合が悪いですよね。 なのでRetinaさんが勝手に縦横倍のサイズで表示するんですよ。 この「勝手に」ってのがアレでして、 今まで古い携帯とかで撮った写真（特にガラケー自時代に撮った写真とか）、 拡大したらどんな感じになるか、経験ありますか？ めっちゃ汚いですよね。 そういうことが起きちゃうんですよね。 なので、 別に縦横２倍に拡大される事を考えて、こっちで先に２倍に縮小した画像を準備しておいて、 それをRetinaさんに渡すんです。 じゃあ画像は元のサイズに戻るだけなので、汚い表示にはならないってことなんですね。 Retinaキレイダナーとは思ってたんですが、 ここまで調べてちゃんと理解しました。 ちなみに、その小さく準備した画像だけだと従来ディスプレイでは逆に小さいままなので、 Retinaさんと普通ディスプレイさんで渡すものを変えます。 imgタグのsecsetについて詳しくはこちら レスポンシブ画像-MDN https://developer.mozilla.org/ja/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images
ある方からLPコーディングの件でご教授いただいた時に、
「ちなみに私の場合はデフォルトでRetinaディスプレイにも対応させているので1倍と2倍のサイズで書き出すことが多いです。」
って言われて。
？？？
だったんですよね。
いや、Retinaディスプレイのことは知ってましたよ！！
・・・あのアップルのきれいなやつですよねwww
<img src="img/hoge.jpg" srcset="img/hoge.jpg 1x,img/hogehoge.jpg 2x" alt="hogeImage">
普通のディスプレイ用の画像が1000×1000だった場合、 Retina用は500×500のサイズに「縮小」した物を準備する
Retinaディスプレイ（英語：Retina Display）は、アップル製品のうち、100〜160ppi程度であった従来のディスプレイ解像度の、およそ倍の解像度、高画素密度のディスプレイを指す名称である。「Retina」（レティナ）は英語で「網膜」という意味で、画素が細かく人間の目で識別できる限界を超えている[1]、ということから命名された。 Wikipedia-Retina
Retinaディスプレイ（英語：Retina Display）は、アップル製品のうち、100〜160ppi程度であった従来のディスプレイ解像度の、およそ倍の解像度、高画素密度のディスプレイを指す名称である。「Retina」（レティナ）は英語で「網膜」という意味で、画素が細かく人間の目で識別できる限界を超えている[1]、ということから命名された。
Wikipedia-Retina
ああ、要するに今まであったディスプレイと同じサイズだけど、 だいたい倍くらいの細かさであのつぶつぶピクセルが詰まってるみたい
ふむふむ
っで、本来は同じサイズの画像を表示すると小さくなるはずなんですよね。
ルービックキューブを想像してください。 - 従来のディスプレイ - 画面いっぱいのルービックキューブ（画面に縦３つのピクセル、横３つのピクセルがある状態） - Retinaディスプレイ - 画面の面積の1/4の面積のルービックキューブ(画面の縦に６つのピクセル、横に６つのピクセル。なお１つのピクセルの縦横長は従来ディスプレイの半分）
めっちゃわかりやすい絵を書いたので一緒に載せときますね
でもこれだと画像とか表示させるものが小さくなるので都合が悪いですよね。 なのでRetinaさんが勝手に縦横倍のサイズで表示するんですよ。
この「勝手に」ってのがアレでして、
今まで古い携帯とかで撮った写真（特にガラケー自時代に撮った写真とか）、 拡大したらどんな感じになるか、経験ありますか？ めっちゃ汚いですよね。 そういうことが起きちゃうんですよね。
なので、 別に縦横２倍に拡大される事を考えて、こっちで先に２倍に縮小した画像を準備しておいて、 それをRetinaさんに渡すんです。 じゃあ画像は元のサイズに戻るだけなので、汚い表示にはならないってことなんですね。
Retinaキレイダナーとは思ってたんですが、 ここまで調べてちゃんと理解しました。
ちなみに、その小さく準備した画像だけだと従来ディスプレイでは逆に小さいままなので、 Retinaさんと普通ディスプレイさんで渡すものを変えます。
imgタグのsecsetについて詳しくはこちら
レスポンシブ画像-MDN https://developer.mozilla.org/ja/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images
タイトル通り、引用を使うことがあって、ちゃんと理解していなかったので調べた。 結論 コーディング例 （リンク先URLはテストなので存在しません。） <blockquote> <p>ここが引用文だよテストだよ</p> <cite><a href="http://hoge.cooom">hogefugapedia</a></cite><!-- ここに必要に応じて出典元のリンクなんかをいれとくと良い --> </blockquote> ここが引用文だよテストだよ hogefugapedia 感想 ちゃんと書いたらぱくりじゃない 正しくガンガン引用しようとおもいました！ 調べた内容 引用（いんよう、英語：citation, quotation[1]）とは、広義には、自己のオリジナル作品のなかで他人の著作を副次的に紹介する行為、先人の芸術作品やその要素を副次的に自己の作品に取り入れること。 Wikipedia-引用 Wikiから引用してみた。 っで 引用は権利者に無断で行われるもので、法（日本では著作権法第32条）で認められた合法な行為であり、権利者は引用を拒否することはできない[3]。権利者が拒否できるのは、著作権法の引用の要件を満たさない違法な無断転載等に限られる。 Wikipedia-引用 引用は合法とのこと。 （もちろん著作物はだめ） 「パクリ・盗用」と「引用」の差は条件があって 内容の同一性を損なわないこと これは、引用にしたものに改変を加えずにそのまま掲載するということ 引用部分の直後に出典を示し、明瞭区別性を確保すること これは、引用した物はどこにあるものなのか明示しておくということ って感じです 要するに、これはちゃんと別のとこの記事だよってわかりやすく、 またどこのかわかるように書いておくこと。
タイトル通り、引用を使うことがあって、ちゃんと理解していなかったので調べた。
（リンク先URLはテストなので存在しません。）
<blockquote> <p>ここが引用文だよテストだよ</p> <cite><a href="http://hoge.cooom">hogefugapedia</a></cite><!-- ここに必要に応じて出典元のリンクなんかをいれとくと良い --> </blockquote>
ここが引用文だよテストだよ hogefugapedia
ここが引用文だよテストだよ
ちゃんと書いたらぱくりじゃない 正しくガンガン引用しようとおもいました！
引用（いんよう、英語：citation, quotation[1]）とは、広義には、自己のオリジナル作品のなかで他人の著作を副次的に紹介する行為、先人の芸術作品やその要素を副次的に自己の作品に取り入れること。 Wikipedia-引用
引用（いんよう、英語：citation, quotation[1]）とは、広義には、自己のオリジナル作品のなかで他人の著作を副次的に紹介する行為、先人の芸術作品やその要素を副次的に自己の作品に取り入れること。
Wikipedia-引用
Wikiから引用してみた。
っで
引用は権利者に無断で行われるもので、法（日本では著作権法第32条）で認められた合法な行為であり、権利者は引用を拒否することはできない[3]。権利者が拒否できるのは、著作権法の引用の要件を満たさない違法な無断転載等に限られる。 Wikipedia-引用
引用は権利者に無断で行われるもので、法（日本では著作権法第32条）で認められた合法な行為であり、権利者は引用を拒否することはできない[3]。権利者が拒否できるのは、著作権法の引用の要件を満たさない違法な無断転載等に限られる。
引用は合法とのこと。 （もちろん著作物はだめ）
「パクリ・盗用」と「引用」の差は条件があって
要するに、これはちゃんと別のとこの記事だよってわかりやすく、 またどこのかわかるように書いておくこと。
Vue.jsの開発者的メリット HTML, JavaScript, CSSを1つのファイルに記述するというのがシンプルで良い scopedが便利 コードが複雑化しにくい そして思ったのです。 これって普通のアプリケーションにある程度応用できそう。 実際に考えてみる ちょっと考えてみました。方針としては、 仕様に応じてBladeのディレクトリ構成をシンプルに考える JavaScript, CSSはBladeのディレクトリ構成に合わせる。 影響範囲は対応するBladeファイル内にとどまるように気をつける。 Bladeファイルのディレクトリ構成 サンプルです。実際には画面仕様などにより異なるはずです。 ルール views/直下は、layouts/および、メニューに対応するディレクトリ（menus/を作ろうと思ったが階層が深くなりすぎるのが嫌なので却下） メニューごとのディレクトリには、ページに対応するbladeファイルがある メニューごとのディレクトリには、parts/があり、ページを構成する部品を格納する。 formやbuttonなどの部品はparts/に格納する。 ページに対応するファイルからは、parts/配下のファイルをincludeする。 parts/配下のファイルからは、parts/配下のファイルををincludeする ページに対応するファイルから、parts/配下の部品をincludeしない 同階層のファイルをincludeしない resources/ - views/ - layouts/ - app - parts/ - header - footer - home/ - index - parts/ - eye_catching - new_product - product/ - index - show - edit - parts/ - product - details - account/ - show - edit - parts/ - table - parts/ - forms/ - radio - checkbox - buttons/ - search - submit - delete - flash_message JavaScriptとCSS(Sass)は、Bladeファイルと同じディレクトリ構成 JavaScript, CSS(Sass)はBladeファイルと同じディレクトリ構成とします。 resources/ - js - modules/ - confirm - layouts/ - app - parts/ - header - ... - sass - layouts/ - app - parts/ - header - ... Bladeファイルに、JavaScriptとCSSを記述する。 まず、レイアウトファイル layout/app.blade.php <!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> {{-- CSRF Token --}} <meta name="csrf-token" content="{{ csrf_token() }}"> {{-- title --}} <title>@yield('title', 'laravel app')</title> {{-- 対応するCSSファイル --}} <link rel="stylesheet" href="{{ mix('css/layouts/app.css') }}"> {{-- include先のcssファイルがここに追加される --}} @yield('css') </head> <body> @include('layouts.parts.header') <div id="container"> @yield('content') </div> @include('layouts.parts.footer') {{-- 対応するJSファイル --}} <script src="{{ mix('js/layout/app.js') }}"></script> {{-- include先のJSファイルがここに追加される --}} @yield('js') </body> </html> そして、includeするファイル layouts/parts/header.blade.php @section('css') <script src={{ mix('/js/layouts/parts/header.css') }}> @endsection @section('js') <script src={{ mix('/js/layouts/parts/header.js') }}> @endsection <header> <div>ヘッダー</div> </header> これでOKと思ったのですが、これでは、include先に記述されたJavaScript, CSSが反映されません。 そこで@stack - @pushを利用します。 layout/app.blade.php <head> (省略) {{-- include先のcssファイルがここに追加される --}} @stack('css') </head> <body> (省略) {{-- include先のJSファイルがここに追加される --}} @stack('js') </body> layouts/parts/header.blade.php @push('css') <script src={{ mix('/js/layouts/parts/header.css') }}> @endpush @push('js') <script src={{ mix('/js/layouts/parts/header.js') }}> @endpush <header> <div>ヘッダー</div> </header> これで、include先で記述されたJavaScript, CSSファイルが反映されるようになりました。 ただし、同じファイルを複数回includeすると回数分JavaScript, CSSが読み込まれてしまいます。 home/index.blade.php // deleteボタンを複数回includeすると回数分JavaScript, CSSが読み込まれる。 @include('parts.buttons.delete') @include('parts.buttons.delete') @include('parts.buttons.delete') ですので、1度だけ読み込むように、カスタムディレクティブを設定します。 参考: bladeのcomponent化による再利用 app/Providers/AppServiceProvider.php /** * Bootstrap any application services. * * @return void */ public function boot() { \Blade::directive('pushonce', function ($expression) { $var = '$__env->{"__pushonce_" . md5(__FILE__ . ":" . __LINE__)}'; return "<?php if(!isset({$var})): {$var} = true; \$__env->startPush({$expression}); ?>"; }); \Blade::directive('endpushonce', function ($expression) { return '<?php $__env->stopPush(); endif; ?>'; }); } layouts/parts/header.blade.php @pushonce('css') <script src={{ mix('/js/layouts/parts/header.css') }}> @endpushonce @pushonce('js') <script src={{ mix('/js/layouts/parts/header.js') }}> @endpushonce <header> <div>ヘッダー</div> </header> レイアウトファイルも少し修正します。 includeする前に@stackを記述するとその時点では、pushされるファイルがないので、 include先のファイルが反映されません。 そのため、bodyの閉じタグの直前に記述します。(ここは少し悩ましいところです。。。) 参考: Blade Stacks in Sub-View layout/app.blade.php <head> (省略) // ここだとinclude先のファイルが反映されない {{-- @stack('css') --}} </head> <body> (省略) {{-- include先のcssファイルがここに追加される --}} @stack('css') {{-- include先のJSファイルがここに追加される --}} @stack('js') </body> これで、include先のファイルも反映されるようになります。 なお、CSSは原則そのファイルにしかスタイルが適用されないよう、 スコープを限定するように記載します。 home/index.scss // home/index.blade.php // <div class="home-index"> // <div class="test-class"> // コンテンツ // </div> // </div> .home-index { // スコープを限定する .test-class { } } 以上です。 参考 bladeのcomponent化による再利用 Blade Stacks in Sub-View Blade Templates
そして思ったのです。 これって普通のアプリケーションにある程度応用できそう。
ちょっと考えてみました。方針としては、
サンプルです。実際には画面仕様などにより異なるはずです。
- views/ - layouts/ - app - parts/ - header - footer - home/ - index - parts/ - eye_catching - new_product - product/ - index - show - edit - parts/ - product - details - account/ - show - edit - parts/ - table - parts/ - forms/ - radio - checkbox - buttons/ - search - submit - delete - flash_message
JavaScript, CSS(Sass)はBladeファイルと同じディレクトリ構成とします。
- js - modules/ - confirm - layouts/ - app - parts/ - header - ... - sass - layouts/ - app - parts/ - header - ...
まず、レイアウトファイル
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> {{-- CSRF Token --}} <meta name="csrf-token" content="{{ csrf_token() }}"> {{-- title --}} <title>@yield('title', 'laravel app')</title> {{-- 対応するCSSファイル --}} <link rel="stylesheet" href="{{ mix('css/layouts/app.css') }}"> {{-- include先のcssファイルがここに追加される --}} @yield('css') </head> <body> @include('layouts.parts.header') <div id="container"> @yield('content') </div> @include('layouts.parts.footer') {{-- 対応するJSファイル --}} <script src="{{ mix('js/layout/app.js') }}"></script> {{-- include先のJSファイルがここに追加される --}} @yield('js') </body> </html>
そして、includeするファイル
@section('css') <script src={{ mix('/js/layouts/parts/header.css') }}> @endsection @section('js') <script src={{ mix('/js/layouts/parts/header.js') }}> @endsection <header> <div>ヘッダー</div> </header>
これでOKと思ったのですが、これでは、include先に記述されたJavaScript, CSSが反映されません。 そこで@stack - @pushを利用します。
<head> (省略) {{-- include先のcssファイルがここに追加される --}} @stack('css') </head> <body> (省略) {{-- include先のJSファイルがここに追加される --}} @stack('js') </body>
@push('css') <script src={{ mix('/js/layouts/parts/header.css') }}> @endpush @push('js') <script src={{ mix('/js/layouts/parts/header.js') }}> @endpush <header> <div>ヘッダー</div> </header>
これで、include先で記述されたJavaScript, CSSファイルが反映されるようになりました。 ただし、同じファイルを複数回includeすると回数分JavaScript, CSSが読み込まれてしまいます。
// deleteボタンを複数回includeすると回数分JavaScript, CSSが読み込まれる。 @include('parts.buttons.delete') @include('parts.buttons.delete') @include('parts.buttons.delete')
ですので、1度だけ読み込むように、カスタムディレクティブを設定します。 参考: bladeのcomponent化による再利用
/** * Bootstrap any application services. * * @return void */ public function boot() { \Blade::directive('pushonce', function ($expression) { $var = '$__env->{"__pushonce_" . md5(__FILE__ . ":" . __LINE__)}'; return "<?php if(!isset({$var})): {$var} = true; \$__env->startPush({$expression}); ?>"; }); \Blade::directive('endpushonce', function ($expression) { return '<?php $__env->stopPush(); endif; ?>'; }); }
@pushonce('css') <script src={{ mix('/js/layouts/parts/header.css') }}> @endpushonce @pushonce('js') <script src={{ mix('/js/layouts/parts/header.js') }}> @endpushonce <header> <div>ヘッダー</div> </header>
レイアウトファイルも少し修正します。 includeする前に@stackを記述するとその時点では、pushされるファイルがないので、 include先のファイルが反映されません。 そのため、bodyの閉じタグの直前に記述します。(ここは少し悩ましいところです。。。) 参考: Blade Stacks in Sub-View
<head> (省略) // ここだとinclude先のファイルが反映されない {{-- @stack('css') --}} </head> <body> (省略) {{-- include先のcssファイルがここに追加される --}} @stack('css') {{-- include先のJSファイルがここに追加される --}} @stack('js') </body>
これで、include先のファイルも反映されるようになります。
なお、CSSは原則そのファイルにしかスタイルが適用されないよう、 スコープを限定するように記載します。
// home/index.blade.php // <div class="home-index"> // <div class="test-class"> // コンテンツ // </div> // </div> .home-index { // スコープを限定する .test-class { } }
以上です。
bladeのcomponent化による再利用 Blade Stacks in Sub-View Blade Templates
HarmonyEngineってなんやねん まあ端的に言うと、うちの兄貴が作ろうとしている新しいサービスの実装です。 以下HEと呼称していきますね。人生で初めてこういった記事を書くので下手糞ですがお付き合いください。その際使った技術などのアウトプットのために記事を作成していこうと思います。ブログに書くかQiitaに書くか迷ったのですが、結局Qiitaにしました。 HEの内容 HarmonyEngine、通称HEは普段埋もれてしまっている才能あるクリエイター達を発掘するための新しいサービスのプロトタイプネームです。と兄貴は言っていますが今のところ概要はあんまし掴めてません。でもサービスの内容的にちょっと面白そうなので制作に加わりました。あと、私のTwitterを見ている方ならわかるとは思いますが、将来やりたいことのためのポートフォリオとして有効活用していきたいなと。 ちなみに このサービスの名前は某小説家の中に出てくる名前からとったそうです。まあsteins;gateみたいでカッコいいと思うけどね。 仕様 一応今後のポートフォリオにするために、やりたい言語を詰め込んでいく フロント HTML HTML5 CSS CSS3 Javascript vue.js jquery なお現在js系は頑張って勉強中です・・・ サーバーサイド PHP python django 今のところこれ以外に思いつきません・・・ んじゃ 2020/01/15現在で何も情報がないので書きようがないのですが、これからサービスを構築していこうと思います。がんばるお(^ω^)
まあ端的に言うと、うちの兄貴が作ろうとしている新しいサービスの実装です。 以下HEと呼称していきますね。人生で初めてこういった記事を書くので下手糞ですがお付き合いください。その際使った技術などのアウトプットのために記事を作成していこうと思います。ブログに書くかQiitaに書くか迷ったのですが、結局Qiitaにしました。
HarmonyEngine、通称HEは普段埋もれてしまっている才能あるクリエイター達を発掘するための新しいサービスのプロトタイプネームです。と兄貴は言っていますが今のところ概要はあんまし掴めてません。でもサービスの内容的にちょっと面白そうなので制作に加わりました。あと、私のTwitterを見ている方ならわかるとは思いますが、将来やりたいことのためのポートフォリオとして有効活用していきたいなと。
このサービスの名前は某小説家の中に出てくる名前からとったそうです。まあsteins;gateみたいでカッコいいと思うけどね。
一応今後のポートフォリオにするために、やりたい言語を詰め込んでいく
なお現在js系は頑張って勉強中です・・・
今のところこれ以外に思いつきません・・・
2020/01/15現在で何も情報がないので書きようがないのですが、これからサービスを構築していこうと思います。がんばるお(^ω^)
テスト https://qiita.com/kenz_firespeed/items/5cab42ad323913957935 https://developers.google.com/web/fundamentals/design-and-ux/responsive?hl=ja https://seolaboratory.jp/89410/ https://www.kagoya.jp/howto/webhomepage/responsive/ https://webbu.jp/responsive-design-575 https://ultimate-ez.com/2014/03/29/3572/
