みかづきブログ その3

3ヶ月つづけてみました。

YouTubeLiveでMacのウェブカメラで撮影している映像をライブ配信し、その様子をウェブページに埋め込んだプレイヤーに表示する方法

ひょんなことからYouTubeLiveをウェブページに埋め込む方法を調べました。 必要なもの Googleアカウント( https://accounts.google.com/SignUp ) Google Adsenseアカウント( https://www.google.co.jp/adsense/start/ ) Adsenseアカウントに紐付いたYouT…

シェルスクリプトで大量のwavファイルをmp3ファイルに変換する

Mac

ひょんなことから100本以上のwavファイルをmp3に変換しなければならなくなり、シェルスクリプトを書きました。 #!/bin/sh for file in *.wav do fileName=`echo ${file} | sed -e "s/\.wav$//"` ffmpeg -i ${fileName}.wav -ac 2 -codec:a libmp3lame -b:a 4…

夏のできごと まとめ(台無しプロダクト、MakerFaire、北仲COOP、IoTLT、Orphe + IoTアプリコンテスト)

ブログを書こう書こうと思いながら、嵐のように夏が過ぎていき、 このままだとにっちもさっちもいかなくなりそうなので、 雑な文章になってしまいますが、8月のできごとをえいや!という感じでまとめて振り返りたいと思います。 台無しプロダクト ふと、「よ…

CSSでポヨンとしたボタンをつくりました。

CSS

DEMO See the Pen Sphere Button by kimmy (@kimmy) on CodePen. HTML <div id="nav" data-current-index="0"> <div class="nav-dot" data-index="0"></div> <div class="nav-dot" data-index="1"></div> <div class="nav-dot" data-index="2"></div> <div class="nav-dot" data-index="3"></div> </div> SCSS %select { wi…

Canvasに紙吹雪を舞い散らせてみました。

DEMO See the Pen Confetti by kimmy (@kimmy) on CodePen. JavaScript class Progress { constructor(param = {}) { this.timestamp = null; this.duration = param.duration || Progress.CONST.DURATION; this.progress = 0; this.delta = 0; this.progres…

夏なのでCSSで蚊取り線香をつくって蚊が寄ってこないページをつくりました。

See the Pen mosquito coil with mosquito sound by kimmy (@kimmy) on CodePen.まず、CSSで蚊取り線香をつくりました。夏なのでCSSで蚊取り線香をつくってみました。https://t.co/wH0siWKl8e— きみづかふみたか (@ki_230) 2017年7月27日半円を互い違いに組…

レギュラー番組ゼロでもCM出演があれば暮らしていけるのだろうか?

こどもが生まれてからは、朝、一緒にEテレを観てから出社してます。先日、いつものようにEテレを観ていたら、「コニちゃん」というキャラクターがでてまして、にほんごであそぼ コニちゃん満腹 [DVD]出版社/メーカー: NHKエンタープライズ発売日: 2005/10/21…

GoogleMapにスクロールを吸収されるのは嫌だ(スマホでは2本指で操作したい)

kimizuka.hatenablog.com以前、PC版についてはこんな記事を書きましたが、スマホ版はどうしたもんかと思っていました。 (上に透明なDIVとかを置いてクリックすると消えるようにとかしてました)しかし、最近スマホでGoogleMapを見ると、2本指での操作が必要…

利き手に合わせてUIがうまれるまでの経緯 👐

ドメインを取ってから3年間、ずーっと工事中だったポートフォリオサイトですが、 ついに昨日公開できる状態になりました。Nginx + Express + React + Redux + PostCSSでポートフォリオサイトをつくりました。実験的なUIを採用してスマホファーストを心がけて…

個人的にはまったReactでHTMLと違う書き方をしなければならない箇所まとめ(class属性、style属性、scriptタグ、chrset) 👍

ドメインを取ってから3年間、ずーっと工事中だったポートフォリオサイトですが、 ついに本日公開できる状態になりました。Nginx + Express + React + Redux + PostCSSでポートフォリオサイトをつくりました。実験的なUIを採用してスマホファーストを心がけて…

ウェバイス(ウェブ+デバイス)をつくろう! 😎

先日、「エンタープライズIoTLT #8 ヘルスケアIoTLT」で発表させていただいた資料を若干調整して公開してみました。b2b-ch.infomart.co.jp 発表資料 ウェバイスをつくろう from ふみたか きみづか IoTほど大袈裟ではないのですが、ウェブ+デバイスでイン…

CSSでiPhone本体の素材をつくる その2

CSS

kimizuka.hatenablog.com以前、CSSでiPhone5をつくったことがありましたが、 流石に古くなってきたので、iPhone7につくりかえてみました。以前のコードと比べると、要素数が少なくなっていて成長を感じますね。 (before、after、box-shadowをつかうようにな…

Nginxで404ページをカスタムする

Mac

404.kimizuka.fmどうしても404ページでNOT FOUNDを流したかったので、近所のサーバサイドエンジニアに頼み込んで設定方法を教えてもらいました。/etc/nginx/conf.d/ 以下に hogehoge.conf という設定ファイルをつくり、 server { ... error_page 404 /404.ht…

連続する2つのツイートで1つのイラストを完成させるツイートボタンつくりました。 🐳

1行でまとめると こんな感じのことができるツイートボタンをつくりました。 はじめに こどもの頃、FF6で連続魔が使えるようになったとき、最強じゃないかと思いました。FINAL FANTASY VISQUARE ENIX INCゲーム¥1,800 クロノトリガーで2人技が使えるようにな…

はじめてのPixiJS 😇

いままで2DのものをつくるときはCanvasのAPIを直接叩いていたんですが、 ふと、ライブラリをつかってみようとおもいPixi.jsを試してみることにしました。 ドキュメント に目を通しながら探り探り書いたコードをメモしておきます。 JavaScript // tickerをつ…

iPadとかSurfaceとかを業務用のシステムに使いたい場合に他のアプリを使えないように制限をかける方法まとめ 📱

iOS

はじめに かつては業務用の専用機器の一部がiPadとかSurfaceに置き換わっていっています。 例えば、よく行く回転寿司屋はメニューがiPadになってますし、おいしいアップルパイ屋さん「RINGO」のレジはiPad(一部店舗だけかもしれませんが)ですし、サイゼリ…

CloudFlareでhttpsに対応させたページにhttpでリクエストが来たときにリダイレクトさせたいという想い 🤔

Mac

以前、 無料でhttpsの環境を手に入れるために導入 したCloudFlare。 大変便利に活用させていただいております。kimizuka.hatenablog.comこれまでは何も考えず、httpのアクセスをhttpsにリダイレクトする処理をフロントで行っていたのですが、 よくよく考える…

iOS10でYouTubeをインライン再生&複数同時に再生するサイトをつくれるか検証する 📱

結論 (2本目以降をミュートにすれば)できる! kimizuka.hatenablog.com昨日の検証 で、iOS10であればYouTubeをインライン再生することが難しくないことがわかりました。kimizuka.hatenablog.com以前、PC向けにYouTubeの動画を2本同時に再生するサイト をつ…

iOS10でYouTubeをインライン再生&自動再生&ループ再生を試してページの背景がムービーのサイトをつくれるか検証する 📱

結論 できる! kimizuka.hatenablog.com以前、iOS10のビデオタグの挙動を調べました が、 videoタグを直接使う機会よりも、YouTubeをつかう機会の方が圧倒的に多いため、YouTubeの挙動を調べてみました。iOS10のビデオに関しての仕様を整理すると、 playsinl…

iOS11ベータ版向けにつくったウェブコンテンツのデバックはSafari Technology Previewの手を借りると楽々 😀

最近、iOS11のSafari向けにコンテンツをつくって試してみることが多いのですが、 ウェブカメラをつかうコンテンツを試しているので実機で確認する必要があり、 ライトニングケーブルでMacと繋いでデバッグ しながら開発を進めたいのですが、 通常のSafariで…

「彼女とデイトなう」につかえるスクリプトを書きました。 😆

はじめに こちらのツイートがとても話題になってますね。そんなこんなで、ブームにのって、「彼女とデイトなう」を実装してみたいと思います。 仕様 まあ、ネーミング先行で中身をなにも考えてなかったので考えます。 Date.now();を実行すると、コンソールに…

iOS11向けにウェブARコンテンツをつくってみました。(マーカーレスの超簡易版) 🏃

追記:(2017/06/09 00:16) 本記事内に掲載している動画キャプチャが、 Apple.Incの開発者利用規約(APPLE BETA SOFTWARE PROGRAM AGREEMENT APPLE INC.)に抵触しているというご指摘をいただきました。 掲載内容を不適切と判断し、該当箇所を削除させてい…

ターミナルで画像をbase64にするぞ 😀

Mac

SublimeText2から3に乗り換えて、唯一の不満が画像をbase64に変換するところ。2では、画像をエディタにドラッグ&ドロップするだけでbase64化してくれるプラグインがあったのですが、kimizuka.hatenablog.com3では見当たらず。探し方が悪いだけかもしれませ…

いつの間にかaddEventListenerの第3引数にuseCaptureではなくAddEventListenerOptionsを渡せるようになっている。 😮

ことのはじまり きっかけはこの警告でした。 [Intervention] Unable to preventDefault inside passive event listener due to target being treated as passive. See https://www.chromestatus.com/features/5093566007214080 touchmoveが発火する度になん…

PCと同期していないiPhoneのミュージックアプリでアーティストが分裂(表記ゆれ)してしまったときの直し方 😭

Mac

アーティスト名の表記ゆれ問題 いつも便利に使わせていただいているiTunesなのですが、昔から1つだけ大きな不満がありました。 それは時々アーティスト名が表記ゆれすること。僕は良くスピッツが分裂します。 これはレコード会社が登録時に表記ゆれしていて…

Nginxでwwwありできたリクエストをwwwなしにリダイレクトする

Mac

サブドメインなしバージョンとサブドメインありバージョンを2つ書いて見ましたが、なんとかひとつに統一できないものか。 # サブドメインなし server { listen 80; server_name www.hogehoge.com; root /home/app/static-sites/loading/; return 301 $scheme…

JSON.stringifyに第3引数を渡して整形し出力する 😎

developer.mozilla.orgJSON.stringifyの第3引数でスペーシングの調整をすることができます。 preタグに出力したり、white-space: pre-wrapと組み合わせてつかうことで、 JSONを読みやすく出力することができます。下記のDEMOではどちらもスペーシングとして…

pタグ内の改行コードを改行する(Reactで改行を反映したいときなど) 😎

kimizuka.hatenablog.com JavaScript <p className="txt">{this.props.txt}</p> みたいな感じで、this.props.txtに、 ふるいけや\nかわずとびこむ\nみずのおとという感じで改行コード入りのテキストを渡したい時、 CSS .txt { white-space: pre-wrap; } とCSS側を工夫することで一応…

GW中に一番活躍したアプリを紹介します。(タクシー配車アプリ編) 🚖

iOS

今年のゴールデンウィークは家族3人がローテーションで風邪を引いてしまい、 連日のように休日病院や小児科に通っていました。我が家から最寄りの小児科、休日病院までは片道1.5km程度。 車を持っていないので、いつもはこどもを抱えて徒歩かベビーカーで通…

いつのまにかUQmobileの動作確認端末一覧にau版のiPhone6が増えている。 📱

いつのまにか増えてます。www.uqwimax.jpしかもデザリングもつかえます。僕が乗り換えた時 は対応してなかったから、iPhone SEを買い足したのに。 kimizuka.hatenablog.comまあ、SEのサイズ感、気に入ってるからいいんですが。 はやく7も対応してくれるとう…