2016/05/18

[mac]和文フリーフォント集を購入

書籍というよりもツールとして購入

CD付 和文フリーフォント集
大谷 秀映
翔泳社
売り上げランキング: 41,473
全部のフォントが商用利用できるのかなーっと思っていたら、どうやらそうではないようだ。

製作者に許諾の確認をとったり、お金を支払わないといけないケースもあったりと、めんどくさいなー。

どうせなら、商用フリーのだけ集めたフォント本があってもいいと思うのだが。

2016/05/17

[Instagram]一部のAPIがDeprecate

Facebookの投稿で一部のInstagramのAPIがDeprecateを知って、公式サイトで確認したら、確かに、そうなっていた。

Deprecate対象となっているのは、下記のAPI

/users/self/feed
/media/popular
/geographies/media/recent
/users/USER-ID/follows
/users/USER-ID/followed-by
確実にInstagramの視聴時間をあげるためのDeprecateですね。

「/media/popular」が取得できてしまうと3rdパーティ製のアプリで満足できてしまうので。

それを裏付けるかのように未だに3rdパーティアプリから写真の投稿ができないようになっている。

正式に広告で収益をあげていこうという戦略ですね。

Platform Changelog

2016/05/16

[本][漫画]ミイラの飼い方 1

みー君がかわいいっす。

ミイラの飼い方(1) (アクションコミックス(comico BOOKS))
空木 かける
双葉社 (2016-02-12)
売り上げランキング: 4,436

2016/05/15

[本]新企画 渾身の企画と発想の手の内すべて見せます

読了

新企画 渾身の企画と発想の手の内すべて見せます
鈴木 おさむ
幻冬舎 (2016-03-17)
売り上げランキング: 235
放送作家である鈴木 おさむの企画を練り方が体型的に描かれている良書。

ケーススタディーも描かれており頭の中を整理しながら読むことができた。

普段かかわらない人にこそ企画は眠っているなんて、実は、すでに実践していた内容なので納得。
自分の仕事に全然関係のない人と話すことで、商習慣を知ったり、今までになかった発想が手に入ったりするんだよね。
だから、定期的に違う部署の人をランチに誘うことでブラッシュアップしている。

企画はタイトルが9割なんていうのも、webサービスを作る上でネーミングを大切にしたり、企画を考える時に、面白そうかつ覚えやすそうな名前を考える時に意識していたりする内容だったりするので、よくわかるーっと思った。

実践してなかった内容は、繰り返し見返すようにして、定期的に使うように心がけようかなと。

2016/05/14

[PhotoShop]ハートを描画する

PhotoShopを使ってハートを描画するにはどうすればいいだろうか?

カスタムシェイプを選択

シェイプの項目からハートを選択する

レイヤーに描画する

思った以上に簡単だった。

2016/05/10

[iOS][JavaScript]File APIがサポートされていない

下記のようなプログラムをたたいたら、エラーがでた。

var base64;
var binary = atob(base64);
var buffer = new Uint8Array(binary.length);
var blob = new Blob([buffer.buffer]);
new File([blob]'hoge')
エラーの内容は、
file fileconstructor is not a fileconstructor
という文言だったのですが、stackoverflowでも
Alternative for File() constructor for safari
という質問があり、回答としては、new File()はサポートしていないようです。

File API
にも書いてあった。

2016/05/09

[iPad]初代iPadをリサイクル

2010年ごろ購入した初代iPadを渋谷にあるapple storeにリサイクルに出しました。

事前の申請なく、店員さんにリサイクルしたいと伝えればその場で、書類に2、3項目書いて終了。

特に費用もかからず。

捨てるに捨てることができないので、こうして、正規店に引き渡すと安心するので、備忘録として1エントリー。

2016/05/08

[JavaScript]画像の圧縮を行う

input type のfileから取得した画像データを圧縮するにはどうすればいいのだろうか?

$('input[type="file"]').on('change',function (e){
  var $currentTarget = $(e.currentTarget);
  var path = $currentTarget.val();
  path = path.toLowerCase();

  var file = e.currentTarget.files[0];
  var size = file.size;
  var type = file.type;
  var filename = file.name;
    
  var dataUrl = URL.createObjectURL(file);

  var image = new Image();
  image.onload = function(){
    var width = image.width;
    var height = image.height;
    var ratio = 0.5;

    var canvasWidth = Math.floor(width * ratio);
    var canvasHeight = Math.floor(height * ratio);
    var $canvas = $('<canvas></canvas>');
    var canvas = $canvas[0];
    canvas.width = canvasWidth;
    canvas.height = canvasHeight;
    
    var ctx = canvas.getContext('2d');
    ctx.drawImage( image , 0, 0, width, height, 0, 0, canvasWidth, canvasHeight);
    var base64 = canvas.toDataURL(type);
  };
  image.src = dataUrl;
});
元の大きさの画像を半分にする処理なのですが、0.5のところを調整すれば、拡大したりすることも可能。

この処理では、実際に、html内に、inputだけあればよく、canvasタグとimgタグを用意しなくても処理を実行できちゃうところが便利ですね。

参考
クライアント側でcanvasを使って画像をリサイズする

2016/05/07

[jQuery][JavaScript]Swiperプラグインの自動ローテーション

Swiperプラグインで自動ローテーションをするにはどうすればいいのだろうか?

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/3.1.0/css/swiper.min.css">
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/3.1.0/js/swiper.jquery.min.js"></script>
<style>
body {
    margin: 0;
    padding: 0;
}
 
.swiper-container {
    width: 500px;
    height: 300px;
    margin: 20px auto;
}
 
.swiper-slide {
    text-align: center;
    font-size: 18px;
    background: #fff;
     
    /* Center slide text vertically */
    display: -webkit-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    -webkit-justify-content: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    -webkit-align-items: center;
    align-items: center;
}
</style>
<!-- Swiper -->
<div class="swiper-container">
    <div class="swiper-wrapper">
        <div class="swiper-slide">Slide 1</div>
        <div class="swiper-slide">Slide 2</div>
        <div class="swiper-slide">Slide 3</div>
        <div class="swiper-slide">Slide 4</div>
        <div class="swiper-slide">Slide 5</div>
        <div class="swiper-slide">Slide 6</div>
        <div class="swiper-slide">Slide 7</div>
        <div class="swiper-slide">Slide 8</div>
        <div class="swiper-slide">Slide 9</div>
        <div class="swiper-slide">Slide 10</div>
    </div>
</div>
<script>
jQuery(function($){
  new Swiper('.swiper-container'{
    autoplay: 2500
  });
});
</script>
という形で、autoplayパラメータを設定すればおk

こうすればオートローテーションする。

2016/05/06

[Google App Engine]Rubyをサポート

キタ!!

We’re excited to announce that Ruby runtime on Google App Engine is going beta.

via:Ruby on Google App Engine goes beta
まだbetaなので正式リリースまでもうしばらく待つのかもしれない。

日本だとPythonよりもRubyが人気なので、さらにユーザー数が増えるかもしれない。