みかづきブログ その3

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

👆

引越し先はこちらです！

シェルスクリプトで大量の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 48k -ar 16000 ${fileName}.mp3
done

ffmpegを導入済みだったので変換にはffmpegをつかっています。

kimizuka.hatenablog.com
kimizuka.hatenablog.com

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

つくったもの

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


台無しプロダクト

ふと、「よかれと思って機能を足した結果、元の機能を台無しにしてしまうこと」って多々あるようなぁ。と思い、
例を考えて「 #台無しプロダクト 」というハッシュタグを付けてTwitterに投稿するという活動を7月中旬からはじめました。

いくつか紹介すると、


みたいな感じです。

こちらの モーメント にまとまっています。
twitter.com


MakerFaire

台無しプロダクトの代表として、「光るまきびし」を制作して販売しました。

Make Tokyo Meeting の頃から何回か出展させていただいているのですが、
「物販ははじめて」 + 「使いみちがないものを販売する」 という2つが重なりとても緊張しました。
が。販売だと評判がダイレクトに売上につながるという緊張感が良いですね。
概ね好評だったので、とても嬉しかったです。


北仲COOP

横浜トリエンナーレ2017の関連展示として、「北仲COOP」というギャラリーがオープンしました。

yokohama-sozokaiwai.jp

会場の間に位置する馬車道駅そばの北仲エリアでは、これまで横浜のアートシーンに関わってきた人々による期間限定のギャラリーショップ「creative Shop & Gallery 北仲COOP」がお目見え。数百人の作家による数千点の作品を観て買うことができます。
http://yokohama-sozokaiwai.jp/eventreport/15948.html より引用

数百人の作家による数千点の作品を観て買うことができるんですね。＾ ＾

そして、ひょんなことから、こちらでも台無しプロダクトの代表として、「光るまきびし」を展示させて頂いております。

11月5日（日）までです。


IoTLT vol.30

IoT縛りの勉強会! IoTLT vol.30 @ DMM - connpass に参加させていただきました。

「ウェバイス」「合コンさしすせそボタン」「台無しプロダクト」と事例を詰め込みすぎたことを反省しています。
しかも、「台無しプロダクト」は大体IoTじゃないという。

www.slideshare.net

www.slideshare.net

※ 当日は1つのスライドになっていたものを分割してアップロードしました。


Orphe + IoTアプリコンテスト

ひょんなことから、 光るセンサーシューズOrphe(オルフェ)＋IoTアプリコンテストmeet up！ - connpass にて事例紹介をさせていただきました。

www.slideshare.net

ひとついえることは、Orpheはすごいということですね。



以上です。
9月はもうちょっとこまめにブログにまとめていきたいですね。

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 {
  width: 40px; height: 40px;
  margin: -20px;
  background: linear-gradient(#5C6BC0, #9FA8DA);

  &:after {
    opacity: 1;
  }
}

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

body {
  background: #E8EAF6;
}

#nav {
  position: absolute;
  top: 50%;
  left: 0; right: 0;
}

.nav-dot {
  position: absolute;
  left: 50%;
  box-sizing: border-box;
  margin: -16px;
  border: solid #1A237E 6px;
  border-radius: 50%;
  width: 32px; height: 32px;
  background: #fff;
  box-shadow: 0 8px 0 rgba(0, 0, 0, .25);
  cursor: pointer;
  transition: all .2s ease-in-out;

  &:after {
    display: block;
    position: absolute;
    top: 50%; left: 50%;
    margin: -13px -10px;
    border-radius: 10px;
    width: 20px; height: 18px;
    content: "";
    background: linear-gradient(rgba(255, 255, 255, 1), rgba(255, 255, 255, 0));
    opacity: 0;
    transition: all .2s ease-in-out;
  }

  &:nth-child(1) {
    transform: translateX(-90px);
  }
  
  &:nth-child(2) {
    transform: translateX(-30px);
  }
  
  &:nth-child(3) {
    transform: translateX(30px);
  }
  
  &:nth-child(4) {
    transform: translateX(90px);
  }
  
  @for $i from 0 through 3 {
    [data-current-index="#{$i}"] &:nth-child(#{$i + 1}) {
      @extend %select;
    }
  }
}

JavaScript

document.getElementById("nav").addEventListener("click", function(evt) {
  let index = evt.target.dataset.index;

  if (index) {
    this.dataset.currentIndex = index;
  }
}, false);