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

#daiizメモ

フレンチフライ トリュフ塩仕立て

技術ネタはてブ数が多いごはん情報

スポンサーリンク

tech

SVG ScreenshotのビューワアプリをElectronで作っている

SVG形式でウェブページのスクリーンショットを撮るChrome拡張機能「SVG Screenshot」のデスクトップクライアントをElectronで作っている. いまはGitHubのプライベートリポジトリで管理しながら作っていて,もう少し動作が安定してきたら一般公開にする予定.…

Electron 1.0 が来た

Electron 1.0 が登場したので,さっそく手元の環境もバージョンアップさせた. これから新たにElectronを始めるときは $ npm install -g electron-prebuilt $ npm install -g electron-packager を実行するだけで必要なものが手に入る.electronのバージョン…

Electron入門メモ 2

前回に引き続き,Electronについての勉強メモです. ipcMain, ipcRenderer MainプロセスとRendererプロセスが通信する部分の書き方を学んだ.Chromeアプリで言うとchrome.runtime.sendMessageで送ったメッセージをchrome.runtime.onMessage.addListenerで受…

Electron入門メモ 1

ElectronでHTMLファイルを埋め込んだウィンドウを開くところまでやってみた.よくわかっていないけれどとりあえず動いている,といような段階なので,気付いたことをメモしておく程度でまとめてみる.主にRendererプロセスの方の話になる. タイトル ウィン…

ゴールデンウィークを使ってElectronに入門してみる

JavaScriptを書くだけでMacOSやWindowsをターゲットとしたネイティブアプリを作ることができる「Electron」というものに,遅ればせながら入門している. GW中におおまかな雰囲気を掴みたい.同時に「TypeScript」にも入門してる.こちらも前々から気になって…

深さ優先探索と幅優先探索

「深さ優先探索」と「幅優先探索」を初めて勉強したとき,これらの探索の動きを比較するためにMacのFinderを使ったディレクトリの探索で例えると分かりやすかった.当時やってたことをここに書いてみる. 例えば,以下のような木が与えられたとする. ここで…

SVG Screenshot v0.0.8 を公開しました

ウェブページのスクリーンショットを撮影してSVG形式で保存するChrome拡張機能「SVG Screenshot」の最新版をChromeウェブストアで公開しました. SVG Screenshotについては下記記事をご覧ください: SVG ScreenshotをChromeウェブストアで公開しました - Shik…

tfPhotoPalette開発メモ

tfPhotoPaletteの開発が継続・発展しつつあるので,これまでの流れと今後の方針について簡単にまとめたい. 当初,tfPhotoPaletteを作ったときは,機械学習のための写真集めの効率化を目的としていた. このツールでは,ウェブやローカルから読み込んだ写真…

SVG ScreenshotをChromeウェブストアで公開しました

ウェブページのスクリーンショットを撮影してSVG形式で保存するChrome拡張機能「SVG Screenshot」を,Chromeウェブストアに出品しました. 以下のストアページからインストールしてご利用いただけます. chrome.google.com 機能の詳細や使用方法については下…

リンクもまるごとキャプチャしてSVGで出力するChromeスクリーンショット拡張をつくりました

閲覧しているウェブサイトの選択された範囲のスクリーンショットを撮ってSVG形式でダウンロードできるChrome拡張機能をつくりました.SVGで出力しているため,普通のPNGやJPGと比べると,以下のような少しだけ高度なことができます. スクリーンショットを撮…

argparse

Pythonに標準で備えられているargparseというものを使うと,オプションを与えてPythonプログラムを実行することができて便利.名前の通りarg(引数)をparse(解析)してくれる. argparse自体にもいろいろと細かい機能があると思うが,シンプルに使うだけな…

Google Cloud Vision API をすばやく試す

Cloud Vision APIのLABEL_DETECTIONでは,画像データをPOST送信するだけで,その画像の中に何が写っているかを瞬時に返してくれる. https://cloud.google.com/vision/?hl=ja 料金表の説明も書いてあるが,一ヶ月あたり1000リクエストまでは無料なので,一人…

tfPhotoPalette: Play機能で送信する画像のサイズが選択可能になりました

下記記事でご紹介した,tfPhotoPaletteで切り取ってリサイズした画像データをローカルサーバに送信する「Play機能」に小さな改良を施しました. これまでは,Play機能のウィンドウで「Classify」ボタンを押した際は,tfPhotoPaletteで切り取られて縮小された…

Chainerで画風変換してみた(結果篇)

数日前に書いたこの記事の結果報告です.おまたせしました. 写真と一緒に絵画を与えると,その絵の画風で写真を描くとしたらこんな感じになるんじゃない?というような結果画像を生成してくれます.学習済みのモデルを使用させてもらったので,実行はとても…

Chainerで画風変換してみた

naoyashigaさんの記事 を読んで,僕もやってみたい!となったのでやってみた. naoyashigaさんの記事の冒頭でも書かれているが,元になっているページはこちら: 画風を変換するアルゴリズム | Preferred Research Deep Neural Networkを使って写真の画風を変…

tfPhotoPalette: 画像を与えて識別された結果を表示できるようになりました

先日公開した「ローカル写真の読み込み」機能 に続いて,新機能「Play機能」を搭載した最新バージョンのtfPhotoPaletteをリリースしました.この機能は,tfPhotoClassifierで提供されている,学習の成果を試すために実際に写真を与えて識別するplay.pyの機能…

tfPhotoPalette: ローカル画像ファイルの読み込みに対応しました

機械学習の訓練・評価データとして大量の画像を必要とするときに便利な,画像収集を支援するツール「tfPhotoPalette」をアップデートしました.tfPhotoPaletteの詳細に関してはこの記事の最後に貼り付けた過去記事をご覧ください. 追加された機能 ローカル…

ホットエントリーを画面いっぱいに散りばめるChrome拡張をつくった

『HotWords』をリリースしました. つくったもの はてなブックマークのホットエントリーにランクインしている記事をRSSから取得して,記事のタイトルを単語っぽい区切りでバラバラにした後,ワードクラウドとして散りばめたもの. 非公式のChrome拡張機能で…

TensorFlowでの画像分類実験で使える便利スクリプトを書きました

TensorFlowで画像を分類する実験をしたときに書いた一連のプログラムをGitHubに公開しました. この記事を書いてからいろいろと手直しをして,まだまだ改善点は多いですが,少しずつ整ってきました.上記の実験でやっていることは,TensorFlowのチュートリア…

機械学習でつかう画像を集める作業を少しラクにするツールをつくりました

昨日の記事 の冒頭で紹介した,機械学習用の画像データを収集する作業を手助けするツール『tfPhotoPalette』をChromeウェブストアで公開しました.TensorBoardに傚ってオレンジ系統の配色にしてみました. Chromebookでも使えます!! 画像の表示 画面上部の…

TensorFlowで食神の定食画像を分類する実験

昨日に引き続き,機械学習のお話. TensorFlowのチュートリアルで紹介されていた画像をクラス分けするConvolutional Neural Networksの例題(CIFAR-10)のデータセットだけを差し替えて実験してみた. 今回の実験の目的は 写真を収集するためのツールの開発 …

4日間TensorFlowを触って機械学習に入門した

去年Googleが出した,行列の計算とか,機械学習で出てくる数式処理とかを手軽に記述できるライブラリTensorFlowを使って,チュートリアルにあるMNIST For ML Beginners,Deep MNIST for Experts,Convolutional Neural Networks(CIFAR-10)のプログラムを写…

Chromeアプリで簡単に画像を表示するためのHTMLタグをつくりました

img-view ウェブページで写真を表示したい場合は<img>タグを使って <img src="http://images.miil.me/j/1c3b3f42-c0c0-11e5-a6e4-22000aba146f.jpg"> とすれば良いのですが,Chromeアプリではセキュリティ上の理由でこのような方法で外部(アプリパッケージ外)の画像を読み込むことができません.読み込みエラーになってしまいます. 公式のド…

デジタル信号の図を書くツールをつくった

レポートでデジタル信号の図を書く機会が頻発したので,JavaScriptで値を指定してSVGで図を出力するツールを作って使っていました. せっかくなので多くの人に使ってもらえるよう,アレンジ版のウェブサイト『デジタル信号エディタ』を作って,本日公開しま…

『デバイスかるた(絵札)』をリリースしました

タブレット,スマートフォン,ノートPC,デスクトップPCなど,ディスプレイが付属していてインターネットに接続できるデバイスを絵札に変身させる,新春かるたサービスをリリースしました. 下記のサイトにアクセスすると次のような画面が表示されます. htt…

miilの写真をグラフで探そう

miilに投稿された写真をグラフで表示するChrome拡張機能『MiilGraph』をつくりました. これとは全く関係ないテーマですが,大学の実験で結構ボリュームのあるデータを扱ったときに,個々の関連をグラフで可視化したら良い感じに全体が把握できて嬉しかった…

紙にURLをメモするときのちょっとした便利ツール

講義ノートの余白に,復習時に読みたい参考ウェブページのURLを書いておきたい場面がときどきあるのですが,URLは長いので手書きでメモすると結構大変です. そこで,URLに自分だけの適当な数字を割り当てるツールをつくって,試用していました.意外と使え…

久しぶりの Google App Engine

メモです.久しぶりにGoogle App Engine(GAE)のプロジェクトを新しく作った.デベロッパーコンソールのUIがだいぶ変わっていて戸惑った.課金設定について勘違いしていた(変更されたけれど追いついていなかった?)ことがあったのでメモ. これまでは,黒…

Polymerをもっと格好良く使いたい

Polymerを使うときの現状 例えば、Polymerを用いて作ったカスタムエレメントを使うことを考えます。どのようなカスタムタグを使う場合であっても、HTMLの中で<link rel="import" href="">を書いて、Polymerやmy-elementのコードを読み込む必要があります。以下のように書きます。 <html> <head> <meta charset="utf-8"> <title>Demo</title></meta></head></html></link>…

ポートフォリオ「ぽとふ」を刷新しました

① 「ぽとふ」をリニューアルしました 今日は久しぶりに自由な時間があったので、アプリやプロトタイプなどの作品を紹介するためのポートフォリオサイト「ぽとふ」をゼロから作り直しました。 ぽとふ開設時の記事 今回の大リニューアルにあたって、コンセプト…

GitHubの芝生をかぼちゃ色に染めるChrome拡張機能をつくった

昨日のGitHubのHalloween仕様のContributionsが気に入ったので、好きなときに、昨日のGitHubと全く同じ系統の暖色に変更できるChrome拡張機能を作りました。(CSSを書いただけですが...) GitHubに置いてありますので、ダウンロードして、Chromeの「パッケー…

記事下に便利シェアボタンを追加しました

ブログ記事のフッター部分に、下画像のような5種類のカラフルなツイートボタンを配置しました。 記事を読み終えたときの最も近い気持ちをどんどんつぶやいてください!(PCのみの実験的機能です。) これらのボタンを押すと、ボタンに書かれた感情をツイート…

ウェブページをスクリーンショットで共有しよう

ウェブページの最高なスクリーンショットを生成する、ウェブブラウザ風なAndroidアプリ「Koto」をリリースしました。 Koto for Android Android KitKat (4.4) 以降に対応するように作ろうと思ったのですが、どこかで間違えてしまいLollipop (5.0) 以降になっ…

polymer-elementタグをReactのJSXで書こう

JavaScriptに<polymer-element>タグをReactのJSX記法で書ける便利スクリプトを書きました。babelと一緒に使います。 babelは、次世代のJavaScriptを今のJavaScriptに変換してくれるトランスパイラです。 babelではReact.jsのJSXも展開することができます。 JSXとは、JavaScrip</polymer-element>…

Polymer 1.0 で作ったカスタムHTMLタグを使う

この記事は、以下の2つの記事の続きです。 前回までは、新しくなったPolymerの様子を少しだけ観察して、オリジナルなHTMLタグを作るところまでやっていました。 目次 【復習】作ったHTMLタグのデモを開く 商品名に下線を引いてみる 商品名を太字にしてみる …

テキストファイルを画像に変換するツールを作って、Googleフォトに置いてみた

目次 やりたかったこと つくったもの 実行例 9月27日のブログ記事 Before After TeXのプリアンブル Before After 絵文字入り文章 Before After 今後やりたいこと ご注意 やりたかったこと Google フォト にテキストファイルを置きたい!!!! 画像: Google+より…

Polymer 1.0 でカスタムHTMLタグをつくる

昨日の記事に引き続き、Polymerの話です。今日は以下のPolymer公式ページ Create a reusable element - Polymer 1.0 を読みながら、reusableなelementをつくります。ブログを書きながらプログラムを書いていきます。ブログ駆動開発!!! 初回のみ npmでpolyser…

Polymer 1.0 の Shady DOM を覗いた

Polymer 1.0 の勉強を始めてみようと思う。 最近触っていなかったから、ひとまず思い出すために古いバージョン(v0.5)のPolymerで書いたscrollHeaderPanelと、新バージョン(v1.0)のものを見比べてみた。 名称が変わっていた バージョンが変わっても、ほぼ…

Apricot 2.0 の紹介

目次 Apricot とは Apricot Beta について Apricot 2 用語と基本的な使い方 Zumen Brick Recipe View Apricot 2 を入手 アイデア大募集 Apricot とは ペイントアプリで描かれた画像ファイルの長方形部分を、HTMLのdiv要素に置き換えて、HTMLファイルを生成す…

ApricotについてのLTをした

今日、就業後の社内LT会でApricotについて発表させてもらった。 Apricotとは、ChromeアプリなどHTML & CSS & JavaScriptで構成されているアプリをサクッと作れるように手助けする自作ツールで、GitHubでも公開しており現在も構想を練っている。 Apricot*1…

Apricot UI Labs を公開しました

アプリUIデザインキットApricotの試作UIで遊ぶことができるページを作りました。

Apricotのマテリアルデザイン対応作業を進めています

Apricotは、次バージョンから、いくつかのPolymerのPaper-elementsに対応する予定です。これを用いるとマテリアルデザインなHTML要素を簡単に配置することができるようになります。

Release: ApricotでアプリのUIデザインをもっと簡単に

ApricotはアプリのUIを簡単にデザインするためのツールです。 つくりたいアプリ画面のレイアウトを画像としてペイントして、Apricot Kit を用いてビルドすることで、 HTML, CSSファイルが自動生成されます。つまり、絵を描き、少しのデザイン設定を書くだけ…

griddle-cards: ver0.4.3 を公開しました

カードUIをお手軽に実現するWeb Component の最新版をご利用いただけるようになりました。

開発中のchromeアプリを素早く起動しよう!

開発中のChromeアプリのmanifest.jsonが置いてあるディレクトリをChromeブラウザに読み込ませてあげると、実際にアプリを起動してデバッグすることができます。 基本手順としては、公式チュートリアル(Create Your First App - Google Chrome)の Step 5 に…

アルゴリズムの勉強1

大学の講義でかなり本格的なプログラミングとアルゴリズムの話題が出始めたので楽しくなってきました。そこで関連書として、前から読もう読もうと思っていた本を借りてきました。

お手軽にHTMLを書き始めるためのコマンドを作成しました

コマンド一発で.html、.cssや.jsなどの雛形を一斉に用意してくれるスクリプトを書きました。また、さきほどGitHubに公開しました。是非ご利用ください。 準備編 ~/tools/ 内などの、自作のコマンドを置けるようにパスが通っている場所で、以下のコマンドを実…

JavaScriptフレームワークへの興味が芽生えた

昨日、タリーズでコーヒーで飲みながらMacBook Airでネットサーフィンしていたところ、とても興味深い記事に出会いました。id:paiza さんのJavaScriptのフレームワークの書き比べの記事です。 Backbone.JSからAngular2まで、全9大JavaScriptフレームワークを…

Pythonのformat関数の簡易版をJavaScriptで書いてみました

Python 2.6 から搭載されているformat関数の最も基本的なバージョンをJavaScriptで実装してみました。 format関数とは テンプレート文字列といくつかの文字データを受け取り、テンプレート内のフィールドに展開して文字を埋め込んで、文字列を完成させて返し…

Chrome Dev Editor の「Refactor for CSP」機能をPythonで実装してみた

今回書いたPython版のスクリプトは、前回のものよりもChrome Dev Editorの「Refactor for CSP」機能をしっかりと再現できていると思います。