読者です 読者をやめる 読者になる 読者になる

DoBlogNeo's diary

プログラム、ファッション、雑貨製作記

ディープラーニングを勉強していたら、東北工業大学 中川教授のライトな文章に爆笑していたという話。

今年のイケイケIT業界(最近はNHKあたりも巻き込んで?)の流行語「ディープラーニング」
始まりは古く、2007年ごろからあって、金融業界が取引に活用しだし、googleのネコ発見器で人目に触れ、GPUパワーさえあれば誰でもやってみることができるようになり、つい最近、waifu2xという、人工知能を使った画像拡大が大きな話題になった。internet.watch.impress.co.jp

各IT著名人の方々も絶賛です↓d.hatena.ne.jp

www.publickey2.jp

「人類ここまで来たか」なWebサービスwaifu2xのロジックが気になりまして候、さっそく調べてみたけれど、もちろん門外漢にはわかるはずもない(笑)

そんなときに見つけたのがこの記事↓hennohito.cocolog-nifty.com

waifu2xの作者が元にした論文を読み解き、その中身を解説してくれてるんだが、なるほどわからん!
何だかわからないまま放置するのも悔しいので、記事中に出てきてた「畳み込みニューラルネットワーク」というキーワードについて調べてみた↓sinhrks.hatenablog.com

ま~これもわからない(笑)
だけれど、「たたみこみ」という専門用語があることはわかった。
そして、ありがたいことにこの記事からたたみこみについてリンクを貼ってくれていた↓www.ice.tohtech.ac.jp


この記事は、東北工業大学 情報通信工学科 中川朋子教授がたたみこみについて説明した記事で、びっくりするほど文章がうまいandおもしろい。
失恋を踏み台にたたみこみについて説明する発想もさることながら、たたみこみ分かりづらいよね→失恋→たたみこみ への話のつなぎ方がうますぎる。
この人なんなんだ一体、、、!と思っていたら、たたみこみについては忘れちゃった。てへぺろ

東北大と東大で学位を取り、現在は宇宙プラズマ物理学をやっておられるそうな。
正直、こういうバリバリの学者の人は、自身の頭が良すぎるせいで教えるのは苦手というイメージがあったけれど、中川教授の授業はきっとおもしろい+わかりやすいんだろうなと思う。

最近ビビッときたWEBサイト、ニュース (2015.3.24 - 5.1)

リベンジが実現する!?

japan.zdnet.com

アメリカンドラマ「リベンジ」に出てきた人格コピーアプリを実現しようとしてるパンクな会社が日本にあることに驚いた。その名は「オルツ

今でもありそうなドットコムバブル時代のWebサービス

blog.btrax.com

食品の販売サービスやペット用品サービスなど、
今でもありそうな(ネットコンシェルジュで紹介されてそうな)サービスが結構あるところが面白い。
時代は繰り返すのか、はたまた変わっていないのか、
個人的にはテキストサイトが復活してほしい!
侍魂よ、numeriよもう一度!(numeriはまだやってはるんだっけ?)

近距離匿名SNSはもうあった!! 海外の若者が使ってるSNSまとめ

blog.btrax.com

く、くやしい、、、!
自分の周囲何kmかにいる人とコミュニケーション取れたら面白いな、
いつか形にしたいなと常々思っていた。
この記事で知ったYik Yakは正にその系統のサービス。
海の向こうの大学生の間で爆発的に流行ってるらしい

.Netオープン化について更に詳しく語る会

codezine.jp

着々とオープン化してきている.Net含め、Microsoftの各プロダクト。
今までそういう分野での存在感が耐えられないほど軽かったMicrosoftだけど、
Typescriptなんかでジワリと大きくなってきてる。
.Netソフト、スマホアプリ、Webアプリも作ったことある経験からいって、
Visual Studioの使いやすさ(デバッグ、テストのしやすさ)はずば抜けてる。
Web/オープン系プロダクトの開発でもVisual Studioがメインストリームで使われるようになればなと思う。
まずはBUILD 2015で発表されたVisual Studio CodeでクロスプラットフォームVisual Studio
っていう文化?習慣?が根付く→みんなVSの圧倒的使いやすさにびびる→WebだってスマホだってVSで開発ってなれば素敵だのす。

www.publickey1.jp

www.publickey1.jp

d.hatena.ne.jp


エースコンバット3カムバックgigazine.net

知ってる人は知っている。知らない人には本当にどうでもいい。
エースコンバット3というフライトシューティングゲームに出てきた戦闘機は、
コフィン(棺)というコックピットに乗って思うままに機体を扱う操縦スタイルだったんだけど、
現実も一歩一歩近づいてきたよねって話。

この記事で動かしてる戦闘機は、記事タイトルが煽ってるせいで実物と感じちゃうけど、
なんのことはない、「シミュレーター」の中で動かしているだけ。
でもそこもエスコン3の世界なんだよなw

海外のおしゃれパッケージ

abduzeedo.com

普段パッケージを気にすることもない日用品。
この記事はあえてそこにフォーカスして、選りすぐりのおしゃれパッケージを集めている。
写真が中心なので、海外記事だけれど問題なく読めると思う。

生徒、教師、保護者全部盛りのICT eKool

http://japan.cnet.com/sp/nes2015/35063122/?ref=rss
japan.cnet.com

エストニアの学校の85%が導入しているという教育のためのサービス eKool
教師の日報や宿題の進捗、出欠状況、教材を共有できるプラットフォームというところもそうだけれど、
分けてもオッ!とギョロ目をむいたのが生徒、教師、保護者、政府、他の人たちがこれに参加していること。
ICTというと、学校のなかで閉じたイメージしかできていなかったのでこれにはビックラコン。

そんな進んだエストニアは、教育以外でも積極的にITを活用している。news.livedoor.com
この記事には、エストニアに広く深く組み込まれたIT技術、そしてそれが辿ってきた歴史が書かれている。

知らなかったのだけれど、世界で初めてネット選挙を実施したのがエストニアだったり(i-Voting)、
ネット経由で爆速で会社登記ができたり(e-Business)、
カルテや処方箋の電子管理(e-Health)をやっていたりと、ITによって効率化されている分野は枚挙に暇がない。
しかもこれが2013年時点だから、今どうなっているのか、とっても気になる。

amazonで結婚式もできる時代になった。

japan.cnet.com

ずいぶん前、おそらく僕が中学か高校生ぐらいのときに、アマゾンで服が買えるようになって驚いた記憶がある。堀江貴文が、服は全部アマゾンだ、なんて言ってて、さすがベンチャー系だな、なんて思っていた。
それから時間が経って、ネットで服を買うことに抵抗はなくなった。
社会人になると平日に好きに動きづらい分、やりたいこと、やらなきゃなことは土日に回すってことになるんだけど、意外と丸2日あってもそういうのをこなしきれなかったりする。
だから余計amazonほかWebサービスが便利に感じるようになった。

今度は結婚式を便利に&手間減った分?低価格になって、amazon経由でリゾート地での結婚ができるサービスが始まった。
このサービスが提供している結婚式プランのうちからどれかを選べば、あとは宿泊地のホテル予約や航空券を用意するだけで、リゾート結婚式のいっちょあがりという流れ。
驚くのはその金額。最低35万円から、一番豪華なプランでも65万円。玄関をブライダルプランナー(=人間)でなく、ネットにしただけでこんなに安くなるんだろうか。あるいは元々リゾート結婚はこのぐらいのレンジでやれるんだろうか。そこら辺詳しく知るために結婚するわけにはいかないけれども、この仕組みがどうなってるか、そこんとこ気になる。

ラジオリスナーのためのチャットアプリをWebsocketで作ってみた。

ポッドキャストで「伊集院光 深夜の馬鹿力」の番組がラジオを聴き始めたきっかけだった。
過去にラジオで喋ったことを抜き出してポッドキャストで流し、
たまに後輩芸人にも喋らせるというスタイルでやっていて、
はじめて聞いたときは割りとマジであの世行きするんじゃないかというほど面白かった。
抱腹絶倒である。
それを高校の行き帰り、自転車を漕ぎながら聴いていたのだけれど、
ニヤニヤどころか爆笑しながら走る高校生はよく不審者扱いされなかったものだと思う。

ただ、本放送の深夜の馬鹿力は関西ではやっていなかったので、
代わりにと、他のポッドキャストやFM番組をよく聴いていた。
ZAZEN BOYS向井秀徳ポッドキャストα-STATIONFM802FM COCOLO、Kiss FM、、、
それに深夜の馬鹿力ポッドキャストを何周も聴いていたから、イヤホンはいつも欠かせないお耳の友達だった。

そんなこんなな青年も成長し、今では立派な(?)社会人としてITエンジニアをやっている。
今年はGWがほぼ二週間もあるので、いい機会だと思い、ラジオリスナーのためのWebアプリを作ってみた。
ラジオリスナー同士がラジオを聴きながら、片手間にチャットで繋がるためのアプリだ。
ラジオを聴いているとき、もちろん耳はトークや音楽に集中するけれども、手持ち無沙汰になってしまうことがよくある。
携帯をいじりながらでも、勉強しながらでも、ラジオを聴いているときに何をしていたっていいのだろうけれど、
どうにも何かするとラジオに集中できなくなってしまう。
実は、ラジオが好きで、かつラジオを聴くことが得意じゃない。

ただ、たまにある、友達とラジオを聴いているときは、「いい感じ」に聴ける。
それをインターネッツの力を借りて誰でも簡単に他のリスナーと繋がれるようにする試みがこのアプリ、midnight。

midnight
Chrome on mac で動作確認済み スマホだとサイズ的に厳しいかも?
反響あれば対応しますです。

どうやって作ったか

開発環境とかは、Ruby on Rails, Heroku, Websocket, Atomといったところ。
ソースコードGithubで公開してます。github.com

Websocketは皆さんご存知、双方向通信のためのプロトコルで、
今回はこれをRailsで実装したwebsokect-railsというgemを使ってチャット部分を開発した。

altarf.net

この記事の実装を参考に、midnightに合うようにチョコチョコっと作りなおした。
いわゆる、チャットルームがいくつかあって、その部屋ごとにチャットをするような機能なら、
この記事どおりにやれば間違いない。

今回のWebアプリもherokuにデプロイしたのだけれど、
midnightをherokuで使うときは少し準備がいる。
というのも、上の参考記事に載っているコードだと、Websocketを使うためのURLを指定する部分でポート番号を使っており、そのままの番号だとMyMacのローカル環境やheroku環境で動かなかったりする。
ローカル環境で動かす分には、そうそうポート番号は書き変わらないと思うので、
記事中の番号(3001)を一箇所直接書き換えてやれば済む話だけれど、
どうやらherokuのポート番号は動的に書き換わるらしい(100%言い切れないっす)。

対処は簡単で、
heroku側でRubyの変数$PORTにポート番号を入れてくれるので、それを使えばいい。
view側にポート番号を伝えるための変数@portがあったとして、
開発中(on local)と公開中(on heroku)で違うポート番号を使いたいので、

@port = Rails.env == 'production' ? $PORT : 3000

とでもすればOK!

※midnightはherokuで公開されているWebアプリを紹介するwe love herokuにも載っけてるお。welove.herokuapp.com

ビールマガジンをWordpress on herokuでデプロイした時のよもやま

よなよなエール」、「水曜日のネコ」とか、最近コンビニでも買えるようになってきたほどメジャーになってきたクラフトビール
乗るしかない!このビッグウェーブに!っちゅーわけで、
グルメtheオタクの友人と一緒に女性向けビールマガジンを作ってみた。

www.hipahipa.net

www.hipahipa.net

女性でも飲みやすい、甘くてアルコール度数の低いビールや、それに合う料理、スイーツを紹介している。

プラットフォームはWordpressを使い、一度は試してみたかったherokuをサーバーに使っている。

Wordpressをherokuで公開するまでは親切な記事があるのでいいものの、
カスタムドメインの設定や、Webフォントの使い方で躓いたので、
公開手順ふくめ、備忘録的に残しておきたい。

なにはともあれherokuでWordpressを動かしてみる。

ある程度無料で使えるのが嬉しい+デプロイが簡単でうれしいherokuだけど、
24時間でデータがリフレッシュされるとか癖があるのも事実。

なので、Wordpressとheroku以外にも、画像置き場にAWS S3を使わなきゃいけない。
※S3じゃなくても、CloudinaryでもOK

そこら辺の連携含め、シーケンシャルに説明してくれてるのがこのブログ記事↓

blog.mah-lab.com

blog.mah-lab.com

細かいところで色々躓きはしたけれど、基本はこの記事どおりにやれば問題ない。

カスタムドメインにしたい!

heroku上のアプリはデフォルトだとherokuのドメインで公開される
※こんなん→ https://myblog.herokuapp.com/

後々herokuを使わなくなったときの事を考えて、ここは自分好みのドメインにしておきたい。
もちろん、とりあえず公開したいなんかであればこのままで問題ない。

ドメインは自分で用意する必要があるので、今回は「お名前.com」を使った。www.onamae.com

ここで取ってきたドメインをherokuに設定するのだけれど、
カクカク・シカジカで、シンプルに heroku - お名前.com の間でだけでは設定できない。

そこでもう一役出てくるのがAWS Route53 というサービス。
AWSが提供しているDNSサービスで、ちょちょいとやるだけでherokuでもカスタムドメインが使えるようになる。

設定方法はこのとおり↓

www.workabroad.jp

Wordpressでは、この記事のとおりに設定した後にもう一工夫必要で、
「サイトアドレス」なる設定を書き換えないといけない。
そうしないと、各記事のドメイン名が相変わらずherokuのままになるから。

まずはwordpressのダッシュボード ( https://[your app name].herokuapp.com/wp-admin/index.php )に移動する。 [your app name]には自分のアプリ名をいれる。

次に、左のメニューから、設定>一般と移り、サイトアドレス(URL) の欄に自分のドメインを入れる。
※hipahipaなら、http://www.hipahipa.net

これで無事にherokuでカスタムドメインが使えるようになったはずでR

出た―!豆腐フォントじゃー!

Webサイトで表示できない文字があるときに出てくる通称「豆腐フォント」
かの天才集団googleが開発した、日本語向けWebフォントの名前の由来でもある↓asue.jp

hipahipaで使っているWordpressテーマでは、アイコンをフォント化したFont Awesomeを使っていたが、カスタムドメインを設定したおかげでアイコンが豆腐になってしまっていた。
異なるドメイン間でリソース(画像とかフォントファイルとか)をやりとりできる設定(CORs)をしていなかったことが原因だった。
あれやこれやと持ち前のググラビリティを発揮して解決法を探したものの、
わかってしまえば治し方は簡単だった。
wordpressのソースディレクトリにある、conf/nginx.conf.erb という、herokuでのサーバー設定ファイルのテキトーなところに以下のコードを加える。

location ~* \.(eot|ttf|woff)$ {
add_header Access-Control-Allow-Origin *;
}

上のほうの記事のとおりにwordpressを導入していれば、
apacheからnginxへリダイレクトするようになっているはずなので、
そっちの設定ファイルにもカキカキする。.htaccessに以下の記述をすべし。

Header set Access-Control-Allow-Origin "*"

他にも色々と

この他にも色々と躓いたところはあったけども、ググればどっかに解決法が載ってるのがWordpressのいいところ。あれこれ試してみるのも楽しいしね。

それでは、お手隙のときにでもhipahipaを読んでくださいな♫
hipahipa

最近ビビッときたWEBサイト、ニュース (2015.3.1 - 3.23)

WEBサービス WBサイト/ニュースまとめ デザイン

カンタンにお洒落画像が作れる - Canva

coliss.com
プログラミングをすること自体の敷居はどんどん低くなっていってると思う。
デザインだって、あくまで表層的なものなら、職人技の一般化→ちょっと勉強すれば誰でもできるという流れに乗るのかもしれないと思わせるサービス。
そうしてデザイナー人口が増えると、更にぶっ飛んだクオリティのものが出てくるのかも?とワクワクする。

家具のシェア - share finger

www.sharefinger.net
家具って買うときはもちろん、捨てるときだってお金がかかる。
そこで、家具をシェアして回りやすくすれば、家具に纏わるヨモヤマのハードルがぐんと下がると思う。
例えば、季節ごとに模様替えをするとか、こういうサービスがもたらす家具の捉え方の変化が楽しみ。
...と思っていて、いつか自分でそういうサービスを作れたらいいな〜と思っていたら、
なんと自分のお膝元、京都で似たようなサービスが既にあった(笑)

アキラとシンプソンズマッシュアップ

www.roomie.jp
いわゆる同人系に入る企画だけど、
こうしてキチンとしたオサレサイトでそれをやると、
途端にプロっぽくなることに驚いた。
※いや、プロがやってるんだろうけど。

アキラを読んだことある人なら思わずニヤ2が止まらないのでR

工夫溢れる結婚式の招待状

photoshopvip.net
「今あるもので、デザインから取り残されているものって何だろう?」
そう考えて時間つぶしをすることがよくある。
それでこの記事に出会ってハタと膝を叩いた、
「あの、白い厚紙に花模様と花文字をあしらった招待状も取り残されてるじゃん」と。
カンタンにオサレ名刺が作れるMOOみたいに、
招待状の作成サービスがあれば素敵☆
uk.moo.com

Her来るか!?

japan.cnet.com
この記事の中で出ている、Cortanaの次バージョン「Einstein」
こいつは電子メールを読んで理解することができるような技術を使った代物らしい。
それってまるでHerの世界じゃん!
movies.yahoo.co.jp

HoloLensだってそうだけど、
最近どんどんマイクロソフトがおもしろくなってきてる。

ググって見つかるサイトは氷山の一角

DARPAの新検索エンジンMemex - WirelessWire News(ワイヤレスワイヤーニュース)
DARPA(アメリカ国防高等研究計画局)が作ってる検索エンジンMemexは、
普通に検索しても見つからないサイト(シルクロードとか)を見つける。
この記事の中で書かれている、
ググって見つけられるサイトがたかだか10%ってことに驚いた。
ネットは広大だわ、、、」と頭の中で誰かがつぶやいた。

最近ビビッときたWEBサイト、ニュース (2015.2.23 - 3.1)

WEBサービス デザイン ファッション WBサイト/ニュースまとめ

ここ最近ビビっと来たWEBサイト、ニュース↓

ストッキングブランド Jelaime (ジュレーム)


ジュレーム [Je l'aime] - アツギ

襟巻きソックスとか、靴下を捉え直したブランドがはやりだけど、
当然ストッキングだって新しくできるんだなと思った。
分けてもJelaimeは、ややもすると安っぽくなりがちなプリントストッキングジャンルで、
セクシーさを使ってうまく「大人向け」な雰囲気を作りだしている。

これからのCSSレイアウトはFlexboxで決まり! - Webクリエイターボックス

http://www.webcreatorbox.com/tech/flexbox/

今まで、「何でこの機能がないんだ!?」とモヤってた、
HTML要素の整列に使えるCSSレイアウト Flexbox。

Flexboxは整列に使えるだけでなく、
画面サイズに応じて整列方法を変えたりといった
昨今必須すぎるレスポンシブな要件もバッチリフォロー。

福岡観光ポータルサイト fukumimi


fukumimi | 女性にミミよりな福岡観光ポータルサイト“フクミミ”

よくあるご当地ポータルサイトっぽくないデザインはもちろん、
特にビビッと来たのが、「Myしおり」
このポータルの記事を選ぶだけでMyガイドブックが作れるっちゅーことで、
これの全国版、海外版が欲しいなと。

特許は早い者勝ち!? スタートアップが特許出願で押さえるべきポイント - CNET Japan


特許は早い者勝ち!? スタートアップが特許出願で押さえるべきポイント - CNET Japan

原文だと100%頭クラクラする特許について、
スタートアップ企業がどのタイミングでどう使うかという観点から解説している。
例え自社で発明した技術でも、
プレスリリースなどで公にしてしまうと特許を取れないかもしれないという点がウロコ目。

教学寺幼稚園 公式サイト

北九州市戸畑区 幼稚園|教学寺幼稚園

このジャンルでこんなGoodデザインのサイトあるのか!という驚き。

Google人工知能DQN」、アタリゲームで人間よりハイスコア叩き出す - IT media ニュース


Googleの人工知能「DQN」、アタリゲームで人間よりハイスコア叩き出す - ITmedia ニュース

天才軍団googleが作った人工知能が「DQN」って、、、 っていうそれだけwww

Map Gallery - CartoDB


Map Gallery — CartoDB

企業向け(Foursquareなど)に地図を提供するCartDBの地図ギャラリーサイト
炭素マップ、クレジットカードマップなど色々あるが、
およそ地図というものから想像する地味さを逆転ホームランしている。

CartDBについて詳しくは↓

地図ソフトのイノベーション--データ可視化、リアルタイム、オープン活用 - CNET Japan

BASSEでショップを作った時に入れたBASE APPとかWEBサービスとか

BASE 雑貨 ルームウェア WEBサービス

個人レベルで超絶カンタンにECショップが作れる→販売できる、
今はやりのWebサービス BASE

このBASEのすごい所は、見た目以外でも色んなカスタマイズができるところ。
※カスタマイズはBASE APPと呼ばれている

もちろん、デフォの状態でも立派なECサイトを作れるんだけど、
APPを入れることで機能的な面でのショップの質を上げていける。

最近、eshともう一つ雑貨販売サイトをBASEで作ったので、
その時につかったBASE APPなり外部のWEBサービスなりをまとめておこうと思う。

※ちなみにこんなサイト作りました

White Horses


esh

1. とりまBASEショップを作ってみる


BASE(ベイス) | ネットショップを無料で簡単に作成

メールアドレス、ショップ名、ショップのドメイン(BASEが提供してくれる)があれば、
サクッとECサイトを作れてしまう。

ただ、作った後に銀行口座の設定やなんやかやの細かい設定をしなければいけないけれど、
そういうところも懇切丁寧にBASEがガイドしてくれるので安心できる。

2. BASE APP

ECサイトに機能を追加していく。
自分のサイトを作ったときは以下のAPPを使った。
デフォルトでこれだけ入れておいて、あとは運営、商品開発していく上で追加していけばいいかと。

独自ドメイン


独自ドメイン | BASE Apps

自分のお店の住所であるドメインを設定できる。
デフォだと、BASEが用意したドメインを使うことになるのだけれど、
BASE以外のショップに引っ越した場合に備えて設定しておきたい。
そうすれば、お客さんは同じドメインで引越し先にアクセスできるからだ。

ちなみにドメインは自分で用意しておかなければいけない。
筆者は お名前.com を使った↓

ドメイン取るなら お名前.com - ドメイン取得 年間99円〜


SEO設定


SEO設定 | BASE Apps

ググった結果の上位に表示されるようにするための設定
あまり本格的な設定はできないみたいだけど、
ググる → お店見つける みたいなお客さんの動線を強くするためにやっておきたい。

送料詳細設定


送料詳細設定 | BASE Apps

基本的には全商品一律の送料を設定するのだけれど、
ショップによってはモノの大きさが違って送料もバラバラということもあり得る。
このAPPは、商品ごとに送料を設定できるシロモノ。

海外対応


海外対応 | BASE Apps

現時点で一番新しいAPP
海外の人もBASEで買い物ができるようにと、
商品説明なんかを自動で翻訳してくれるらしい。

ただ、海外に送る場合の送料を設定できなかったり、
翻訳の精度がどれほどのものかわからないので、
インストールしたっきり使ってはいない。

3. ショップデザイン

2番まででバックエンドな部分の設定はほとんど終わっていると思う。
ここからはお客さんの目に触れる部分のデザインをしていく。
BASEは標準のデザインテンプレートをいくつか用意しているが、
もちろん自前の画像とかも使える。
実際に素材を用意するために使ったWEBサービスを紹介しよう↓

ブランドロゴ

Squarespaceという、超絶お洒落なサイトを作れるWebサービスを作ってるところが作った、
これまたお洒落ロゴをカンタンに作れるサービスがSquarespace Logo


Squarespace Logo — Squarespace

ショップ名とアイコンを選べば、もうそれだけでいっちょ前のロゴが出来上がる。

背景画像

ショップの背景画像は海外のフリー画像素材サイトのものを使った。
複数のサイトから取ってきたので、正直どれを使ったか覚えていないので、
すべて列挙しておく↓


Free Stock Images & Videos ~ AllTheFreeStock.com

IM Free - Free Design Resources | Free Images, Free Icons


Unsplash | Free High-Resolution Photos


Gratisography: Free, use as you please, high-resolution pictures.

関連記事


いかにしてSEがルームウェアブランドを立ち上げたか - DoBlogNeo's diary