What's New Qiita

20201023のHTMLに関する記事は12件です。

  • 投稿日：2020-10-23T23:32:30+09:00

Railsに動画を挿入する方法

railsに動画を挿入する方法

結論

index.html.erb
<%= video_tag "earth.mov", class: "landing_video", loop: true, autoplay: true, muted: true %>

earth.movの箇所はそれぞれご自身で好きな動画をこちらに当てはめてください。

基本的にmp4でもmovでも形式は問われないと思いますが、UIを考えたときにあまり容量の大きすぎるものだと使い勝手が悪くなってしまうと思うのでその辺りはお気をつけて！

現場からは以上です！

  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む
  • 投稿日：2020-10-23T23:03:01+09:00

Vue.jsでテーブルを動的に行追加する（メモ）

完成品

参考にしたもの

【Vue.js】データ配列を使ってテーブルを動的に生成してみる。
Vue.jsを100時間勉強して分かったこと
HeartRails Geo API

コード（記事の下の方に完成品のCodePen置いてます）

・HTML

　<div class="row my-3">
    <div class="col-sm-6 mx-auto">
      <input class="form-control" v-model:value="text" placeholder="郵便番号を入力…"><br>
      郵便番号：{{ text }}<button v-on:click="addTask" class="btn btn-primary">検索</button>
    </div>
  </div>

  <table class="table table-striped">
    <thead>
      <tr>
        <th>都道府県</th>
        <th>市区町村</th>
        <th>町域</th>
        <th>緯度</th>
        <th>経度</th>
      </tr>
    </thead>
    <tbody>
        <tr v-for="address in addressList"> 
          <td>{{ address[0] }}</td>
          <td>{{ address[1] }}</td>
          <td>{{ address[2] }}</td>
          <td>{{ address[3] }}</td>
          <td>{{ address[4] }}</td>
        </tr>
    </tbody>
</table>

・Javascript

const app = new Vue({
    el: '#app', // Vueが管理する一番外側のDOM要素
    data: {
      // Vue内部で使いたい変数は全てこの中に定義する
      text: '',
      prefecture: '',
      addressList:[],
    },
    methods: {
      addTask: async function() {
        //郵便番号から住所情報取得
        try {
          const address = await axios.get('https://geoapi.heartrails.com/api/json?method=searchByPostal&postal=' + this.text);
          this.addressList.unshift([address.data['response']['location'][0].prefecture,address.data['response']['location'][0].city,address.data['response']['location'][0].town,address.data['response']['location'][0].x,address.data['response']['location'][0].y]);
        } catch (e){
          console.log('住所情報の取得に失敗：', this.todoList);
          console.error(e);
        }
      }
      ,
      clearAll: function() {
        console.log('検索履歴が削除されました。');
        this.addressList = [];
      }
    },
});

作成中のメモ

・axios.getの中のURL、node.jsはhttpでいけたけど、Vue.jsはhttpsじゃないとダメ（なぜ）

・CodePenの履歴（メモ書くのめんどくさいからCodePen分けて履歴にすればええやん。のスタイル。）
テーブル使ってないやつ
https://codepen.io/sawakoshi_yy/pen/MWeboLm

テーブル使ってるけど1行の中に追加されてるやつ
https://codepen.io/sawakoshi_yy/pen/eYzgpNN

完成品
https://codepen.io/sawakoshi_yy/pen/qBNROwY

・await使うなら、functionの前にasyncつける

  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む
  • 投稿日：2020-10-23T23:03:01+09:00

Vue.jsでテーブルを動的に行追加する

完成品

完成品のWebアプリ

https://naughty-franklin-898e0a.netlify.app/
郵便番号7桁入力したら住所検索します。
検索ボタンクリックするたびに行追加して検索します。

参考にしたもの

【Vue.js】データ配列を使ってテーブルを動的に生成してみる。
Vue.jsを100時間勉強して分かったこと
HeartRails Geo API

コード（記事の下の方に完成品のCodePen置いてます）

・HTML

　<div class="row my-3">
    <div class="col-sm-6 mx-auto">
      <input class="form-control" v-model:value="text" placeholder="郵便番号を入力…"><br>
      郵便番号：{{ text }}<button v-on:click="addTask" class="btn btn-primary">検索</button>
    </div>
  </div>

  <table class="table table-striped">
    <thead>
      <tr>
        <th>都道府県</th>
        <th>市区町村</th>
        <th>町域</th>
        <th>緯度</th>
        <th>経度</th>
      </tr>
    </thead>
    <tbody>
        <tr v-for="address in addressList"> 
          <td>{{ address[0] }}</td>
          <td>{{ address[1] }}</td>
          <td>{{ address[2] }}</td>
          <td>{{ address[3] }}</td>
          <td>{{ address[4] }}</td>
        </tr>
    </tbody>
</table>

・Javascript

const app = new Vue({
    el: '#app', // Vueが管理する一番外側のDOM要素
    data: {
      // Vue内部で使いたい変数は全てこの中に定義する
      text: '',
      prefecture: '',
      addressList:[],
    },
    methods: {
      addTask: async function() {
        //郵便番号から住所情報取得
        try {
          const address = await axios.get('https://geoapi.heartrails.com/api/json?method=searchByPostal&postal=' + this.text);
          this.addressList.unshift([address.data['response']['location'][0].prefecture,address.data['response']['location'][0].city,address.data['response']['location'][0].town,address.data['response']['location'][0].x,address.data['response']['location'][0].y]);
        } catch (e){
          console.log('住所情報の取得に失敗：', this.todoList);
          console.error(e);
        }
      }
      ,
      clearAll: function() {
        console.log('検索履歴が削除されました。');
        this.addressList = [];
      }
    },
});

作成中のメモ

・axios.getの中のURL、node.jsはhttpでいけたけど、Vue.jsはhttpsじゃないとダメ（なぜ）

・CodePenの履歴（メモ書くのめんどくさいからCodePen分けて履歴にすればええやん。のスタイル。）
テーブル使ってないやつ
https://codepen.io/sawakoshi_yy/pen/MWeboLm

テーブル使ってるけど1行の中に追加されてるやつ
https://codepen.io/sawakoshi_yy/pen/eYzgpNN

完成品
https://codepen.io/sawakoshi_yy/pen/qBNROwY

・await使うなら、functionの前にasyncつける

  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む
  • 投稿日：2020-10-23T21:18:12+09:00

【初心者でもわかる】select要素を使わず、divでselectみたいな動きを作る

どうも7noteです。select要素にcssが使いにくいので、他の方法を考えてみました。

select要素にはCSSが調整難しいため、自由に調整できるdiv要素でできる方法を書いていきます。
また、PCとスマホでselect要素風とそうじゃない動きに切り分けるなどが必要な時にも使えると思います。

sample.gif

書き方

※jQueryを使用しています。

index.html
<ul>
  <li class="check" link="no1" style="display: list-item;">その１</li> // linkの値と、pタグのクラスを揃える
  <li link="no2">その２</li>
  <li link="no3">その３</li>
  <li link="no4">その４</li>
  <li link="no5">その５</li>
</ul>

<p class="no1">テキスト１</p>
<p class="no2">テキスト２</p>
<p class="no3">テキスト３</p>
<p class="no4">テキスト４</p>
<p class="no5">テキスト５</p>
style.css
ul {
  width: 200px;                   /* セレクトボックスの横幅 */
  border: solid 1px #333;         /* 見やすく境界線を引く */
  position: absolute;             /* 選択肢が開いた時に高さが変わるので指定 */
  top: 0px;                       /* 好きな位置に */
  left: 0px;                      /* 好きな位置に */
}
ul li {
  padding: 5px 10px 5px 20px;     /* optionの余白と同等 */
  display: none;                  /* 最初は非表示 */
  list-style: none;               /* 「・」を非表示にする */
}
ul li.check {
  color: #fff;                    /* 選択されたもののみ装飾 */
  font-weight: bold;              /* 選択されたもののみ装飾 */
  background: #999;               /* 選択されたもののみ装飾 */
}

p {
  display: none;                  /* 最初は非表示 */
  margin-left: 220px;             /* セレクトボックスとかぶらないように位置調整 */
}
script.js
$(function () {
  var click_flg = true;                   // クリックを許可する変数を設定
  $('.check').show();                     // ページ読み込み時、任意のselect1つだけ表示
  $('.no1').show();                       // ページ読み込み時、任意のテキスト1つだけ表示
  $('ul li').on('click', function(){      // セレクトボックスのどれかがクリックされた時
    if(click_flg){                        // クリックが許可されているかどうか
      click_flg = false;                  // ボタンを一時的に無効
      $('ul li').removeClass('check');    // 全てのliからcheckを削除してから、
      $(this).addClass('check');          // 選択されたものにcheckのクラスを付ける
      $('ul li').not('.check').fadeToggle(400, function() { // check以外の表示と非表示を切り替える
        click_flg = true;                   // コールバック関数を使い、アニメーションが終わってからtrueにするように指定
      });
      $('p').hide();                        // pを全て非表示
      $('.' + $(this).attr('link')).show(); // selectされているlinkと同じクラスをもつpだけ表示
    }
  });
});

解説

各行で行なっている動きはコメントでご確認ください。
大まかな処理の流れとしては、、、

① ページ読み込み時、任意のselectとテキストを表示。
② li要素がクリックされた時、他のliを表示状態に切り換え（fadeToggle）
③ liが全て開いている状態の時、liがクリックされたら、クリックされたものにのみcheckのクラスを付与、かつ他のliを非表示状態に切り換え。
④ また同時に、pを全て非表示にしてクリックされたliのlinkと同じクラスを持つpだけ表示。
⑤ 結果、選択したli要素と、紐づいているp要素のみ表示状態になる。

そして、click_flg変数を設定しておくことで、フェードインアウトの処理中にクリックされても不具合を起こさないように処理をしています。

まとめ

正直な話をするとselectboxを使うほうが早いですし、わりと無理な作りになっていると思うので、

「どうしてもdivでselectのような動きを実装したいんだぁぁぁ」

ってときにだけお使いください。

おそまつ！

~ Qiitaで毎日投稿中!! ~
【初心者向け】HTML・CSSのちょいテク詰め合わせ

  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む
  • 投稿日：2020-10-23T19:40:43+09:00

sign in with apple JS を使用して日本語のボタン生成やボタンデザインのカスタマイズ方法

Sign in with Apple JS を使用して日本語のボタン生成やボタンデザインのカスタマイズ方法

みなさんAppleは好きですか
僕は嫌いです。

Sign in with Apple JS の使用方法

ドキュメントに基本的な使い方が記載されてます。

公式から転載

<html>
    <head>
        <meta name="appleid-signin-client-id" content="[CLIENT_ID]">
        <meta name="appleid-signin-scope" content="[SCOPES]">
        <meta name="appleid-signin-redirect-uri" content="[REDIRECT_URI]">
        <meta name="appleid-signin-state" content="[STATE]">
    </head>
    <style>
        .signin-button {
            width: 210px;
            height: 40px;
        }
    </style>
    <body>
        <div id="appleid-signin" class="signin-button" data-color="black" data-border="true" data-type="sign in"></div>
        <script type="text/javascript" src="https://appleid.cdn-apple.com/appleauth/static/jsapi/appleid/1/en_US/appleid.auth.js"></script>
    </body>
</html>

これでボタンが出ます。

ですが、metaを使用したくない場合は以下のようなjsファイルを作成し、htmlに読み込ませると表示されます。ダミーデータでも表示されます（ちょろい）
APIとjsの読み込み順に気をつけてください。

AppleID.auth.init({
  clientId : "xxx",
  scope : "xxx",
  redirectURI: "xxx",
  state : "xxx"
});

基本は以上ですが、他言語のAPIについてやサインアップボタンはどうやって表示するのか一切記載されていないのでどこを見ればいいのかまとめておきます。

日本語API

以下が日本語のAPIです。
https://appleid.cdn-apple.com/appleauth/static/jsapi/appleid/1/ja_JP/appleid.auth.js

なので読み込むjsを変更すれば日本語になります。

<!--英語-->
<script type="text/javascript" src="https://appleid.cdn-apple.com/appleauth/static/jsapi/appleid/1/en_US/appleid.auth.js"></script>

<!--日本語-->
<script type="text/javascript" src="https://appleid.cdn-apple.com/appleauth/static/jsapi/appleid/1/ja_JP/appleid.auth.js"></script>

ボタンデザインのカスタマイズ

こちらのボタン生成のページが用意されています。はい。ドキュメントには記載されていないページですね。
ちなみにapple公式のページです。

ボタン生成
https://appleid.apple.com/signinwithapple/button#center-align-button-section

こちらのページの「Download」を押すと今表示されているボタンのPNGファイルがダウンロードされます。
PNGでボタンを作りたい場合はダウンロードした画像はボタンデザインのガイドラインに沿ってるのでそのまま使用して問題ないです。

jsを使用する場合は表示されているボタンの下に

タグのコードが表示されているのでそれをそのままhtmlに載せると同じように表示されます。 
<div
  id="appleid-signin"
  data-mode="center-align"
  data-type="sign-in"
  data-color="black"
  data-border="false"
  data-border-radius="15"
  data-width="200"
  data-height="32"
></div>

なぐり書きですが、そこまで難しくはないと思います

Apple製品は嫌いではないですが、仕事で Sign in with Apple を調査・使用することになりドキュメントを舐めまわしてましたが、ドキュメントに記載されていないことが多々あったので嫌いです。
デザインの規約も多すぎです。少しは妥協できんのか…

  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む
  • 投稿日：2020-10-23T16:48:50+09:00

[HTML&CSS] classとidの違いとは

結論

class

種類別に割り当てる
→同じclass名を1ページ中に何度も使うことができる

id

固有の名前を割り当てる
→同じid名は1ページ中に1度しか使えない。

class属性が対象の種類や部類を表しているのに対して、idは固有の名前を割り当てて限定的に表すために使われます。

使い分け

基本的にはclass属性を使う、必要に応じてid属性を使うというのが良いと思います。しかし、これらを併用する上でのメリット、デメリットがそれぞれ存在します。

メリット

idが使われていれば、それが限定した装飾であることがひと目で分かるため、コードを読み解く際に役に立ちます。

デメリット

idはclassよりも優先される、という規則があり、これらが混在することで優先度の判別が難しくなってしまう場合もあります。

最後に

id属性を使うかどうかの判断は、それを限定する必要があるか、そうしたほうが分かりやすいか、を基準に判断するといいと思います。

最後まで読んでいただきありがとうございます。今後もアウトプットをしていきたいと思っているのでよろしくお願いします！

  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む
  • 投稿日：2020-10-23T12:10:45+09:00

WordPressでオリジナルテーマのサムネイル の設定の方法

WordPressでオリジナルテーマを作成した際に、特に何も設定をしないとこのような状態になっています。

1.png

自分で使う分にはこれではいいかもしれませんが、お客さんに納品する際にこれではカッコ悪いなぁって思ったので、サムネイルの設定について調べました。

サムネイル用の画像を準備する

まずはサムネイルに表示する画像をアップします。
それっぽくみえるものでよいと思います。

今回はこちらの画像を準備しました。
2.jpeg

縦横比3:4に調整する

サムネイルの縦横比が3：４なので、切り取りしていきます。
これは自分の使いやすいアプリやソフトを使えばよいかと思います。

サイズは縦450 横600　と指定しました。

わたしは、Figmaで行いました。
3.png

画像の名前を変更する。

screenshot.jpgに名前を変更してください。
形式はpngでも問題ありません。

画像をテーマフォルダーにアップロードする

あとは、ダウンロードするだけですね。

アップロードする箇所は、テーマフォルダ内の同じ階層で大丈夫です。
（index.phpやheader.phpと同じ階層）

1c93e4c8e6f7231d13384090edaf5628.png

まとめ

このように無事に変更することができました。
ちょっと手を加えてあげることで納品時のクオリティがあがるので、是非やってみてください。

516db33c35548363831e22295ad138ed.png

  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む
  • 投稿日：2020-10-23T11:02:07+09:00

【スギちゃん風】カスタム投稿タイプの個別投稿ページにはこうやってコメントをつけるんだぜぇ〜

背景

カスタム投稿タイプの個別投稿ページにコメント機能をつけたいと思ったのですが、
普通の投稿タイプと同様のやり方では表示されない。

そんな悩みを抱えている方のための備忘録になります。

まずコメント機能どうやってつくるの？？

comments.phpを作ります

<?php if( comments_open() ){ ?> 　//現在の投稿に対してコメントが許可されいるかの条件分岐
    <div id="comments">
        <?php if( have_comments() ){ ?>  //コメントがある場合ループを開始する
        <ul id="comments-list">
            <?php wp_list_comments(); ?>  //コメントをリストで表示する
        </ul>
        <?php } ?>
        <?php comment_form(); ?>   //コメントフォームを表示する
    </div>
<?php } ?>

表示したい部分に次を記述

<?php comments_template(); ?>

これで簡単なコメント機能は完成です。

カスタム投稿タイプでコメントをつける

functions.php にあるカスタム投稿タイプの関数内に以下の内容を盛り込む

function create_post_type() {
  #省略
  'supports' => array(
    'title',
    'editor',
    'excerpt',
    'thumbnail',
    'custom-field',
    'comments',  #カスタム投稿タイプでコメントを表示指定
  ),
  #省略
}
add_action( 'init', 'create_post_type', 1);

WPの管理画面を設定

設定 < ディスカッション < 新しいコメントを許可にチェック
個別記事 < 編集 < コメントのプルダウン「ーー変更なしーー」から「許可する」に変更

以上

  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む
  • 投稿日：2020-10-23T10:19:14+09:00

HTMLにSSIを使ってみる

背景

複数のWEBアプリを作成すると似たような機能がある。再利用を見据えてSSIにてファイル分割を行う

実施

  • "C:\MAMP\conf\apache\httpd.conf"の Directory "C:\MAMP\htdocs" のOptions にIncludesを追加 AllowOverrideはAllになっていることを確認
<Directory "C:\MAMP\htdocs">
    # Options Indexes FollowSymLinks ExecCGI
    Options Indexes FollowSymLinks ExecCGI Includes
    ----省略---
    AllowOverride All
    ----省略---
</Directory>
  • IfModule mime_moduleにAddTypeとAddOutputFilter INCLUDESに下記のように追加
<IfModule mime_module>
    ----省略---
    #AddType text/html .shtml
    #AddOutputFilter INCLUDES .shtml
    AddType text/html .shtml
    AddOutputFilter INCLUDES .shtml .html .htm .php
</IfModule>

参考

Webサイト制作におけるインクルード化とは？基本と設定方法
「分かりそう」で「分からない」でも「分かった」気になれるIT用語辞典 SSI
MAMPの設定(SSIや複数のローカルホスト)
もっとhttpd.confの設定
MIMEタイプの追加(AddType)

  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む
  • 投稿日：2020-10-23T10:19:14+09:00

MAMPでSSIを使ってみる

背景

複数のWEBアプリを作成すると似たような機能がある。再利用を見据えてSSIにてファイル分割を行う

実施

  • "C:\MAMP\conf\apache\httpd.conf"の Directory "C:\MAMP\htdocs" のOptions にIncludesを追加 AllowOverrideはAllになっていることを確認
<Directory "C:\MAMP\htdocs">
    # Options Indexes FollowSymLinks ExecCGI
    Options Indexes FollowSymLinks ExecCGI Includes
    ----省略---
    AllowOverride All
    ----省略---
</Directory>
  • IfModule mime_moduleにAddTypeとAddOutputFilter INCLUDESを追加
<IfModule mime_module>
    ----省略---
    #AddType text/html .shtml
    #AddOutputFilter INCLUDES .shtml
    AddType text/html .shtml
    AddOutputFilter INCLUDES .shtml .html .htm .php
</IfModule>

参考

Webサイト制作におけるインクルード化とは？基本と設定方法
「分かりそう」で「分からない」でも「分かった」気になれるIT用語辞典 SSI
MAMPの設定(SSIや複数のローカルホスト)
もっとhttpd.confの設定
MIMEタイプの追加(AddType)

  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む
  • 投稿日：2020-10-23T06:43:17+09:00

リンク先が正しく反映されない理由【解決事例あり】

みなさん、こんにちは。

未経験からWebエンジニア転職を目指して独学中の体育教師しろと申します。

今回は、ネット上に公開された、サイトのリンク先が正しく反映されない理由について記事にしました。
実際に、リンク先が反映されなかった私の事例を元に説明していきます。

私のサイトは最初このような状態でした。

”トップページに戻る”ボタンを押してもページが見つからない状態。

コードはこちら。

スクリーンショット 2020-10-23 6.23.43.png

問題点は見つかりましたか？

問題点はこちら。

スクリーンショット 2020-10-23 6.24.46.png

スクリーンショット 2020-10-23 6.45.22.png
とリンクを設定していました。

答えをいうと、このコードを

スクリーンショット 2020-10-23 6.45.54.png

にすると解決しました。


今回は何が問題かというと、リンク先の住所が指定されていないから、コンピューターが見つけられなかったのです。

”index.html”だけだと　「江名子町にあります」だけだと「江名子町ってどこ！見つけられないよ！」となります。
これを”https://daikishirakawa.github.io/index.html”としてあげると　「群馬県/高山市/江名子町にあります」と指定しているので、「江名子町は群馬県の高山市にあるのね！」とコンピューターが見つけることができます。

つまり、

①”https://daikishirakawa.github.io”というサイトの中の、
②”index.html”というファイルとリンクさせてください

とコンピューターにファイルの住所を一緒に教えてあげることで、リンク先にコンピューターがたどり着くことができます。

  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む
  • 投稿日：2020-10-23T00:23:43+09:00

Twitterカードの設定方法

自分が運営しているサイトの記事をTwitterでこんな風にリンクしてみたくないですか？
IMG_2232.png
↑こんな感じに。これはTwitterカードと言い、一言でいうと「画像付きリンク情報」になります。
今から、どうすればTwitterカードを設定できるのか、説明していきます。

Twitterカードとは

Twitterカードとは、設定していない場合は次のようになります。
IMG_2233.png
それに対して Twitter カードが設定されている場合は次のようになります。
IMG_2232.png
やはり、Twitterカードが設定されている方がクリックしたくなりますよね。

Twitterカードの4種類ある

Summary Card
サマリーカードは小さめの画像と記事のタイトルおよび概要を表示できる、Twitterカードです。
IMG_2234.png
Summary Card with Large Image
大きな画像付きサマリーカードは大きめの画像と記事のタイトルおよび概要を表示できる、Twitterカードです。
IMG_2232.png
App Card
アプリ用のカードです。アプリのダウンロードページへのリンクを表示する、Twitterカードが表示されます。アプリ用なので今回は省略します。
Player Card
動画を配信しているサイト向けのTwitterカードです。ツイートに表示されたカード上で動画のダイジェストなどを再生することができます。動画用なので今回は省略します。

metaタグに記載する

<meta name="twitter:card" content="1.カードの種類">
<meta name="twitter:site" content="2.Twitterのユーザー名">
<meta name="twitter:title" content="3.記事のタイトル">
<meta name="twitter:description" content="4.記事の概要">
<meta name="twitter:image" content="5.カードに表示する画像のURL">

1.「カードの種類」には
Summary Card の場合 ⇒ summary
Summary Card with Large Image の場合 ⇒ summary_large_image
を指定します。

2.「Twitter のユーザー名」には
Twitterアカウントのユーザー名を@に続けて入力するだけです

3.「記事のタイトル」には
Twitterカードを設定するページの記事のタイトルを指定します。

4.「記事の概要」には
Twitterカードを設定するページの記事の概要を指定します。文字数に制限はありませんが、定められた文字数以上の値は省略されます。

5.カードに表示する画像のURLには
Twitterカードに表示される画像が設置されているURLを指定します。

最後に

ツイートにurlを記載するだけで、このようになります。
IMG_2232.png

今回の記事を見てくれてありがとうございます。
最後に自分のNewsサイトでも、Twitterカードを使って、記事の宣伝をしているので、もし良かったら見てください。
NewsTweet｜Twitterで注目されているニュースが分かる

お世話になったリンク
【2020年版】Twitterカードとは？使い方と設定方法まとめ
Twitterカードの使い方と設定方法

  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む

日付別

タグ一覧