はてなブックマーク

昨日の記事 の冒頭で紹介した，機械学習用の画像データを収集する作業を手助けするツール『tfPhotoPalette』をChromeウェブストアで公開しました．TensorBoardに傚ってオレンジ系統の配色にしてみました． Chromebookでも使えます！！ 画像の表示 画面上部の長いボックスに画像のURLを入力して，その隣の「Load」ボタンを押すと画像が表示されます．一番左に大きく表示された画像がオリジナルなものです．画像の中に用意されている半透明な領域の大きさや位置を変更して，任意の箇所を切り抜くことができます．切り抜かれた領域は，オリジナル画像のすぐ右隣に表示されます． 画像の切り抜きと縮小 機械学習で学習／評価用に与える画像のサイズは，かなり縮小しておく必要があります．TensorFlowのチュートリアルで紹介されていた画像分類の話や，昨日の例では入力画像は32 x 32 px

昨日の午後、はてな東京オフィスで開催された「はてなデザイナーワークショップ2014」に参加してきました。Webサービスのデザインについて興味を持っているものの、大学では本格的なデザインの勉強をしたことは無いため*1、参加にあたって少々不安がありました。しかし一旦始まってしまうとこんなことも忘れるくらい忙しくて楽しい体験の連続でした。 とても充実した一日でした。 学んだこと・感想をレポートしてみます。 「Hatena」 受付にて頂いた「はてなブックマーク」「はてなブログ」「mackerel（サーバー管理ツール）」のステッカー はじめに まずはじめに「はてなについて」、「はてなのWebサービスについて」の講義を受けました。はてなでは「知る・つながる・表現する」というミッションを掲げ、デザイナーとエンジニアが協力してブラッシュアップをしていくことでスピーディーな開発が実現されているというお話を聞

昨日に引き続き，機械学習のお話． TensorFlowのチュートリアルで紹介されていた画像をクラス分けするConvolutional Neural Networksの例題（CIFAR-10）のデータセットだけを差し替えて実験してみた． 今回の実験の目的は 写真を収集するためのツールの開発 TensorFlowで書いたプログラムに自前で用意した写真を与える練習 少しのデータでどれくらいの分類精度が出せるのか試す といった感じ． 分類対象は，電通生なら誰でも知っている有名な中華料理店食神の590円定食メニュー．1番〜8番まであるけれど，今回は訓練データ数の都合上半分の1, 3, 4, 5番をターゲットとした*1． まず，写真を集めるツールについて． ウェブブラウザで画像の収集と欲しい部分を切り抜くためのツールが欲しかったので作ってみた． しかし少し解決できない問題があって，ブラウザで触るアプリ

最高の夏が終わって一週間が経ちました。 今年の夏、8月10日 〜 9月4日の間はてな京都オフィスで開催された「はてなインターン2015」に参加しました。 感謝 メンターをしてくださった id:amagitakayosi さん、後半過程でご指導くださった id:hitode909 さん、id:ueday さん、 インターン期間を通して楽しい時間をつくってくださった id:hakobe932さん、ありがとうございました。 はてなの皆さま、大変お世話になりました。ありがとうございました。 ここからは、インターンの進み方や、学んだり感じたことなどをレポートしていこうと思います。以下に目次が生成されていますので*1、気になるところから読んでいただければ嬉しいです。今後も随時追記していきます！！ 感謝 参加するまでの気持ち インターン前半（講義期間） この章のまとめ インターン後半（実践期間） はてな

先日公開された Google Cloud Platform Japan 公式ブログ: Cloud Vision API でイメージの「銀河」を探索しよう を参考にしながら，自分でも可視化に挑戦してみた．記事で書かれている手順説明とGitHubで公開されているソースコードを眺めながら，可能な範囲で真似しながら作った．制作過程をざっくりまとめていく． 可視化の題材は，Cloud Vision APIではなくて，TensorFlowを使って実験を進めているConvolutional Neural Network での定食画像分類実験とした．定食分類実験については下記記事をご覧ください． 「銀河」の様子 ブラウザで3D空間を表示するためにthree.jsを使っていて，完全に初心者状態だったので予想以上にいろいろなところで躓いた．とりあえず今のところはこんな感じで触れるようになっている． 画像収集

Scrapbox (の一部) 記法 で書かれたScrapboxページの文章を，対応するMarkdownに変換するBookmarklet「Scrapbox2Markdown」を書きました．ひとまず必要な記法のみの変換コードを勢いにまかせて作ったので，まだ対応できていない変換も結構あります．いまのところ以下の記法に対して動作します． プレーンテキスト 改行単位の文字列 多段箇条書き 入れ子構造も正しく変換される(はず)． 見出し 文字の大きさレベルも正しく変換される． Scrapboxの一番小さい文字レベルの見出し [* 見出し] は，Markdownでは [##### 見出し] に変換されるようにした． リンク 画像 画像とリンクのあわせ技もいける 単一行コード バッククオートで囲まれた文字 スポンサーリンク 実際のところは，Scrapbox記法がHTMLとして描画されたものを取得して変換し

驚いた どういうことか Chrome OS以外のOSでは，Chromeアプリ（Chrome Packaged Apps と Chrome Hosted Apps）が2018年までに廃止されるそうです． jp.techcrunch.com Chromeアプリとは，Chromeのブックマークバーの左隅にある をクリックして開いた先のページ*1で一覧されているアプリたちのこと．Chromium Blog のポストによれば，これらのアプリは 2016 末〜: Chrome OSユーザー以外の，Chromeアプリの新規出品は不可になる．すでに公開済みのものについては，どのOSからでも更新可能． 2017 後半: Windows, Mac, Linux ユーザーに対してはChromeウェブストアでChromeアプリが表示されなくなる．拡張機能とテーマは引き続き提供される． 2018 初め: Windo

ウェブページのスクリーンショットを撮影してSVG形式で保存するChrome拡張機能「SVG Screenshot」を，Chromeウェブストアに出品しました． 以下のストアページからインストールしてご利用いただけます． chrome.google.com 機能の詳細や使用方法については下記の記事をご覧ください．今後も開発を継続していきますので，もしも最新の機能が搭載されたバージョンをすばやく使用したい場合は，GitHubのリポジトリをクローンしてお試しください． 今後 拡張機能にも保存したスクリーンショットを閲覧するためのViewer機能が付属していますが， これと同様のことを行うPC向けネイティブアプリの作成も検討しています． またスマートフォン向けのスクリーンショット撮影・閲覧アプリも実現できればなと思っています．

今日から NOTA Inc. で正社員として働き始めた。引き続き Scrapbox を作っていきます。 リリースパーティーでScrapboxと出会って以来、どっぷりハマりこみ、この素晴らしさを伝えようとブログ記事を書いたり、Chrome拡張機能などを作って個人的に盛り上がっていた。開発者とユーザが集まり盛り上がる 5月のDrinkupイベントでは、利用事例 by daiizを話した。 8, 9月にインターンとして京都オフィスで開発に参加して、10, 11月は関東からリモートワークしていた。日々の開発のコミュニケーションをScrapbox上で行っているためリモートでも快適にやりとりできるのでそのまま継続でも良かったが、色々と考えた結果、12月からは京都で働くことにした。2年前にはてなインターンに参加したときも、将来は京都で働きたいと思っていたので、夢が叶った。 我流な開発スタイルで好きなもの

Device Orientation Event ブラウザ（主にスマホのブラウザを想定）の Device Orientation Event の内容を読むと，端末の傾き情報などを取得できる．例えば DeviceOrientationEvent.beta の値は，スマホを縦長に持ったときの，手前 or 奥方向への倒れ角を表している．端末を水平な机上に置いた状態だと 0 ，垂直に持った状態だと90や-90のような角度値（傾き）となる． 概要 今回は，この「傾き」の値をパスワードの代わりに使ってメッセージをゆるく保護するデモ（デモページのURLは記事末尾に記載）を作った． 投稿者は以下のような投稿画面で，メッセージ本文に加えて端末の傾きをサーバに送信する．端末の傾きはボタンを3回タップして設定する．角度値が安定していれば登録に成功する． サーバではメッセージに固有のURLを割り当てて，本文と傾き

今夏は Nota でのサマーインターン2017に参加して、 rakusaiさん、 shokaiさんとともに Scrapbox を作っていました。インターン期間中は主に、Scrapboxの機能拡張APIや、モバイルでの編集機能を開発しました。 リリースイベントGyaPCの頃から大ファンだったScrapboxを作れるなんて、夢のような日々でした。また、本場の社内スクボに触れることで、Scrapboxのパワフルさがいっそう身にしみた1ヶ月半でした。 インターン参加前のScrapbox活動 〜 機能開発話までの詳細はこちらに書きました。 これからさらに追記すると思います。 scrapbox.io 最終日には、Gyazo忍者、 Scrapbox Beaver、そして daiiz の名前入りという贅沢すぎる絵柄の記念Tシャツをいただきました。ありがとうございます！ 期間中は京都に住んでいました。 京都

食神590円定食シリーズの写真が何番定食であるかを識別する実験サイト「Shokujin Classifier」をつくりました．この前行った最新の学習成果に基いて判定されます．現時点では，1，3，4，5番定食に対応しています。 https://shokujin-classifier.herokuapp.com/ アップロードされた食神定食写真の定食番号を判定するサイトを作りました．機械学習の成果をもとに予測しますhttps://t.co/wKuSm0MT2x— daiiz (@daizplus) 2016年6月27日 Herokuの無料プランで動かしているため，読み込みに時間がかかることがあります．本当はGoogle App Engineで動かしたかったのだけど，GAEの環境にTensorFlowを入れる方法が分からなかったのでHerokuになりました． サイト内にサンプル画像も用意してあり

去年Googleが出した，行列の計算とか，機械学習で出てくる数式処理とかを手軽に記述できるライブラリTensorFlowを使って，チュートリアルにあるMNIST For ML Beginners，Deep MNIST for Experts，Convolutional Neural Networks（CIFAR-10）のプログラムを写経して入門した． www.tensorflow.org 大学の講義で基礎基本的な部分を聴いていたため，考え方や用語についてところどころ理解できたので楽しかった． Pythonはあまり書いたことがなかったので，言語的な部分に躓いたり，機械学習の本質的な部分で理解が追いつかなかったり，TensorFlowの書き方（有向非巡回グラフ形式で式を表現するあたり）で迷ったりで，大変だった．右も左も分からなくてまるで海外旅行をしているようだった．*1 スポンサーリンク しょ

先日公開されたScrapboxのBookmarklet機能（URLパラメータbodyにページのコンテンツを渡すと，Scrapboxに新規ページを作成してくれるもの）が大変便利だったので，これをSVG ScreenShot 開発版から呼び出せるようにした．SVG ScreenShot Chrome拡張機能のオプションページで Scrapbox のプロジェクトid（ボックスid）を登録しておくだけで使える． 普段通り，ウェブページ上でスクリーンショットを撮りたい部分を指定して撮影するだけでOK．撮影時には「Capture」ボタンではなくて「Scrap」ボタンを押すことでScrap to Scrapbox機能が使える．このボタンは従来の「Capture」と全く同じ動作（スクショを撮ってSVG ScreenShotのウェブアプリにアップロードする動作）をした後，Scrapbox の Bookmar

完全に先週の話になってしまったけれど，GyaPC::Asia Tokyo 2016 ~ Scrapbox リリースパーティー に参加させてもらった． スクリーンショットアプリ Gyazo を開発しているNotaさんの新製品 Scrapbox についてのお話をたっぷりと聞いてきた． Scrapboxは，トップページで「A new style of team wiki」と書かれている名の通りWikiなのだけど，想像していた以上にパワフルなWikiだった．使っているうちに勝手がわかって興奮してくる．使い始めるために覚えることは少ないのですぐに書き始められる．イベントの少し前くらいから仲間内でプロジェクトを作って試していた段階で，記法や画面操作はすんなりと慣れることができた． 頭のなかで何かしらのフレーズ (キーワード) が思いついたら「＋」ボタンを押してとりあえず空ページを作る．書きたいことを書

ウェブページの最高なスクリーンショットを生成する、ウェブブラウザ風なAndroidアプリ「Koto」をリリースしました。 Koto for Android Android KitKat (4.4) 以降に対応するように作ろうと思ったのですが、どこかで間違えてしまいLollipop (5.0) 以降になってしまいました。 すみませんが、しばらくはLollipopの端末でご利用ください。 Kotoでできること このアプリは以下のことができます。 指定されたURLのウェブページを開く 特別なスクリーンショット（*.koto.jpg）を撮る 特別なスクリーンショットを読み込んでウェブページを開く 特別なスクリーンショット Kotoで生成されたスクリーンショット画像は、ウェブページのURLを含んでいます。 もう少し詳しく言うと、JPEG画像のExifのUserCommentというタグにURLを書き込

Chrome Dev Editor 最高です！！便利すぎて感動してます！ ということで今回は、Chrome Dev Editor でのアプリ開発のはじめの一歩となる Chrome Dev Editor とは Chrome Dev Editor の導入 サンプルJavaScriptアプリの実行 について書こうと思います。 以降、本文中でChrome Dev EditorのことをCDEと略記することがあります。 Chrome Dev Editor とは Googleが開発し今年の I/O で発表された、JavaScriptとDartでの開発が行えるIDEです。chromeアプリであるため、Windows PCやMacはもちろん、Chromebookでも利用できます。ソースコードもGitHubで公開されています。 ふつうにJavaScriptやDartで開発を行う環境のほかに、以下のようなアプリ

2024-11-21 ■ 日記 コメダ珈琲の生レモンスカッシュ美味しい。 2024-11-20 冬 日記 ごはん 定期健康診断してきた。体重が少し減って視力が良くなっていた。血圧の測り直しもなかった。社会人8年目にして、健診されるのが上手くなってきたようだ。すべてを終えて、グラタンを食べた。冬を感じた。 2024-11-19 ■ 日記 今日のGoogle検索観察。(G∞gle) ってなんだ？ 2024-11-18 パイナップルチャーハン ごはん イーサンでの夕飯は久しぶりだ。美味しい。 2024-11-17 Phonno史（前編） tech 研究 Phonno 金曜日、社内のイベントでLTして個人開発の進捗を披露した。 scrapbox.io SVG Screenshotの第三世代 ウェブページの任意の箇所を切り抜く技術について考えているプロジェクト GitHub - daiiz/svg-

iPad Pro 欲しさが高まってきて記事していた。 引っ越しを決めるときほどは決断力要らないけれど、一人暮らしをはじめると大きな現金を手放すのが不安になるので、迷っていた。そんななか、iPad アップグレードプログラムの存在を教えてもらったのはありがたかった。 ビックカメラの残価設定ローンなどで攻める手があり、月3000円くらいでiPad Pro 12.9”とApple Pencil使ってる http://b.hatena.ne.jp/masawada/20180309#bookmark-359994043 記事内のコメントも、購買意欲を刺激された。 ペンよくできてて普通にメモ書けて、持ち運ぶとどこでも文字書けて頭が良くなる感じがします、おすすめです 買ってきた!!! Apple Pencilを使って賢くなった気分を早急に味わいたかったので、今週末に買ってきた。 2年経ってiPad熱が続

単なるテキスト（.txt）ファイルをきれいなウェブページに変身させるChrome拡張機能「SimpleWebPage」をつくりました． ただのテキストファイルをれっきとしたウェブページにしてくれる仕組みを作った．（Chromeで表示された.txtファイルの内容をいい感じにスタイルがあたるHTMLに変換する拡張機能を作っただけ）https://t.co/4QKETsFV96— daiiz (@daizplus) August 2, 2016 デモ Chromeにあらかじめ拡張機能をインストールしたうえで，サーバから配信される以下のようなテキスト（.txt）ファイル*1を開くと，続くスクリーンショットのように，タイトル文字が大きくなったりリンクが挿入されたり画像が展開されたりします．この拡張機能は.txt?swpで終わるURLに反応します． Hello, Simple Web! 軽量なウェブペ

Chromebook（Acer C720 海外モデル）を購入して約２ヶ月が経ち、日々の使用シーンなどが明確になってきたので少しまとめてみようと思います。後半では、Chromebookでのプログラミングについても書いてみました。購入を考えている方の参考になれば嬉しいです。 Acer C720 Chromebook クロームブック (Intel Celeron 1.4GHz/2GB/SSD16GB/11.6inch/Chrome OS/Granite Gray) 並行輸入品 出版社/メーカー: エイサーメディア: Personal Computersこの商品を含むブログを見る Chromebookを購入して変わったこと５つ Googleドキュメントを使うようになった これまで何らかの私的なドキュメント（何かの下書き、自作アプリの仕様書風な何か）を書くときはWordを使っていましたが、ほぼ完全に

Cloud Vision APIのLABEL_DETECTIONでは，画像データをPOST送信するだけで，その画像の中に何が写っているかを瞬時に返してくれる． https://cloud.google.com/vision/?hl=ja 料金表の説明も書いてあるが，一ヶ月あたり1000リクエストまでは無料なので，一人で実験用に使うくらいなら気にしなくても大丈夫だと思うので使ってみた．実際に試してみると分かるが，ものすごく的確な結果がすばやく返ってくる．かなり興奮した． ということで，実際にAPIを呼び出して感動するまでの手順を完璧にまとめておく．本記事内で紹介するソースコードとかはコピペすれば動くはずなので，是非実際に好きな写真を与えて実行してみてほしい． APIキーを取得する 最初のステップは，APIキーを取得する作業．こちらの記事: がとてもわかりやすかった． 途中でAPIキーの種類を

こんにちは，daiizです．来週金曜日の夜に開催される Scrapbox Drinkup #01 にて Scrapbox の活用事例紹介的な発表をさせて頂くことになりました．Nota さんからの開発近況を聞けたり，他のScrapboxファンの方々と交流できる機会ということで，今からとても楽しみにしています．まだ枠が残っているようです! Scrapbox活用事例紹介を、ご自身のブログなどで積極的にScrapbox活用事例を発信されているdaiizさん … とご紹介を頂きましたので，当日は，日頃感じている Scrapboxライフの魅力を存分にお話できればと思います．過去にこのブログで書いた記事のリストは下記のページにまとめてあります．併せてご覧ください． 発表内容を整理しているところなのですが，言いたいことが色々あって，どこにフォーカスを当てるべきかを楽しく迷っているところです (もちろん，S

昨日の記事に引き続き、Polymerの話です。今日は以下のPolymer公式ページ Publish an element - Polymer Project を読みながら、reusableなelementをつくります。ブログを書きながらプログラムを書いていきます。ブログ駆動開発!!! 初回のみ npmでpolyserveというものをインストールする。polymerではimportタグを使っており、これはサーバーから色々読み込むので開発中はローカルサーバーを立てる必要がある。index.htmlをダブルクリックして開いてもimportされないので注意。ということで、-gを付けてnpm: $ npm install -g polyserve 一回やればもう次回以降はやらなくてOK seed elementを貰う 冒頭で紹介した公式ページで種が配られているのでもらってきて、フォルダの名前をこれか

はてなインターン2016のページ はてなインターン2015 昨年のはてなインターン2015に参加したdaiizです． 最高の夏に応募してから1年が経ちました． インターンの前半ではPerlの基礎から始まりウェブアプリを開発するに当たって必要な技術を学びました． 今年もカリキュラムがさらにパワーアップしていて，機械学習の講義もあるそうですね．今年参加できる方が羨ましいです． 後半戦では，はてなブログコースで「引用ボタン機能」を作りました．「もし自分がはてなブログ（など自分の希望コースの製品）に新機能を付けられるとしたら？？」ということを考えておくと後半過程がより一層楽しくなること間違いなし！ また，インターン仲間がすごい人ばかりなので，それぞれの得意分野の面白い話を聞かせてもらうと，インターン期間が終わった後も試してみたいことや作りたいものが湧いて出てきて楽しい． はてなインターン2016