岩野響さん、15歳。職業は、コーヒー焙煎士 中学2年生の時にコーヒーの焙煎を始め、卒業後は高校に進むことなく、群馬県桐生市の自宅に焙煎所を兼ねたお店をオープン。持ち前の鋭い嗅覚と味覚をいかして焙煎されたコーヒーは地元で評判を呼び、ネットの記事がきっかけで市外からのお客さんが訪れるようになった。 1週間ぶんの豆を1日で売りきるという大盛況ぶり。焙煎への熱意と独学で身に付けた技術は、あの伝説の大坊珈琲店の大坊勝次氏も一目を置いているという。 15歳という若さで焙煎士になった岩野さんはどんな少年なんだろう？ コーヒー焙煎の道に進んだ経緯。焙煎士としての毎日やコーヒーに込める思い。そして、15歳の職人として今考えていること。都内に滞在中のご本人に会って話をうかがってきた。 毎日11時間、焙煎機の前に立つ15歳 滞在先の都内のホテルで初めてお会いした岩野さんは初々しくて穏やか。落ち着いた空気をまとっ

最近、よく見かけるスクロールすると文字とかの背景が横からブワッと出てきて、そのままブワッと消えて文字が現れるみたいなエフェクト。 例えばこういうのです。 https://tympanus.net/Development/BlockRevealers/ シンプルなレイアウトでも動きをつけることで単調にならないってメリットもあり、こういうエフェクトは重宝します。 実装する場合、いくつか方法はあるのですが今回は二つほど紹介します。 プラグイン「Block Reveal Effects」を使う方法 先ほどリンクを貼った「Block Reveal Effects」はcodropsで公開されています。 まずは以下のページの「Download source」から一式ダウンロード可能です。 https://tympanus.net/codrops/2016/12/21/block-reveal-effec

You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session. You switched accounts on another tab or window. Reload to refresh your session.

このドメインは、お名前.comで取得されています。 お名前.comのトップページへ Copyright © 2020 GMO Internet, Inc. All Rights Reserved.

ゲームやビジュアライゼーションのWebコンテンツでは、華やかな3D演出の実装をJavaScriptとWebGLで求められることがあります。この記事のシリーズでは、WebGLのJSライブラリとして有名なThree.jsを利用して、3Dエフェクトの作成手順を解説します。 今回、扱うテーマは「マグマエフェクト」。実は以前、このテーマを3Dエフェクト作成ツールであるEffekseerエフェクシアーで扱ったことがあります（記事「エフェクト作成入門講座 Effekseer編 UVスクロールを使ったマグマエフェクトの作成」)。Effekseerはプログラムを使わないデザインツールなので、今回紹介するThree.jsによるプログラムの作り方とはまったく異なります。ですが、表現のエッセンスはどんな作り方でも共通。エフェクトの実装ポイントが理解できていれば、異なった方法でも同じ表現を実装できるのです。 本記事

Granim.jsCreate fluid and interactive gradient animations with this small javascript library.

本日、20時から、 「ニコニコ動画」で、 「百田」さんと「及川」さんの対談があります。 本当に重要な対談です。 今、世界で何が起きようとしているのかを知ることができます。 もう「陰謀論」という言葉はないんです。 本当の自由を勝ち取ろうとする民主主義者が殺され続けています。 誰に？ 偏向報道にです。 真実を知ろうよ。 日本メディアは動けないんです。 「動かない」ではなく、 「動けない」んです。 だったら、 自分たちで真実を知りに行きましょうよ。 ASKA 今なら、僕も時間があります。 そして、すべてには「タイミング」というモノがあります。 それが重なった 「今」 個人Twitterを始めました。 ASKA @ASKA_Pop_ASKA ASKA オフィシャルはオフィシャル。 大事なことは「オフィシャル」から発信。 初めての「Twitter」 個人ではやらないと決めていたけど、 今、ここで始め

今、スマホアプリ「SNOW」で、顔写真に動物のパーツをデコったり複数人の顔を入れ替えて、おもしろい写真へ編集することが若い女性の間で流行っています。 このアプリには、画像から顔を検出できるフェイストラッキングという技術が使われています。この技術を使うと、画像から顔のパーツの位置や大きさを特定できるようになり、静止画やアニメーションを重ねるといった演出を加えられます。 フェイストラッキングの技術は昔からありましたが、高度な画像解析の知識が必要なため導入するにはハードルの高いものでした。今回は、JavaScriptライブラリを使って、HTML5でフェイストラッキングを実現する方法を紹介します。 Webテクノロジーでフェイストラッキングに挑戦しよう Webテクノロジーで簡単にフェイストラキングを実現するには、JSライブラリ「clmtrackr」がオススメです。このライブラリでは、負荷が高いフェイ

先日LINE社より先着1万名限定でBOTアカウントを自由に開発できる「BOT API Trial Account」が発表されました。 今後LINEだけでなくFacebookなどもbotのAPIを公開する方向でbotサービスが流行りそうな兆しをみせています。 と、いうことで当編集部でもLINEのAPIを利用してサンプルbotを立ち上げてみました。全くエンジニアじゃなくても『なるほどこうなってるのね』と理解するためにもぜひお試しください。 1.LINE BOTのトライアルアカウントを取得アカウントの取得はLINEのビジネス向けポータルサイト「LINE BUSINESS CENTER」 から、利用登録を行います。 （2016年4月15日現在募集上限に達してしまった様です。） https://business.line.me/ 2.アカウントを作るときにbotの見た目を決めるLINEアカウントを作

PHPカンファレンス2016＠北海道の資料です http://phpcon.sapporo-php.net/2016/

概要 つい一ヶ月前に提案された深層学習モデルであるDeep Convolutional Generative Adversarial Networks (以下DCGAN)をchainer上で実装した． 70万枚もの大量のイラストを使ってDCGANにイラストらしさを学習させた． 得られたモデルを利用して，コンピュータにイラストを描かせてみた． 結果としては結構上手く行った．本物と見分けがつかないというレベルではないものの，DCGANは正常にイラストらしい画像を生成できている． ネタが盛大に被って本当につらい はじめに DCGANという画像を生成するニューラルネットをchainerで実装しました。恐るべきことに、今までにない美麗さで二次元イラストも自動生成できます…！https://t.co/C8P8GbzWN1 pic.twitter.com/DWwGhF9itw — おそるべし抹茶パワー

PFNのmattyaです。chainerを使ったイラスト自動生成をやってみました(上の画像もその一例です)。 20日目の@rezoolabさんの記事(Chainerを使ってコンピュータにイラストを描かせる)とネタが被っちゃったので、本記事ではさらに発展的なところを書いていきたいと思います。一緒に読んでいただくとよいかと。 概要 Chainerで画像を生成するニューラルネットであるDCGANを実装した→github safebooruから顔イラストを集めてきて学習させた 学習済みモデルをconvnetjsで読み込ませて、ブラウザ上で動くデモを作成した→こちら(ローディングに20秒程度かかります) アルゴリズム 今回実装したDCGAN(元論文)はGenerative Adversarial Networkというアルゴリズムの発展形です。GANの目標は、学習データセットと見分けがつかないようなデ

ニューラルネット用の JavaScript ライブラリ ConvNetJS を使って iris の分類を行ってみました。 ConvNetJS 0.3.0 ConvNetJS は Web ブラウザ上でも実行できますが、今回は Node.js で実行します。 ソースは http://github.com/fits/try_samples/tree/master/blog/20160215/ 準備 iris データセットの取得 iris データセット （iris.data） は https://archive.ics.uci.edu/ml/datasets/iris からダウンロードできます。 iris.data の 151 行目（改行のみの行）は邪魔なので削除しておきます。 ConvNetJS インストール 今回は npm で ConvNetJS をインストールしました。 ConvNetJS

CSSでできる事がどんどん増えてます。JavaScriptを使って実装するようなレイアウトやUIも、CSSだけで作れちゃうほど、便利なプロパティがじゃんじゃか増えましたね。ここでは、要素にアニメーション効果をつけるためのCSSを使ったエフェクトについて、まとめてゆこうと思います:)。 CSSで動かす 「動く」といっても、自由自在にぐにゃぐにゃ動かせるわけではなくて、CSSアニメーションでは、プロパティの数値をスムーズに増減させることで、要素のスタイルを滑らかに変化させます。 例えば、下のサンプルでは、p要素にカーソルを合わせた時に、font-sizeの値を、1emから2emに、スムーズに変化するように指定しています。 p { transition: font-size 1s; } 動かすためのマストプロパティ CSSでアニメーションさせるために必要不可欠なのがtransitionプロパティ