20200319のHTMLに関する記事は7件です。

横浜の気温をOpenWeatherMap APIでHTMLに表示する [初心者のための初心者による備忘録]

JSじゃなくてRuby派だという方はこっちをご覧ください。(僕の記事じゃないです。)

OpenWeatherMap APIとは

世界中の都市の気象情報を表示できるWeb APIで、DarkSkyAPIなどと比較されることが多い。時たまとんでもなく外れた気象予報を出すことがある。

HTMLに表示する手順

1. API Keyを取得する

OpenWeatherMap公式サイトにてサインアップし、マイページでAPI Keyを確認する。この後は公式サイトにお世話になることはないので、APIページの
(Rakuten Rapid APIでも登録できるがクレカ登録など色々めんどいので公式からの手順を書いておきます)

2. fetchメソッドとjQueryで横浜の現在の天気を表示する

公式サイトで言うところのCurrent weather dataをHTMLに埋め込みます。

OWMapAPI.js
let API_KEY = '**********************'; //1.で取得したAPI Key
let elem=document.getElementById("output"); //outputは表示したいHTMLのタグ名。
function getWeather(latitude, longtitude) {
  $.ajax({
    url: 'http://api.openweathermap.org/data/2.5/weather',
    data: {
      lat: latitude,
      lon: longtitude,
      units: 'metric',//華氏の場合は"imperial"
      APPID: API_KEY
    },
    success: data => {
       console.log(data);
       elem.innerHTML=data["main"]["temp"]+"";
    }
  })
}

getWeather(35.4437, 139.6380);//データを表示したい都市の緯度経度

このコードはStack overflowの記事(英語版)を「参考にした」コードです。

XMLHttpRequestでもトライしてみたのですが頑なにChromeがブロックしてきます。これは僕のChromeの問題なのか、XMLHttpRequestがオワコンなのか、原因が分かる方がいればコメント欄でお願いします。

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

横浜の気温をOpenWeatherMap APIでHTMLに表示する

JSじゃなくてRuby派だという方はこっちをご覧ください。(僕の記事じゃないです。)

完成したサイトはこちら

OpenWeatherMap APIとは

世界中の都市の気象情報を表示できるWeb APIで、DarkSkyAPIなどと比較されることが多い。時たまとんでもなく外れた気象予報を出すことがある。

HTMLに表示する手順

1. API Keyを取得する

OpenWeatherMap公式サイトにてサインアップし、マイページでAPI Keyを確認する。
(Rakuten Rapid APIでも登録できるがクレカ登録など色々めんどいので公式からの手順を書いておきます)

2. fetchメソッドとjQueryで横浜の現在の天気を表示する

公式サイトで言うところのCurrent weather dataをHTMLに埋め込みます。

OWMapAPI.js
let API_KEY = '**********************'; //1.で取得したAPI Key
let elem=document.getElementById("output"); //outputは表示したいHTMLのタグ名。
function getWeather(latitude, longtitude) {
  $.ajax({
    url: 'http://api.openweathermap.org/data/2.5/weather',
    data: {
      lat: latitude,
      lon: longtitude,
      units: 'metric',//華氏の場合は"imperial"
      APPID: API_KEY
    },
    success: data => {
       console.log(data);
       elem.innerHTML=data["main"]["temp"]+"";
    }
  })
}

getWeather(35.4437, 139.6380);//データを表示したい都市の緯度経度

このコードはStack overflowの記事(英語版)を「参考にした」コードです。

XMLHttpRequestでもトライしてみたのですが頑なにChromeがブロックしてきます。これは僕のChromeの問題なのか、XMLHttpRequestがオワコンなのか、原因が分かる方がいればコメント欄でお願いします。

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

ブログ機能などの一覧でリンク先や詳細ページがないときにアニメーションを止める。

よく使うので忘備録として・・

パターン1

一番シンプルなやつ
#は環境に応じて使い分ける。

<ul class="blog-list">
  <li><a href="pathToTheBlog">ブログ始めました。</a></li>
  <li><a href="pathToTheBlog">詳細ページあります</a></li>
  <li><a href="#">詳細ページないです。</a></li>
</ul>
.blog-list {
  >li >a[href="#"] {
    pointer-events: none;
  }
}

パターン2

一番ありがちなやつ

<ul class="blog-list">
  <li>
    <a href="pathToTheBlog"><!-- 透明なアンカータグを要素全体の上に配置 --></a>
    <div class="img-wrap" style="background: url(pathToDefaultImg) no-repeat center/cover">
      <img src="pathToImg" alt="ユーザー投稿した画像です。">
    </div>
    <div class="txt-wrap">
      <p>テキスト入ります。</p>
    </div>
  </li>
  <li>
    <a href="#"><!--  --></a>
    <div class="img-wrap" style="background: url(pathToDefaultImg) no-repeat center/cover">
      <img src="pathToImg" alt="ユーザー投稿した画像です。">
    </div>
    <div class="txt-wrap">
      <p>テキスト入ります。</p>
    </div>
  </li>
</ul>
$(function() {
  $('.blog-list > li').each(function(){
    if ($(this).children('a').attr('href') == '#') {
      $(this).css('pointer-events', 'none');
    }
  });
});
.news-list {
  display: flex;
  justify-content: space-around;
  width: calc(100% + 15px);
  >li {
    width: calc(50% - 15px);
    margin-right: 15px;
    position: relative;

    >a {
      position: absolute;
      left: 0;
      top: 0;
      width: 100%;
      height: 100%;
      z-index: 1;
    }

    .img-wrap {
      overflow: hidden;
      height: 200px;
      width: 100%;

       >img {
         height: 100%;
         width: 100%;
         object-fit: cover;
         transition: .3s transform;
       }
     }

     .txt-wrap {
       font-size: 16px
     }

     &:hover {
        .img-wrap {
          transform: scale(1.05);
        }
        .txt-wrap p {
          text-decoration: underline;
        }
     }
  }
}
  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む

スクロール時にヘッダーの背景色を変える

割とよく使うので忘備録として・・。

スクロール時にヘッダーの背景色を変える

  1. タブレット画面幅以下の時のみ
  2. ヘッダーが固定
  3. ヘッダー透明でトップビジュアルの上にあるが、スクロールしたら透明は見難いから色をつけたい。
<header>
  <p><a href="/"><img src="pathToLogo" alt="ロゴ"></a></p>
  <button><img src="pathToImg" alt="メニューボタンなど"></button>
</header>

$(function(){
   var breakPoint = 768;
   if ($(window).innerWidth() <= breakPoint) {
     var mainVisualHeight = 420;
     var header = $('header');
     $(window).scroll(function () {
       $(this).scrollTop() > mainVisualHeight ?  header.css('background', '#fff'): header.css('background', 'inherit');
      });
     }
});
  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む

同じ拡張子なのに動画が再生されない

やりたいこと

web上で動画を再生したい

問題

.mp4や.movの拡張子がついているファイルを再生しようとした時に再生できるものとできないものが存在する。

結論

ファイル形式(拡張子)で判断するのではなく、コーデックをブラウザが対応するものに変換する。


動画の構造

動画は大きく映像と音声という2つの構造でできている。
動画は容量が大きいファイルなので圧縮してやる必要がある。
(基本的に動画を録画した時点で勝手に圧縮されたファイルが作成される)

コーデック

圧縮する行為をエンコード
圧縮したままでは再生できないので、圧縮をもとに戻すのがデコードと呼ぶ。
エンコードとデコードの2つを組み合わせてコーデックと呼ぶ。
動画の場合は映像と音声の2つのコーデックが必要になる。

コーデックの種類

代表的な映像コーデック
MPEG-4・ MPEG-1・MPEG-2・ Xvid・Divx・H.263・H.264・HEVC(H.265) など

代表的な音声コーデック
MP3・AAC・AC-3・FLAC・LPCM・WMA など

動画が再生されない原因

映像が再生されないということは映像コーデックが対応していないブラウザである可能性がある。
映像コーデックをChromeなどブラウザの規格に合わせる必要がある。
逆に音声が流れないという場合は音声コーデックを見直す必要がある。

コンテナ

.mp4や.movはコーデックの組み合わせるためのコンテナと呼ばれるもの。
コンテナごとに扱えるコーデックが決まっている。

.mp4
映像: MPEG-4、H.263、H.264 など
音声: MP3、AC3、AACなど

.mov
映像: H.263、H.264、HEVCなど
音声: MP3、AAC 、FLAC など

具体的なケース

自分のケースで言うと、.movのコンテナで H.264とAACのコーデックだと正常に再生されるけど、.movコンテナ HEVCとAACのコーデックだと映像が再生されないということが起きた。

この場合はHEVCのコーデックを変換して、H.264などにする必要がある。

まとめ

1つのコンテナでも複数のコーデックを扱うことができるので、.mp4だからと言って全て再生できるとは限らない。コーデックがなんなのか?ブラウザはどのコーデックに対応しているのか?を確認する。

参考

コーデックとは? 動画を扱うなら知っておきたい基礎知識|ネットワークビデオレコーダー(NVR)

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

初心者によるプログラミング学習ログ 266日目

100日チャレンジの266日目

twitterの100日チャレンジ#タグ、#100DaysOfCode実施中です。
すでに100日超えましたが、継続。
100日チャレンジは、ぱぺまぺの中ではプログラミングに限らず継続学習のために使っています。
266日目は、

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

永遠に続くクソ計算クイズつくた html css javascript

成果物

https://yuzuru2.github.io/neta0/dist/

リポジトリ

https://github.com/yuzuru2/yuzuru2.github.io/tree/master/neta0

環境

  • node.js 12.14.0
  • parcel 1.12.4

UI

無題.png

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