カテゴリーアーカイブ HTML

asaba 著者:asaba

【html5】Resource Hintsを使ってページを高速で読み込む

Resource Hintsとは、読み込みたいファイル(jsとかcss)を予め先に読ませておくことで

ページの高速化を計ることができるプロパティです。

 

dns-prefetchpreconnectprefetchprerenderと全部で四つあるのですが

今回自分が使ったのはdns-prefetchとprefetchの二つ。

ではどんな役割を担っているかというと、まずは

 

dns-prefetch

こちらは、外部ファイルを読み込みたい時に用いられます。

 

</pre>
<link rel="prefetch" type="text/css" href="css/jqMini.css" />
<pre>

 

gitなどで欲しいプラグインがあったときにhref=http://git○○とかで定義するアレのこと。

このurlからipアドレスを検索する時間を削減することで、ページの高速化が

見込めます。

 

続いては

 

prefetch

こちらはjsやcssを先に読んでおいてキャッシュをする役割を持っています。

 

</pre>
<link rel='dns-prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/lity/1.6.6/lity.css' />
<pre>

 

アプリ起動時に最初にprefetchで格納したcssを取り出すことで、

ページのロード時間を軽減することが出来ます。

 

クライアント側でできることは以上。

 

developerToolでscriptの読み込みに時間がかかっていたのが気がかりで

使ってみたのですが、初回以降の読み込みで分かる程度の速さに

調整することができました。

 

ただ、機種によってはまちまちでしたのでまだ改善の余地

ありといったところです。

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

【Cordova】create-react-appコマンドでCordovaアプリの開発環境を作る

今更感はありますが…備忘録としてまとめ。
タイトル通り、create-react-app コマンドと cordova のコマンドを使って、Cordova アプリの開発環境を作る方法です。
色々な記事がありましたが、個人的に一番良いと思ったのがこちらの Qiita の記事です。

Create React App & Cordovaでアプリをつくる環境を整える 2018年4月時点 – Qiita
https://qiita.com/bathtimefish/items/113154e89650b351b5b7

 

作成方法ですが、まずは create-react-appcordova をインストールします。

npm install -g create-react-app
npm install -g cordova

インストールが終わったら、任意の場所で下記のコマンドを実行します。

create-react-app [プロジェクト名]
cd [プロジェクト名]
npm run eject 

こちらのコマンドを実行すると、Create React App プロジェクトが作成できます。

3行目のコマンドは、react-scripts をディレクトリに展開するとのことでしたが…よく分かりませんでした。
なお、こちらを実行すると、? Are you sure you want to eject? This action is permanent. (y/N) と聞かれるので、問題なければ y を入力します。

上記のコマンドが完了したら、config/paths.js を開きます。
こちらのファイルに、appBuild: resolveApp('build') という記述があるので、ここを appBuild: resolveApp('www') に変更します。
次に package.json を開き、"homepage": "./", を追加します。
追加する場所は、"dependencies": { …… }, のすぐ上あたりです。

上記が全て完了したら、一旦一つ上のディレクトリに戻り、下記コマンドで cordova の環境を作成します。

cordova create [ディレクトリ名] [Bundle identifier/アプリケーションID] [プロジェクト名]

なお、ディレクトリ名は create-react-app コマンドで指定したプロジェクト名とは異なるものを指定してください。

こちらを実行したら、このプロジェクト内の config.xml を、上で作成した Create React App プロジェクトのディレクトリの直下にコピーします。

public/index.html を開き、下記の 3行を head 内に追加します。

<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:;">
<meta name="format-detection" content="telephone=no">
<meta name="msapplication-tap-highlight" content="no">

なお、1行目の meta http-equiv="Content-Security-Policy" は環境にあわせて適宜変更してください。

そして、同じく Create React App プロジェクト の src/index.js を下記のように修正します。

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import registerServiceWorker from './registerServiceWorker';

const startApp = () => {
  ReactDOM.render(<App />, document.getElementById('root'));
  registerServiceWorker();
};

if(window.cordova) {
  document.addEventListener('deviceready', startApp, false);
} else {
  startApp();
}

なおこのままビルドすると、上記のコードにある registerServiceWorker.js がなくてエラーになるので、src ディレクトリ内に下記の内容で作成します。

// In production, we register a service worker to serve assets from local cache.

// This lets the app load faster on subsequent visits in production, and gives
// it offline capabilities. However, it also means that developers (and users)
// will only see deployed updates on the "N+1" visit to a page, since previously
// cached resources are updated in the background.

// To learn more about the benefits of this model, read https://goo.gl/KwvDNy.
// This link also includes instructions on opting out of this behavior.

const isLocalhost = Boolean(
  window.location.hostname === 'localhost' ||
    // [::1] is the IPv6 localhost address.
    window.location.hostname === '[::1]' ||
    // 127.0.0.1/8 is considered localhost for IPv4.
    window.location.hostname.match(
      /^127(?:\.(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)){3}$/
    )
);

export default function register() {
  if (process.env.NODE_ENV === 'production' && 'serviceWorker' in navigator) {
    // The URL constructor is available in all browsers that support SW.
    const publicUrl = new URL(process.env.PUBLIC_URL, window.location);
    if (publicUrl.origin !== window.location.origin) {
      // Our service worker won't work if PUBLIC_URL is on a different origin
      // from what our page is served on. This might happen if a CDN is used to
      // serve assets; see https://github.com/facebookincubator/create-react-app/issues/2374
      return;
    }

    window.addEventListener('load', () => {
      const swUrl = `${process.env.PUBLIC_URL}/service-worker.js`;

      if (isLocalhost) {
        // This is running on localhost. Lets check if a service worker still exists or not.
        checkValidServiceWorker(swUrl);

        // Add some additional logging to localhost, pointing developers to the
        // service worker/PWA documentation.
        navigator.serviceWorker.ready.then(() => {
          console.log(
            'This web app is being served cache-first by a service ' +
              'worker. To learn more, visit https://goo.gl/SC7cgQ'
          );
        });
      } else {
        // Is not local host. Just register service worker
        registerValidSW(swUrl);
      }
    });
  }
}

function registerValidSW(swUrl) {
  navigator.serviceWorker
    .register(swUrl)
    .then(registration => {
      registration.onupdatefound = () => {
        const installingWorker = registration.installing;
        installingWorker.onstatechange = () => {
          if (installingWorker.state === 'installed') {
            if (navigator.serviceWorker.controller) {
              // At this point, the old content will have been purged and
              // the fresh content will have been added to the cache.
              // It's the perfect time to display a "New content is
              // available; please refresh." message in your web app.
              console.log('New content is available; please refresh.');
            } else {
              // At this point, everything has been precached.
              // It's the perfect time to display a
              // "Content is cached for offline use." message.
              console.log('Content is cached for offline use.');
            }
          }
        };
      };
    })
    .catch(error => {
      console.error('Error during service worker registration:', error);
    });
}

function checkValidServiceWorker(swUrl) {
  // Check if the service worker can be found. If it can't reload the page.
  fetch(swUrl)
    .then(response => {
      // Ensure service worker exists, and that we really are getting a JS file.
      if (
        response.status === 404 ||
        response.headers.get('content-type').indexOf('javascript') === -1
      ) {
        // No service worker found. Probably a different app. Reload the page.
        navigator.serviceWorker.ready.then(registration => {
          registration.unregister().then(() => {
            window.location.reload();
          });
        });
      } else {
        // Service worker found. Proceed as normal.
        registerValidSW(swUrl);
      }
    })
    .catch(() => {
      console.log(
        'No internet connection found. App is running in offline mode.'
      );
    });
}

export function unregister() {
  if ('serviceWorker' in navigator) {
    navigator.serviceWorker.ready.then(registration => {
      registration.unregister();
    });
  }
}

作成が終わったら、Create React App プロジェクトのディレクトリに移動し、npm run build を実行します。
エラーが出なければビルド成功です!

あとは、任意のプラットフォームを、下記のコマンドを使って追加してください。

cordova platforms add browser
cordova platforms add android
cordova platforms add ios

もちろん全部追加しなくてもOKです。

あとは cordova のコマンドを使ってプロジェクトを実行してください。
下記のコマンドを実行すると、ブラウザで実行できます。

cordova run browser

 

以上、create-react-app コマンドを使って Cordova アプリの開発環境を作る方法でした。
ほぼ Qiita の参考記事そのままなので、こちらを参考にして頂いても大丈夫です。

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

【GoogleChrome】検証ツールで要素のhoverを確認する方法

今まであまり :hover を使う機会が無いため知らなかったのですが、Google Chrome の検証ツールで要素が :hover の時の確認をする方法です。
:hover はマウスカーソルが要素に合わせられているときの疑似クラスですが、これが有効なときの CSS を調整しようとしても、カーソルを外すと :hover の時に表示される要素が消えてしまい、CSS を調節できない…という状況になりました。
CSS を一部修正して、強制的に常に表示されるようにしても良かったのですが、出来れば他の方法を…と思っていたところ、検証ツールにありました。

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

chromeのデベロッパーツールでcssのhoverを調べる方法 – Qiita
https://qiita.com/blue_camel/items/ab3d03aca7add473c329

 

上記の記事によると、Google Chrome の検証ツールで hover 疑似クラスを強制的に有効にする方法があるとのことです。
スクリーンショットはこちら。

まずは Chrome 検証ツールを開き、検証したい要素を選択します。
そして Elements タブを開き、下部に表示されるウィンドウから Styles を選択します。
すると、:hov という項目があるのでこちらを選択し、:hover の項目のチェックボックスにチェックを入れるだけ!
そうすると、選択した要素が hover の状態を維持してくれるので、あとはいつも通りに CSS を調整すればOKです。

そして、上記の操作をやったのに hover 状態が維持されない場合、指定している要素が間違っている可能性があります。
CSS のコードを確認して、選択している要素が正しいかどうか確認してください。
私も全く同じミスをやらかしましたので、皆様もご注意ください。

 

以上、Google Chrome の検証ツールで要素の :hover を確認する方法でした。
ご参考になれば幸いです。

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

【Cordova】「Refused to load gap://ready because it does not appear in the frame-src directive of the Content Security Policy」エラーの対処法

Cordova で開発中のアプリを iOS で実行したところ、「Refused to load gap://ready because it does not appear in the frame-src directive of the Content Security Policy.」というエラーが発生しました。
Google翻訳にかけてみたところ、「コンテンツセキュリティポリシーの frame-src ディレクティブに表示されないため、gap:// ready の読み込みを拒否しました。」とのことでした。
HTML の Meta タグで指定している Content Security Policy に関する記述のところかとあたりをつけつつ、念のため検索。

こちらの記事がヒットしました。

iOSでRefused to load gap://ready because it appears in neither the child-src directive nor the default-src directive of the Content Security Policy. エラー
https://ufirst.jp/memo/2016/09/16/ios%E3%81%A7refused-to-load-gapready-because-it-appears-in-neither-the-child-src-directive-nor-the-default-src-directive-of-the-content-security-policy-エラー/

 

上記の記事によると、やはり Content Security Policy に関する記述に抜けがあったようで、frame-src の項目に gap://ready file: を追加し、再度実行したところ、今度は問題なくページが表示されました!
なお、記事内には default-src に追加とありましたが、私の環境では、frame-src の項目があったため、こちらに追加しました。
というか、frame-src がある状態で、default-srcgap://ready file: を追加してもこの設定は frame-src には反映されないので、今回のエラーは解決できません。

なので、gap://ready file: の記述は frame-src がある場合は frame-src に、frame-src がない場合は default-src に記述するようにしてください。

 

以上、Cordova アプリを iOS で起動した際に「Refused to load gap://ready because it does not appear in the frame-src directive of the Content Security Policy」エラーが発生するときの対処法でした。

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

【Vue】改行とv-htmlとXSS対策

 Vue.js上で文字列を展開したい時があります。例えばそれは誰かが投稿したコメントをコンポーネント上に表示する時です。こういった時コメントの改行が反映されていない場合、見栄えが悪くなります。改行を行う必要があります。
 HTML上の改行と言えばbrタグです。PHPにはnl2brという改行コードを改行タグに変換する組み込み関数があるぐらいです。
PHP: nl2br – Manual
 改行の実現でありがちで危険なアンチパターンはこのnl2br関数を用いたコメントをそのまま表示しようと考えるものです。Vue.jsにはv-htmlというディレクティブがあり、これを用いると普段かかっている安全装置のHTMLエスケープを外し、HTMLとしてパース、実行します。brタグとv-htmlを用いることで改行コードを改行タグに変換して表示できます。
 v-htmlはXSSをまあまあ容易に招く危険性を持ちます。まあまあ危険というのは単純な

<script>alert('XSS')</script>

ぐらいならVueの仕組み上実行されず済むからです。とはいえ

<EMBED SRC="data:image/svg+xml;base64,PHN2ZyB4bWxuczpzdmc9Imh0dH A6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcv MjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hs aW5rIiB2ZXJzaW9uPSIxLjAiIHg9IjAiIHk9IjAiIHdpZHRoPSIxOTQiIGhlaWdodD0iMjAw IiBpZD0ieHNzIj48c2NyaXB0IHR5cGU9InRleHQvZWNtYXNjcmlwdCI+YWxlcnQoIlh TUyIpOzwvc2NyaXB0Pjwvc3ZnPg==" type="image/svg+xml" AllowScriptAccess="always"></EMBED>

の様な多少の変化球(scriptタグをbase64形式でエンコード、埋め込んだコード中でデコードして実行)であっさり破られるのでやはり危険です。

XSS 脆弱性を容易に引き起こすので、ウェブサイトで動的に任意のHTMLを描画することは、非常に危険です。信頼できるコンテンツにだけ HTML 展開を利用してください。ユーザーから提供されたコンテンツに対しては決して使用してはいけません。

テンプレート構文 — Vue.js

 これの対策は実現したい機能に関しての実装を生のHTMLに頼るのでなく個々の別手法を用いるのが一番でしょう。
 例えば改行に関してはCSSのwhite-space実現できます。white-spaceは要素内のホワイトスペースをどう扱うか決定するスタイルであり、ホワイトスペースの一種(少なくとも正規表現の\sグループでまとめられる)である改行文字の制御もこれでできます
white-space – CSS: カスケーディングスタイルシート | MDN
 上記リンクから引用した次の表の’改行を残す’スタイルを用いれば
と生のHTML実行を用いるまでもありません。

  改行 空白とタブ文字 テキストの折り返し 行末の空白
normal まとめる まとめる 折り返す 除去
nowrap まとめる まとめる 折り返さない 除去
pre 残す 残す 折り返さない 残す
pre-wrap 残す 残す 折り返す ぶら下げ
pre-line 残す まとめる 折り返す 除去
break-spaces 残す まとめる 折り返す 折り返す
  • この記事いいね! (0)
村上 著者:村上

【JavaScript】スクロールバーをカスタマイズする方法

実際に使う機会があるかは分かりませんが、ひょんなことから調べたので備忘録としてまとめ。
Webページのスクロールバーをカスタマイズする方法です。

普通ブラウザのスクロールバーは、グレーの四角形だと思いますが、Web ページによっては、この見た目がそぐわなくて美しくない!という場合があるかと思います。
そんな時に、このスクロールバーではなくもっとシンプルなスクロールバーを実装するためのライブラリがあります。

それがこちらの「SimpleBar」というライブラリです。
公式サイトはこちらから。

SimpleBar – Custom scrollbars made simple
http://grsmto.github.io/simplebar/

 

使い方はとても簡単で、まず simplebar.min.jssimplebar.css ファイルをダウンロードして、HTML の head 内に追加します。
もしくは、CDN でも配信しているので、こちらを記述しても OK です。

<link rel="stylesheet" href="./css/simplebar.css">
<script src="./js/simplebar.min.js"></script>
<!-- または -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/simplebar@latest/dist/simplebar.css">
<script src="https://cdn.jsdelivr.net/npm/simplebar@latest/dist/simplebar.min.js"></script>

ちなみに、ReactVue.js でも使えるようです。

あとは、スクロールを追加したい要素に対して data-simplebar を追加します。
サンプルコードは下記のとおりです。

<div data-simplebar>
    <!-- 表示したい要素 -->
</div>

作業は以上です!
これでシンプルなスクロールバーが実装できます。

 

以上、ブラウザのスクロールバーをカスタマイズする方法でした。
折角調べたので、機会があれば是非実装してみたいと思います。

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

色々便利なフロントエンド技術の書いてあるFrontEndHandbook2019の紹介

 昨年度までは日本語訳したものがQiitaなどどこかしら分かりやすい場所に上がっていた様なのですが、今年度は見当たらないの本元を検索。githubにありました。
FrontendMasters/front-end-handbook-2019: [Book] 2019 edition of our front-end development handbook
Front-end Developer Handbook 2019 – Learn the entire JavaScript, CSS and HTML development practice!
 FrontEndHandbookには主にJavaScript、CSS、HTMLに関連するその時々の新しい技術と発行直前の流行り、何が出来れば効率よく品質の良いフロントエンドを作れるかなどが載っています。大体の記事は短めの話とリンク集で、そういったものが集まっています。リンクの先は結構がっつりした話が多いです。
 即物的に役立つのはChapter 5. Front-end Dev Toolsです。この章には、これ便利だよ、といった編集者らのおすすめ開発ツールが載っています。有名どころが多いですが、とにかく数が多い為何かしら知らない有益なツールを見つけられます。

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

Chromeのtextareaでスクロール位置の変更が上手くいかないことがある

 次のデモはVueを使ったtextarea中のクリック、キーアップ、キーダウンに反応してscrollTopを取得、表示するデモです。
 
 これを動かすと少々直感的でない動作とそのscrollTopの値が現れます。例えば次です。デモはclick, key up, key downそれぞれについていますが動画はclick, key downをまとめた一つのみです。

 screenTop:339になってからEnterを押して改行を実行すると、textareaのカーソルが画面内のてっぺんになり、screenTopが更新されません。どういうわけか度々この現象が起きます。マウスでスクロールぐりぐり、上下に余裕のある場所へクリックでカーソル配置、改行で度々再現します。
 これに近い正常な現象は次の様にすると見えます。カーソルをセット、画面外に追いやってからEnterで改行をすると、textareaのカーソルがtextarea内のてっぺんになります。こちらの場合はscrollTopが更新されます。

 この二つから推測されるのは、「何らかの原因で期待するscrollTopがとれず、仮にscrollTop=0と扱って改行を実行。正常な動作同様にtextareaのカーソルが画面内のてっぺんになるようにscrollTop変更。」という動作です。Chrome自体のコードは非公開ですし、詳しい内容はわかりませんがなかなか面白い現象です。
 余談ですがChromeのscrollTopは少数以下も取っていますがFireFox, Microsoft Edgeは少数以下を切り捨ててInt型の様に振る舞っていました。また、Operaは少数ありでした。加えてOperaもカーソルの挙動が不穏でした。少数絡みで何かしらあるのかもしれませんね。

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

【HTML】ウェブブラウザのHTML補完におけるブラウザ間の差異

 ウェブブラウザはHTMLコードなどの特定の形式の文書を構文解析して画面に描画します。この構文解析の動作の大部分はW3Cが定義しており、ほぼ全てのウェブブラウザはこれに従っています。

All Standards and Drafts – W3C

 ウェブブラウザは正しいHTMLコードを正しく読み込めます。しかし世の中に公開されているwebページのHTMLコードは正しい構文でないものも多くあります。例えば、tableタグ構造が欠けているのにtdを使う、閉じタグが欠けている、です。ウェブブラウザにはその様なページも一見壊れていない様にHTMLタグを補完する機能がよく備わっています。この記事ではこのHTMLタグ補完機能について述べます。
 昨今のブラウザはJavaScriptから構文解析器を呼び出せます。

DOMParser – Web API | MDN
 これに不完全なHTMLコードを構文解析させることでHTMLタグの補完を見てみます。
 次の一つ目がIE、二つ目がChromeです。これはタグの補完が上手く働いている例です。table->tbody->tr->tdという構造が正しく作られています。
 
 次の前者がIE、後者がChromeです。これはタグの補完が上手く働いている例です。table->tbody->tr->tdという構造が改めて作られています。

<table>
  <td></td>
<!--IE-->
<html>
<head>
  <META content="IE=11.0000" http-equiv="X-UA-Compatible">
</head>
<body>
<table>
  <tbody>
    <tr>
      <td></td>
    </tr>
  </tbody>
</table>
</body>
</html>

<table>
  <td></td>
<!--Chrome-->
<html>
<head></head>
<body>
<table>
  <tbody>
    <tr>
      <td></td>
    </tr>
  </tbody>
</table>
</body>
</html>

 次の前者がIE、後者がChromeです。これはブラウザによって補完結果が異なることを示す例です。pタグ内に閉じ忘れdivタグを置くミスによって、補完結果のDOMが変わっています。IEの壊れ方は恐ろしいです。divタグのミスなのにブラウザ上のHTMLコードではpタグが壊れています。

<div>
  <p>
    <div>
  </p>
</div>
<!--IE-->
<html>
<head>
  <META content="IE=11.0000" http-equiv="X-UA-Compatible">
</head>
<body>
<div>
  <p>
    <div><p></p></div>
</div>
</body>
</html>

<div>
  <p>
    <div>
  </p>
</div>
<!--Chrome-->
<html>
<head></head>
<body>
<div>
  <p></p>
  <div><p></p></div>
</div>
</body>
</html>

 同様のコードをFirefox、Opera、Microsoft Edge、にかけたところ幸いなことに補完結果はChromeと同様でした。しかし一例ながら単純なミスでもブラウザによって補完結果が異なることがあるとわかりました。複雑なHTMLコードの場合、IE以外のブラウザが変わらず一様なHTML補完をするか少々疑問です。HTMLは不正確であっても形はどうあれブラウザ上で止まらずに動き続けます。ブラウザの補完で補いきれなくなって画面が壊れてようやくミスが明るみにでます。これを避けるためにはソースコード時点でlintにかける等の厳密な管理が必要になります。

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

【JavaScript】正規表現で文字列からHTMLのaタグを抜き出す方法

今後も絶対に使う機会があると思うので、備忘録としてまとめます。
HTMLの aタグ を正規表現で抜き出す方法についてです。
と言っても、JavaScript は match() もしくは replace() を使えばOKなので、aタグ かどうかを判断するための正規表現そのものを記載しておきます。
今後使うかもしれないものでも、こうしてメモしておかないと忘れるので…。

 

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

正規表現でHTMLタグを<a.*?</a>でマッチさせるのは間違っている|iwb.jp
https://iwb.jp/javasctipt-html-regexp-match/

タイトルにもある通り、aタグを <a.*?</a> という正規表現で判断するのは間違っているとのこと。
上記の正規表現でも aタグを抜き出すことはできますが、仮に addressタグがあった場合、こちらにも一致してしまうため、正しい結果にならないことがあるとのことでした。
幸い、私が開発しているプロジェクトでは、addressタグを使うことはないと思いますが、念には念を入れ、この記述方法は却下しました。

で、正しい記述がこちら。

const result = [aタグを抜き出したい文字列].match(/<a(?: .+?)?>.*?<\/a>/g);

上記を実行すれば、変数 result に文字列から抜き出した aタグが格納されます。
なお、正規表現最後の g は繰り返しマッチングを行うかどうかを指定するものです。
これがないと、もし文字列に複数の aタグがあった場合、最初の aタグだけしか抜き出さないので、もし文字列に複数の aタグが含まれ、かつそれらをすべて抜き出したい場合は、g を指定しておく必要があります。

 

以上、JavaScript の正規表現で HTML の aタグを抜き出す方法でした。
なお、今回のサンプルコードでは match() を使い、aタグを抜き出しましたが、置換を行いたい場合は replace() を用いてください。

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