- 投稿日:2020-03-19T12:03:53+09:00
横浜の気温を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.jslet 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がオワコンなのか、原因が分かる方がいればコメント欄でお願いします。
- 投稿日:2020-03-19T12:03:53+09:00
横浜の気温を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.jslet 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がオワコンなのか、原因が分かる方がいればコメント欄でお願いします。
- 投稿日:2020-03-19T11:59:24+09:00
ブログ機能などの一覧でリンク先や詳細ページがないときにアニメーションを止める。
よく使うので忘備録として・・
パターン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; } } } }
- 投稿日:2020-03-19T11:41:26+09:00
スクロール時にヘッダーの背景色を変える
割とよく使うので忘備録として・・。
スクロール時にヘッダーの背景色を変える
- タブレット画面幅以下の時のみ
- ヘッダーが固定
- ヘッダー透明でトップビジュアルの上にあるが、スクロールしたら透明は見難いから色をつけたい。
<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'); }); } });
- 投稿日:2020-03-19T11:17:58+09:00
同じ拡張子なのに動画が再生されない
やりたいこと
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だからと言って全て再生できるとは限らない。コーデックがなんなのか?ブラウザはどのコーデックに対応しているのか?を確認する。
参考
- 投稿日:2020-03-19T05:08:10+09:00
初心者によるプログラミング学習ログ 266日目
100日チャレンジの266日目
twitterの100日チャレンジ#タグ、#100DaysOfCode実施中です。
すでに100日超えましたが、継続。
100日チャレンジは、ぱぺまぺの中ではプログラミングに限らず継続学習のために使っています。
266日目は、
おはようございます
— ぱぺまぺ@webエンジニアを目指したい社畜 (@yudapinokio) March 18, 2020
265日目
・webサイト模写 2.0h
・以前購入した模写教材のコンテンツ~フッター作成
・下層ページ1ページめのトップ作成#早起きチャレンジ#駆け出しエンジニアと繋がりたい#100DaysOfCode
- 投稿日:2020-03-19T00:43:20+09:00
永遠に続くクソ計算クイズつくた 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