2017-07-02

ウェバイス（ウェブ＋デバイス）をつくろう！ 😎

つくったもの

先日、「エンタープライズIoTLT #8 ヘルスケアIoTLT」で発表させていただいた資料を若干調整して公開してみました。

b2b-ch.infomart.co.jp

発表資料

ウェバイスをつくろう from ふみたかきみづか

IoTほど大袈裟ではないのですが、ウェブ＋デバイスでインターネットに繋がるデバイスをつくる方法を紹介しています。
お手軽なので、簡単なモックなら量産できます。

Twitterでも一部公開しているのでぜひともご覧ください！（ウェバイス以外もありますが）

twitter.com

いままでつくったウェバイスまとめ

サプライズ・ウィンドウ

ガラケーにプラ板をくっつけることによって、車の窓の外を走る忍者を再現したウェバイスです。
僕がウェバイスを思いつくきっかけになった思い出の一品です。

黄金チャーハン

光り輝く黄金チャーハン

クロッシュの中にスマホを入れて、開いた時（傾いたとき）に音と光でチャーハンを盛り上げるウェバイスです。

合コンさしすせそボタン

合コンさしすせそボタン from 高橋奈々 on Vimeo.

ボタンの付いた箱の中に、ワイヤレスキーボードとiPhoneが入っていて、
ボタンを押す ⇒ ボタンがキーボードを押す ⇒ ウェブページで検知 ⇒ 音が出るというピタゴラスイッチ的なウェバイスです。
こちらは実装のみを担当しております。

スマート絵馬

絵馬の中にスマホを入れて、遠くの人でも願いごとを投稿できるようにしたウェバイスです。

マットマックス 4DX

マットの下に、PC、センサ、Arduino、振動子といろいろ入れ込んだウェバイスです。
振動で踏み心地が変化します。
ハプティクスはムービーではなにも伝わらないであろうと思い、Facebookによく流れてくる動画広告を参考に映像をつくりました。

いかがでしょう。普通にデバイスをつくるよりも高速につくれるので体験の検証とかにはおすすめです。

黄金チャーハンが完成するまでの道のりの記録です。 #裏クリ https://t.co/wUTRZO02b9
— 君塚史高 (@ki_230) 2016年12月13日

ツイッターやってます！

2017-06-26

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

CSS

kimizuka.hatenablog.com

以前、CSSでiPhone5をつくったことがありましたが、
流石に古くなってきたので、iPhone7につくりかえてみました。

以前のコードと比べると、要素数が少なくなっていて成長を感じますね。
（before、after、box-shadowをつかうようになりました）
左右のボタンを1つの要素にしてbox-shadowで増やそうかとも思ったのですが、微妙に角丸にしたかったのでサイレントスイッチを削りました。
ものすごく頑張れば再現できた気もしますが、シンプルさを重視した結果です。

DEMO

See the Pen iPhone7 by kimmy (@kimmy) on CodePen.

HTML

<div id="body">
  <div class="camera"></div>
  <div class="speaker"></div>
  <div class="screen"></div>
  <div class="home"></div>
</div>

SCSS

* {
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -webkit-backface-visibility: hidden;
}

body {
  background: #aaa;
}

#body {
  position: absolute;
  top: 0; bottom: 0;
  left: 0; right: 0;
  margin: auto;
  border: solid 3px #6a6a6a;
  border-radius: 56px;
  width: 419px; height: 861px;
  background: #080808;
  transform: scale(.6);

  .camera {
    position: absolute;
    top: 44px; left: 155px;
    margin: 0 0 0 -7px;
    border: solid 3px #6a6a6a;
    border-radius: 50%;
    width: 6px; height: 6px;
    background: #1a1a1a;
  }

  .speaker {
    position: absolute;
    top: 44px; left: 50%;
    margin: 0 0 0 -34px;
    border: solid 3px #6a6a6a;
    border-radius: 10px;
    width: 60px; height: 5px;
    background: #1a1a1a;
  }

  .screen {
    position: absolute;
    top: 0; bottom: 0;
    left: 0; right: 0;
    margin: auto;
    width: 375px; height: 667px;
    background: rgba(255, 255, 255, .1);
  }

  .home {
    position: absolute;
    bottom: 18px;
    left: 0; right: 0;
    margin: auto;
    border: solid 3px #6a6a6a;
    border-radius: 50%;
    width: 60px; height: 60px;
    background: #080808;
  }
  
  &:before {
    display: block;
    position: absolute;
    top: 180px;
    left: -6px;
    border-radius: 5px 0 0 5px;
    width: 6px; height: 50px;
    content: "";
    background: #2b2b2b;
    box-shadow: 0 70px 0 #2b2b2b;
  }

  &:after {
    display: block;
    margin: 180px 0 0 419px;
    border-radius: 0 5px 5px 0;
    width: 6px; height: 50px;
    content: "";
    background: #2b2b2b;
  }
}

2017-06-23

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

Mac

404.kimizuka.fm

どうしても404ページでNOT FOUNDを流したかったので、近所のサーバサイドエンジニアに頼み込んで設定方法を教えてもらいました。

/etc/nginx/conf.d/ 以下に hogehoge.conf という設定ファイルをつくり、

server {
    ...
    error_page 404 /404.html;
    ...
}

という感じでエラーページを指定すればOKです。
僕の環境の場合、404.htmlを用意した場所がrootの外だったので、

server {
    ...
    error_page 404 /../404.html;
    ...
}

という感じで指定する必要がありました。
無事に404ページでNOT FOUNDが流せるようになったので良かったです。感謝。

みかづきブログその3

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