3月29日（水）に行われた自社イベント Helpfeel Tech Hour vol.2 「GPT-3→GPT-4編」 で登壇しました。今年も花粉症がひどかったですがトーク中にくしゃみが出なくてよかったです。 Helpfeel Tech Hour 祝 第2回 株式会社Helpfeelでのサービス開発における取り組みや考え方を共有する技術イベントです。前回は「計測」の観点から弊社エンジニアが各プロダクトでの事例をお話しました。第2回を迎えた今回は、最近あらゆるところで話題のGPTをテーマとして、ChatGPTそのものやAPIの活用方法を3つのトークで紹介しました。 ChatGPTの衝撃とプロダクト開発への影響 (CTO akiroom) 生成AIの使いどころを見極める (daiiz) リアル業務でChatGPT APIを使うコツ (teramotodaiki) 生成AIの使いどころを見極める

時間ができたので、ずっと気になっていた Portals をようやく触れた。これはかなり面白そうだ。デモのGIFでよく見かけた、portal要素が左下のからwindow全体になめらかに遷移する綺麗なアニメーションも仕様の一部かと思い込んでいたけれど、意外とCSSだった。表現の自由度が高くて良い。 この解説記事を読みながら SVG Screenshot に無理やり組み込んでみたりしていた。 以下は、関連画像の遷移に使ってみた例。動きはおもしろいが、いまいち嬉しさはない。 やっとPortalsを試している。おもしろい。 https://t.co/Na35hWQeIU pic.twitter.com/Op3IyrliYB— daiiz (@daizplus) 2019年5月29日 SVG画像内リンクの遷移に使ってみる。これは良いプレビュー機能だ。遷移先がsame originでなくても動くのは楽し

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

SVG ScreenShot のサムネイルのサイズが指定可能になりました．URLの一部に画像サイズを表す数値を入れられるようになったので，CSSを書く必要がありません．スマートリサイズ． 通常の表示 (等倍) https://svgscreenshot.appspot.com/c/x/a41e43812e8b90ca31f17bc542ca77b3.png 長辺を400pxで表示 https://svgscreenshot.appspot.com/c/x/a41e43812e8b90ca31f17bc542ca77b3.400.png <画像ID>.<長辺の長さ (px)>.png と指定すると，サーバ側でリサイズ済みの画像が配信される． オーバレイされるSVG要素も下地のサムネイルのサイズに合わせて自然に拡縮されます．

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

単一行テキストをコピーしやすい文字列パレット「tBoard」を作った．Polymer 2.0 のPWA (Progressive Web Apps) として出来上がっている．必要なPolymerコンポーネントを組み合わせていくと画面デザインが仕上がる．今回自作したコンポーネントは，テキスト本文とそれをコピーするボタンを配置した<text-card>だけで，他のパーツは既存の要素をダウンロードして使った．最後にFirebaseにデプロイしたらURLが貰えてウェブアプリになったという感覚．サーバはいじっていないのにウェブにアプリケーションが公開されたのは凄い． https://daiiz-tboard.firebaseapp.com/ https://gyazo.com/4cb29d89836a5e17496c08274ba223d9 頻繁にコピーされそうな文字列を改行区切りで収めたテキストフ

みんなのToDo https://daiz-projects.appspot.com/todos/minna じぶんのToDo https://daiz-projects.appspot.com/todos/me 「じぶんのToDoページ」では，他のToDoリストアプリと同様に，これから自分がやろうとしている項目を登録してタスクの管理を行えます．さらに，ここで入力されたToDo項目は「みんなのToDoページ」で，匿名のToDoアイテムとして一般公開されます．匿名なので誰のToDoかを特定することは難しいですが，さらに念のための機能として，ToDo項目の一部を伏せ字にする機能も搭載されています．ToDo入力欄で[ ]で括った文字列は，みんなのToDoページでは■■に置換されて表示されます． 一般公開することで，他に同じことをしようとしている人を見つけて，がんばろうという気持ちになれることを期

コンセプト OCR (Optical Character Recognition) によって写真の切り取り撮影範囲 (Range) を指定するアイデア (Orange 🍊 )です．トリミング指定範囲の左上と右下に短形のコーナーを表すマグネットシートを置いた状態で写真を撮影します．マグネットシートには左上と右下を示すための「左上」，「右下」のキーワード文字が入っています．これらの文字を認識した座標位置と傾きに基づいて画像がトリミングされます．キーワード文字の認識には Google Cloud Vision API の TEXT_DETECTION 機能を用います． 用意するもの マグネットシート（ホワイト） コクヨ マグネットシート 300×200mm 白 マク-301W 出版社/メーカー: コクヨメディア: オフィス用品購入: 10人 クリック: 17回この商品を含むブログ (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

研究 来週（明日からの週）にやらねばならないことをリストアップした どこに向かっているのかを整理した いまの研究テーマとずれるけど今後必要になってくるやつの実装を検討 その他の勉強 ゼロから作るDeep Learning 第3章のプログラミング完了．明日記事書く． Font Awesome Icons というものをブログで使えるようにした．以下のlinkタグをheadタグに追加するだけ．自分のブログの設定画面見たら既に書かれていた．ずっと前に書いたのを忘れているのか，デフォルトで入っているのかは不明． <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"> これを読み込んでおくと，この記事のセクション見出しの頭についているキューブ f

驚いた どういうことか 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

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

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

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

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

「深さ優先探索」と「幅優先探索」を初めて勉強したとき，これらの探索の動きを比較するためにMacのFinderを使ったディレクトリの探索で例えると分かりやすかった．当時やってたことをここに書いてみる． 例えば，以下のような木が与えられたとする． ここで「ノード「f」は存在するか？」という問いの設定で木を探索していくことを考える．この絵を見れば，木の全体を一気に見れるため，「存在する！」ということはほぼ一瞬で分かる．しかし，プログラムは木を一気には見れないため，ノードを1つずつ辿って見ていくことになる．深さ優先探索と幅優先探索とでは，辿る順番が異なる． 準備 上の木は，下のようなディレクトリ構造として表すことができる．ノードはフォルダ． ノードを辿るというのは，フォルダを開けることに対応する．表記が「▼ フォルダ名」となっているものは訪問済みであるノードであると言える．（「▶ フォルダ名」の段

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

閲覧しているウェブサイトの選択された範囲のスクリーンショットを撮ってSVG形式でダウンロードできるChrome拡張機能をつくりました．SVGで出力しているため，普通のPNGやJPGと比べると，以下のような少しだけ高度なことができます． スクリーンショットを撮ったページのURLを<svg>のdata属性として保持できる スクリーンショットの範囲内のリンクをそのまま残すことができる． ページ中の<a>の位置に，外部ページヘのリンクを持つ<rect>を挿入しています．クリックするとリンク先のページが開きます． ブラウザで通常リンクと同じように扱われるため，rectをホバーするとChromeの左下にジャンプしようとしているURLが表示されるので，移動先もしっかり確認できます． まだかなり荒いベータ版ですが，GitHubで公開しています．クローンして，そのままChromeの拡張機能管理ページから読み

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