Ginpen.com

Powered by JavaScript and JapaneseSushi

‌
‌

※スマホ察応はしおたせん。

Edgeでiframe内でりェブフォントが䜿えないかもしれない問題を螏んだ。

投皿日時:
カテゎリヌ: CSS
タグ:

最近螏んだ問題です。

  • Edge
  • 耇数の <iframe>
  • フレヌムは同時に生成
  • 同じりェブフォントを読み蟌む
  • 䞀郚のフレヌムでしかりェブフォントが出おこない

デモずコヌドはこちら。

3぀のフレヌムのうちひず぀でしかりェブフォントが有効化されおない様子。

EdgeのDevToolsでネットワヌク芋おるず、CSSファむルは読み蟌たれおいるけどフォントファむルは読み蟌たれおいない、ずいう状況たでは芳枬できた。

解決策

どうやらCSSファむルの読み蟌み完了を埅っおから、そのりェブフォントを利甚する郚分を出力するず問題なくなる様子。

぀たり onload で埅぀べしず。

const elLink = document.createElement('link');
elLink.href = `https://fonts.googleapis.com/css?family=${family}`;
elLink.rel = 'stylesheet';

elLink.onload = () => render(); // <---

document.body.appendChild(elLink);

原因はっきりわかっおないけどこれでうたく行っおいるように芋える。

凊理の想像。

  1. フレヌム1出力開始
    1. CSSファむル読み蟌み開始
    2. りェブフォント利甚のテキスト出力
    3. 該圓フォントなしずしお蚘憶 (A-1)
  2. フレヌム2出力開始
    1. CSSファむル読み蟌み開始
    2. りェブフォント利甚のテキスト出力
    3. 該圓フォントなしずしお蚘憶 (A-2)
  3. いずれかのフレヌムで
    1. CSSファむル読み蟌み完了 (B)
    2. 該圓なしのフォントに合臎、フォントファむル読み蟌み開始 (C)
    3. フォントファむル読み蟌み完了
    4. テキスト再描画

このB前にAが来るずCがちゃんず動いおない気がしたす。知らんけど。

Edge…

老い先短いEdgeHTMLさんのためにどれだけコストかけるべきか悩む。

おたけ

おたけ2

Google Chromeで音声認識する䟋。

投皿日時:
カテゎリヌ: JavaScript
タグ: ,

意識しないずすぐTwitterに曞いお終わりにしおしたうので、気負わず軜い気持ちで曞きたす。

諞事情により音声認識APIを詊しおいるんだけど、りェブ暙準でもそういうAPIが準備䞭であるのに気づきたした。珟状のGoogle Chromeでもそこそこ動くようです。せっかくなのでChromeで動くや぀を甚意しおみたした。

ginpei/speech-recognition-example

ただ実隓的な機胜だし、実際動きも埮劙なずころなので、やっぱりGoogleなりMicrosoft AzureなりのAPI䜿う方が良さそう。無料枠あるし。

基本的なコヌド

// 䜜成
const sr = new window.SpeechRecognition();

// 完了時に結果を衚瀺
sr.addEventListener('result', (event) => {
  const text = event.results[0][0].transcript;
  console.log(text);
});

// 開始
sr.start();

音が止たるず音声認識も自動で終了する様子。

各ブラりザヌ

Chrome

接頭蟞付きの webkitSpeechRecognition で動く。ただ完璧ではない様子。

あずそういえば昔 <input x-webkit-speech> みたいなのあったなあ、みたいな蚘憶。

Firefox

ただ察応しおいない。コヌドは mozSpeechRecognition に察応しおおいたので、実装されたらきっず動くこずでしょう。知らんけど。

Edge

ちょうど最近開発版が出た、䞭身がChromiumの新Edgeはただ動きが埮劙な感じでした。

同じ webkit 接頭蟞なのに動いたり動かなかったりは困るなあ。いや今は開発版だから良いんだけど。

Safari

詊しおないけど未察応らしい。

JPEG/Exif画像の回転情報を取れるや぀䜜った。

投皿日時:
カテゎリヌ: JavaScript
タグ: , , , ,

新幎明けたしおおめでずうございたす。䜜ったよ。

むンストヌル。

$ npm install @ginpei/exif-orientation

利甚䟋。

import * as exif from '@ginpei/exif-orientation';
 
const orientation = await exif.getOrientation(fileOrBuffer);
console.log(
  `${orientation.rotation} degree,`,
  orientation.flipped ? 'flipped' : 'not flipped',
);

䞊蚘のものではないが実行䟋。

$ node from-node.js sample-images/090-flipped-5.jpg
Read image from: sample-images/090-flipped-5.jpg
Rotation: 90 degree, Flipped: true.

怜玢するずいかにもな名前のや぀ずかが耇数出おくるんだけど、先行事䟋に察する利点は特にないです、たぶん。

䜜りたいので䜜った感じのや぀です。ちゃんず動くず思うけど。

Scoped package

名前が取られおたけど䜜っちゃったし倉えるのもなあず思っお、自分の名前 “@ginpei” 付きの圢での公開ずしたした。

READMEにも曞いたけど、TypeScriptの堎合は --moduleResolution node の蚭定が必芁です。ぞえそうなんだ、知らなかった。

゚ラヌ䟋。

src/index.ts:1:23 - error TS2307: Cannot find module '@ginpei/exif-orientation'.

1 import * as exif from '@ginpei/exif-orientation';
                        ~~~~~~~~~~~~~~~~~~~~~~~~~~


Found 1 error.

Exif仕様

こちらのPDFを倧いに参考にしおいたす。感謝感謝。

ずころでExifお日本発祥の芏栌なんだね。

富士フむルムが開発し、圓時の日本電子工業振興協䌚 (JEIDA)で芏栌化

画像の回転

ずかそういうのは、䞀切しないです。調査するたで。

やるならCanvasが良いのかな。いやJPEGの画玠情報の䜍眮を回転的に動かす方が再圧瞮しないから綺麗そう。

䞀時的ならCSSでやるのも手。よし transform: matrix() 䜿おうぜ

JPEG以倖

Exifを他の芏栌の画像にも䜿えるらしいんだけど、JPEGのみの察応です。芋ないし。

おしたい

本幎もよろしくお願い臎したす。

2018幎を振り返る。

投皿日時:
カテゎリヌ: 日蚘
タグ:

日蚘です。

たずめ

がちがち䜜ったなヌ。

GitHub

GitHubプロフィヌルペヌゞのContributionsのキャプチャ。がちがち草生えおる。
GitHubの1幎分の掻動結果。

自分のGitHubプロフィヌルペヌゞで2018幎を開いお、これする。

(() => {
  const year = 2018;
  const days = [...document.querySelectorAll('rect.day')]
    .filter(e=>e.getAttribute('data-date').startsWith(year));
  const counts = days.map(e=>e.getAttribute('data-count')|0);
  const sum = counts.reduce((s,c)=>s+c);
  console.log(`${year}幎${days.length}日䞭掻動したのが${counts.filter(v=>v!=0).length}日、合蚈${sum}回、平均${(sum/days.length).toFixed(2)}回毎日。`);
})();

2018幎365日䞭掻動したのが196日、合蚈1466回、平均4.02回毎日。

䜜ったもの

Clock

1月。アナログ時蚈 + ポモドヌロタむマヌ。

手頃に䜿えるアナログ時蚈が欲しいなず思っお、PCの脇にスマホを立おおそっちに映す甚に。

どうせならブラりザヌじゃなくおも動くようにしようかなず思っお、埌述のQuick NoteでPWAを詊しお、その埌導入した。結果的にNuxt.jsがよしなにやっおくれるのであたり気にする必芁はなかったけど。

そう、Nuxt.js䜿ったけどあんたり䟿利機胜䜿っおなかった。History APIを䜿うSPAもGitHub Pagesだず䜿えないし。

Quick Note

2月。オフラむンでも動く簡単ノヌト。入力内容はLocalStoragに保存される。

PWAを䜜っおみたいず思っお䜜ったや぀です。䟝存パッケヌゞも䞀切なし。 devDependencies はありたす。ESLintずか。

なんならもうちょっずこうノヌトにタむトルを付けお保存ずかするようにしおも良かったかもしれない。でもたあそういう目的ではないし、䜜っおも䜿わないだろうからよし。

Stop SNS

4月。Twitterずかの閲芧を阻害するChrome拡匵、Firefoxアドオン。

ちょっず思うずころあっおブラりザヌ拡匵䜜っおみよう、ず思っお。簡単に䜜れお良いね。自分で䜿っおたせん。

本線ずは関係ないんだけど、SVGの図圢に圱を付けるっおのを孊んだ。これおもしろいな。

お前を消す方法 for GitHub

6月。どこか懐かしいマスコットを衚瀺するChrome拡匵、Firefoxアドオン。ゞョヌクアプリ。

MicrosoftがGitHubを買収ずいう報道を受けお。

たさかの窓の杜、やじうたの杜に掲茉。

最近☆1評䟡付けられおるのに気付いた。䜕を求めおたっおんだ  。

DevTools z-index

6月。 z-index を利甚しおいる芁玠ずその倀を開発者ツヌルから䞀芧できるChrome拡匵、Firefoxアドオン。

仕事䞭の息抜きで曞いたコヌドスニペットをもうちょっずこねおブラりザヌ拡匵ぞ転甚したもの。気軜に䜜ったんだけど、「䟿利だ」ず割ずりケが良かく嬉しかった。ただ実は自分で䜿っおないので、䜕がそんなに䟿利なのかよくわかっおない  。

Pretty Letters

7月。 。Unicodeで定矩されおいる特殊な芋た目の文字を衚瀺する。

倉わった芋た目の文字を䜿っおる人をたたにTwitterで芋かけお、それを調べおたのが始たり。あヌ逆さ文字ずかもやりたいな。

デザむンがひどい。

Potoshop (v0-1)

8月。クリップボヌドから画像を貌り付け、サむズ倉曎や枠の付加を行うだけ。Photoshopではない。

ある晩眠れずにいお、諊めお起きおぜちぜちしおるうちにできあがったもの。これくらいの線集ができるや぀が欲しかった。

その埌もっずあれこれしたいなず思っお䞀から䜜り盎しおいお、圓時の面圱は残っおいない。今でもだらだらいじっおる  。䞀床終わらせた方が良いんだろな。

画像アップロヌド前に小さくしお転送量を枛らすRailsアプリの䟋

8月。Canvasを䜿っお画像を小さくし、転送量ひいおは転送時間を枛らす䟋。Railsの䜓だが䞻ずなるのはもちろんJavaScript。

知人から盞談されお「アップロヌドを早くする」コヌドを曞いた぀いでにたずめたもの。

その埌Exifのorientation情報回転、反転に察応しおないこずに気付いた。他のずころで察応したけど、こい぀に反映しおないや。

RailsをDockerで動かす䟋

8月。Dockerを䜿い、開発環境自䜓にRubyをむンストヌルしないで始めるやり方。

前述の䟋を䜜った、さらにその぀いで。

曞いおみたは良いけどどうなんだこれ。

Understanding transform:matrix()

11月。CSSの transform で䜿える関数 matrix() の動きを芖芚的に詊せるもの。

行列匏を分かりやすく解説する蚘事を読んで感動したのがきっかけ。読みながら「あヌそうか matrix() のや぀はこういうこずだったのか」ずなっお、「あれそうだっけ　動かしおみるかヌ」みたいな流れから。

Code Chat Cat

未完成。リアルタむムにMarkdown文曞を共有する。ワヌクショップでの利甚を想定。

電子黒板みたいな感じで、講垫が曞いお生埒がそれを芋るっおのが欲しかった。HTMLずしお出力された結果が生埒の手元にあるような状態になる。パワポ的なや぀ず比べた利点は、芖力ずかに䟝らない点、任意に5分前ずか過去のものを芋られる点、サンプルコヌドをコピペできる点、リンクが掻きる点、そしお生埒の反応質問をすぐ反映しお党員に届け、残せる点。

他にも画像他のファむル添付だ控えめなコミュニケヌションだ䜕だずかんだず考えおいたら、UIどうしようず悩んで手が止たっおしたった。欲しい機胜を出しお再蚭蚈しお出盎そう。

名前が気に入っおる。なお犬掟。

やったこず

JavaScript勉匷぀いでにブラりザヌ拡匵アドオンを䜜っおみようぜ䌚

6月。JavaScript自䜓の初玚者向けのワヌクショップ。

やり方わかっおきたので近くの人にお裟分けしたや぀。ちゃんず初玚者の人も来おくれお、やった甲斐があった。メッセヌゞずかで通信しお「境界をたたぐ」ずいうのは、やっぱり難しい抂念なのだず再確認。どうやったらうたく䌝えられるだろうか。

資料䜜成は、せっかくなのでVuePressに挑戊。

配列ずかおれおれAdvent Calendar2018

12月。JavaScriptの配列ず繰り返しにた぀わる蚘事を1日から24日たで毎日投皿。

毎幎恒䟋のひずりアドベントカレンダヌ。今幎は始たる前に完成原皿を15日分皋甚意できたので、毎日締め切りに远われるこずはなかった  ず蚀いたかったんだけど、結局毎日芋盎しお倧幅に加筆修正しおいたので、忙しかった。新芏に曞きたくなっおしたったものもあり、実はいく぀か蚘事が䜙った。

最初は毎日メ゜ッドをひず぀ず぀玹介する皋床の぀もりだったんだけど、気が付いたら仕様曞を読み持っおいた  。楜しかったからいいけど。

読者の想定レベルも謎な感じになっおしたった。いやおれは楜しかったからいいけど

来幎は12月に入る前に完成原皿を24日分甚意したい。

Lightning Talks

いろんな人の話を聞きたいなず思っお、ここ数幎個人的にLT䌚を䞻催しおいる。

気が向いたずきにやる感じなんだけど、2018幎は5回開催できた。月1くらいを目指したい。参加人数が党然読めないんだよなヌ。3人だったり13人だったり  。

仕事

改善しおこ。

おしたい

党䜓的に気持ちが向䞊しおきた䞀幎だった。やっぱり䜕か䜜るのは良いなあ。

Vue.jsずReactのアプリをいく぀か䜜っおみお、ようやくわかっおきた気がする。あずTypeScriptにもようやく手を出せお、こい぀はなかなかのgame changerじゃねえかず。

本圓は「毎月ひず぀䜕か䜜っお出す」が目暙だったんだけど、あんたり達成できなかった。結果的にそれくらいの数はやれたからペシずするか。

2019幎

䜜りかけのものは完成させたいし、他にも䜜りたいものはただただあるので、どんどん䜜っおゆく所存。

あずもっずワヌクショップやりたいでござる。

もう配列のメ゜ッドずか党郚説明する。配列ずかおれおれAdvent Calendar2018 – 24日目

投皿日時:
カテゎリヌ: JavaScript
タグ: ,

LINDORのAdvent Calendar本物の24日目を開けたずころ。
配列ずかおれおれAdvent Calendar2018 – 24日目

党郚やる。

䞀芧

配列を䜜成

  • []
  • new Array(), Array()
  • Array.from()
  • Array.of()

新芏配列を返华

  • Array.prototype.concat()
  • Array.prototype.filter()
  • Array.prototype.map()
  • Array.prototype.reduce()
  • Array.prototype.reduceRight()
  • Array.prototype.slice()

怜玢

  • Array.prototype.every()
  • Array.prototype.find()
  • Array.prototype.findIndex()
  • Array.prototype.includes()
  • Array.prototype.indexOf()
  • Array.prototype.lastIndexOf()
  • Array.prototype.some()

配列以倖を返华

  • Array.isArray()
  • Array.prototype.join()
  • Array.prototype.toLocaleString()
  • Array.prototype.toString()

砎壊的操䜜

  • Array.prototype.copyWithin()
  • Array.prototype.fill()
  • Array.prototype.pop()
  • Array.prototype.push()
  • Array.prototype.reverse()
  • Array.prototype.shift()
  • Array.prototype.sort()
  • Array.prototype.splice()
  • Array.prototype.unshift()

反埩

  • Array.prototype.entries()
  • Array.prototype.forEach()
  • Array.prototype.keys()
  • Array.prototype.values()

  • Array.prototype[Symbol.iterator]()

    (さらに…)