みかづきブログ その3

本ブログは更新を終了しました。通算140万ユーザーの方に観覧頂くことができました。長い間、ありがとうございました。

👆

引越し先はこちらです!

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

こどもが生まれてからは、朝、一緒にEテレを観てから出社してます。先日、いつものようにEテレを観ていたら、「コニちゃん」というキャラクターがでてまして、にほんごであそぼ コニちゃん満腹 [DVD]Nhk エンタープライズAmazon「そういえば、ポンキッキーズ…

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で連続魔が使えるようになったとき、最強じゃないかと思いました。https://itunes.apple.com/jp/app/final-fantasy-vi/id719401542?mt=8&uo=4&at=10l16903…

はじめての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も対応してくれるとう…

フロントエンドエンジニアがさくらVPS で Ubuntu + Nginx + Node.js + Express + webpackの環境を整えるまでの道のり - その6 Expressのディレクトリ調整とpm2の導入 😎

春ですね。^ ^なにか新しいことをはじめたくなりますね。^ ^前回はExpressの導入を行いました。 今回は、webpackを導入します。kimizuka.hatenablog.comkimizuka.hatenablog.comkimizuka.hatenablog.comkimizuka.hatenablog.comkimizuka.hatenablog.com …

webpackを導入してPostCSSをCSSに変換してCSSファイルを書き出せるようにする。 😎 (フロントエンドエンジニアがさくらVPS で Ubuntu + Nginx + Node.js + Express + webpackの環境を整えるまでの道のり - その5)

春ですね。^ ^なにか新しいことをはじめたくなりますね。^ ^前回はwebpackをつかってJavaScriptでimportをつかえるようにしました。 今回は、webpackでPostCSSをつかえるようにします。kimizuka.hatenablog.comkimizuka.hatenablog.comkimizuka.hatenabl…

webpackを導入してフロントのJavaScriptでimportをつかえるようにする。 😎 (フロントエンドエンジニアがさくらVPS で Ubuntu + Nginx + Node.js + Express + webpackの環境を整えるまでの道のり - その4)

春ですね。^ ^なにか新しいことをはじめたくなりますね。^ ^前回はExpressの導入を行いました。 今回は、webpackを導入します。kimizuka.hatenablog.comkimizuka.hatenablog.comkimizuka.hatenablog.com ゴールまでの道のり VPSサーバ借りる Ubuntu入れ…

フロントエンドエンジニアがさくらVPS で Ubuntu + Nginx + Node.js + Express + webpackの環境を整えるまでの道のり - その3 - Expressの導入とwebpackを入れる決意を固めるまで 😎

春ですね。^ ^なにか新しいことをはじめたくなりますね。^ ^前回はnodebrew、Node.js、npmのインストールを行いました。 今回は、Express か Koa を選んで導入していきましょう。kimizuka.hatenablog.comkimizuka.hatenablog.com と、思いましたが。決め…

フロントエンドエンジニアがさくらVPS で Ubuntu + Nginx + Node.jsの環境を整えるまでの道のり - その2 - nodebrew、Node.js、npmの導入 😎

春ですね。^ ^なにか新しいことをはじめたくなりますね。^ ^前回はUbuntuのインストールから初期設定までと、Nginxのインストール&起動を行いました。kimizuka.hatenablog.com今回ははりきって、nodebrew、Node.js、npmを導入していきましょう。 ゴール…

フロントエンドエンジニアがさくらVPS で Ubuntu + Nginx + Node.jsの環境を整えるまでの道のり - その1 - Ubuntu導入からNginxの起動まで 😎

Mac

春ですね。^ ^なにか新しいことをはじめたくなりますね。^ ^かれこれ7年ぐらいさくらのVPSをつかっているのですが、「さくらのVPS乗り換えキャンペーン」たるものをつかって新しいサーバに乗り換えてみることにしました。www.sakura.ad.jpいままでは、Ce…