サクサク読めて、アプリ限定の機能も多数!
トップへ戻る
大谷翔平
naoyashiga.hatenablog.com
gist.github.com argmaxだと最大値のインデックスしか取れない。上位k件のインデックスが欲しかった。調べて見るとnumpy argpartitionというのがあるらしい。それを使って書いた。 MNISTで nearest neighbor / int か float か,それが問題です / np.argpartition - まんぼう日記 numpy.argpartition — NumPy v1.12 Manual
二重否定「!!」の意味 以下はブラウザがCanvasをサポートしているかチェックしているソースである。 ・ソース元 http://tympanus.net/Development/InteractiveParticlesSlideshow/js/particlesSlideshow.js var canvas = document.createElement('canvas'); // Browser supports canvas? if(!!(capable)) { //省略 } else { console.error('Sorry, switch to a better browser to see this experiment.'); } function capable() { return canvas.getContext && canvas.getContext('2d
UILabelの行間を調整したかった。Storyboardでやりたかったけど、方法がわからなかったので、プログラムで調整した。 http://tech.eversense.co.jp/59 これ読んだ。 //行間を調整 let attributedText = NSMutableAttributedString(string: entry.title) let paragraphStyle = NSMutableParagraphStyle() paragraphStyle.lineHeightMultiple = 1.3 attributedText.addAttribute(NSParagraphStyleAttributeName, value: paragraphStyle, range: NSMakeRange(0, attributedText.length)) NSMutab
Rettyさんで開催された「もくもく会」に参加してきた。「もくもく会」でやることは家でできることも多いけど、できないこともある。出不精な理由から、自分の家で個人開発をしてる人の目線で挙げてみる。 家ではできなかったこと 個人開発している内容を人に伝えること もくもく会終了後、今日やったことを発表 何をするアプリなのかを短く伝える 説明できない場合、アプリの内容を見直す必要あり フィードバックを頂けたこと 初対面の方から先入観なしのフィードバック UIのフィードバック (例)XXできるボタンをツールバーに入れて欲しい 技術的なフィードバック 「XXという機能の実装はどうやってる?」という質問を頂ける 自分では思いつかない実装を知ることができる 恥ずかしながら、質問されて初めて「O/Rマッパー」という言葉を知ることができました汗 Rettyのオフィスを見ることができた スタートアップの雰囲気を
GitHubのプロフィールページがパッとしない https://github.com/naoyashiga 「Repositories contributed to」がスカスカ GitHubの自分のプロフィールページを見るたびに、なんかパッとしないなあと思っていた。それは「Repositories contributed to」のところがスカスカだったからだ。Contributeをしてプロフィールページを豪華にしたいと思った。 スターが多いリポジトリは難しい できればスターが多いリポジトリにContributeしたい。自分はSwiftを使うことが多く、例えばAlamofireのような人気リポジトリに、プログラミング能力が低い自分がContributeするのは難しい。実際にリポジトリを見ても、何が問題なのか全くわからなかった笑 ショボいPull Requestを送る 「Repositorie
SHOE LIFE~「400億円」のスニーカーショップを作った男~ 作者:本明 秀文光文社Amazon 星3.9 スニーカーショップatmos創業者が書いた自叙伝。90年代〜現在までのスニーカーシーンのことがよくわかる本だった。最終的に外資に400億円で事業売却している。atmosでスニーカーを何度か買ったことがあるので興味を持って読んだ。 以下メモ 創業者の本明さんかなり気合の入った人。アメリカでスニーカーを輸入して日本で販売したのがスタート。最初はフリーマーケットで古着を売っていたりしたが利益が多いスニーカーに途中で変えた もともと貿易業のサラリーマンをしていたので貿易の基本がわかっている。なので関税とかに詳しい。あと輸入するときに必要な書類を自分で用意することができる。これは専門知識が必要なのでぽっと出のスニーカー輸入屋はできない。ふつうは役所に頼む。これに1日はかかるが自分で用意し
胡散臭い理由 誰でもできるから UXデザイナーを名乗っている人が持っているUXの知識の多くは、シリコンバレーの企業が作った事例を紹介したブログ記事という印象がある。UXデザイナーと普通のIT従事者とで知識の差があまりない。学術的な研究をしている人もいるが、研究内容も学会があればSNSやブログでシェアされているので、圧倒的な知識の差があるとは思えない。 実績がない UXデザイナーとして自分が考えたUXをサービスに導入して、サービスを改善させた経験がない人が多い。これは下に書いたが、UXデザイナー地位が社内で低い場合が多く、実戦投入できていないから。 UXデザイナーとしてチームに入れている人が少ない まだまだUXデザイナーはできたばかりの職業である。会社によってUXデザイナーの立ち位置はまちまちである。主に2つの段階に分けられると思う。 段階1:専門家としてチームの外から意見を言う立場 まだま
compassのimage-urlの設定に「../img」という相対パスを設定したかったのでやってみました。 image-url compassにはimage-urlという便利な機能があります。 ・参考 Compassの画像の関数(Image Helpers)| Web制作者のためのSassの教科書 - 公式サポートサイト scss .sample{ background-image: image-url("compass.png"); } scssのimage-urlの引数に画像ファイルパスを記述します。 css .sample{ background-image: url("img/compass.png"); } 出力結果は上のようになります。 config.rbでパスの設定 上記の「img/」はconfig.rbで設定しているパスから来ています。 ・参考 【Webデザイナ-・コーダ
デモ appendでネストさせるやり方 完成イメージ <div> <ul> <li>sample text</li> </ul> </div> ulの中にliが入って入れ子(ネスト)状態になることを目指す。 html,cssの準備 <div></div> div要素だけ書いておく。 div ul{ height:20px; background:#888; } div > li{/*入れ子失敗*/ color:red; } div ul > li{/*入れ子成功*/ color:white; } 入れ子ができたら、テキストが白となる。 入れ子が失敗したら、テキストが赤となる。 入れ子失敗例 $("div").append("<ul>").append("<li>test1</li>"); appendしてから、おしりにまたappendを書く。 <div> <ul> </ul> <li>sa
width/2だけネガティブマージンは面倒 position:absoluteして左右中央配置するのは、left50%にして、width/2だけネガティブマージンというやり方しか知らなかった。widthを知るのは面倒だ。だから調べてみた。そしたら別のやり方があった。 ウンチを上下左右中央配置している。 top,left,right,leftをauto以外の値にする 上下左右中央配置にする .iconImage{ position: absolute; top:0; left: 0; right: 0; bottom: 0; margin:auto; width:145px; height:145px; background:url("http://jsrun.it/assets/2/X/4/b/2X4bJ.png") no-repeat; border-radius:10px; } top
社会人になり1年が経とうとしている。半年でiOSアプリを11個リリースしたので、そのことを書いてみよう。 普段はマークアップエンジニア 2014年新卒で、普段は会社でHTML,CSS,たま〜にJavascriptを書いている。 アプリを作成するにあたった経緯 新卒入社後、半年間は趣味のプログラミングはいろいろやっていた。oFやProcessing,JSを使ったジェネラティブなプログラミングなどを良くやっていた。面白いのだが、飽きることもあったり、世の中のトレンドとして、アプリは無視できないと思った。Objective-Cの本を買ったものの、少しのサンプルを動かして終わっていた。2014年10月ごろ、重い腰をあげて、開発を再開したという感じ。 何を作ったか ・一覧 https://itunes.apple.com/jp/artist/naoya-sugimoto/id933472785 ht
デモ 画像を円に切り抜く 画像が正方形の場合 img{ border-radius:50%; } 素直にborder-radiusで画像の50%の大きさをしてすればいい。 img{ width:100px; height:100px; border-radius:300px; } pxで指定するのなら、幅よりも大きめの値を設定すればいい。 ・参考 border-radius-CSS3リファレンス 画像が長方形の場合 <img src="http://jsrun.it/assets/x/y/1/B/xy1Bw.jpeg" class="sample" > この画像の大きさは「360×270」だ。 .sample{ border-radius:50%; } 正方形のときと同じように、border-radiusを指定すると楕円形になってしまう。 background-imageを使う <div
「リクナビからGoogle Calendar™に登録」を作ったときにGoogleカレンダーのボタンを設置した。それの作り方を書く。 Github https://github.com/naoyashiga/Google_Calendar_From_Rikunavi URLパラメーターの定義 パラメーター 内容 action TEMPLATEで固定 text 予定のタイトル details 予定の詳細 location 予定の場所 dates 予定の日付 sprop わかりませんw タイトル ページタイトルをそのまま活用する。短縮のために「株式会社」を「㈱」に変更した。 text = $("title").text().split("リクナビ2015")[0].replace("株式会社","㈱")+"【エントリー締切】"; 予定の詳細 リクナビに載っているタグを詳細に加えることにした。タグ
Paper.jsとは? canvasを用いて、ベクターグラフィックをjsを簡単に描画できるようにしたライブラリです。 サンプルはどれもかっこいいです。 Paper.js — Examples PaperScriptを使う PaperScriptとは? Paper.jsではJavascriptを独自拡張したPaperScriptというものを使います。 メリット Point,Sizeに算術演算子(+ - * / %)が使えます。自身のスコープ内で自動的に実行されるので、グローバルスコープを汚染することがないです。ドキュメントが英語で長いので、いまいちよくわかりませんでした笑。 Paper.js — Working with Paper.js Preferred Networks Research & Development http://blog.npca.jp/archives/591 直接
clickとmousedownの違い イベント名 内容 mousedown マウスダウンでイベント発生 mouseup マウスアップでイベント発生 click マウスダウンとマウスアップがあるとイベント発生 各イベントの違いがわからなかったので調べた。 例えばゲームなどで、マウスダウン中にゲージがたまり、離すと弾を発射という動作を考える。この場合はclickイベントだと、ゲージがたまるという動作を判定できない。だからmousedownとmouseupを使う必要がある。 ちなみにスマホだと動作が遅いので、タッチ操作専用のTouchstartなどのイベントを使用すると良い。 よくわからないインデントの問題 particleMaterial = new THREE.PaticleCanvasMaterial({ color: 0x000000, program:function(context)
チュートリアル こちらを参考にした。 Create Awesome Splashing Water Text Effect in Photoshop - PSD Vault STEP1 素材を用意 flickrでCreative Commonsの写真を検索。湖の写真をダウンロード。 All sizes | Lake Louise | Flickr - Photo Sharing! 切り取った湖面の一部を背景に張り付ける。複製、透明度の変更などを行う。 プリセット保存 同じトーンカーブ、色調補正を設定するのはめんどくさいのでプリセット保存を行う。トーンカーブで言うと、右上にリストのアイコンが出るので、そこから保存を行う。 ショートカット名 内容 トーンカーブ Ctrl+M 色調補正 Ctrl+L ・参考 Photoshopのトーンカーブはプリセットを保存すれば同じ効果を簡単に再現できる |
https://developers.google.com/web/starter-kit/ Google、I/Oカンファレンスを控えてマルチプラットフォーム・ウェブアプリのテンプレート、Web Starter Kitを発表 | TechCrunch Japan Githubのtrendingで1位だったので使ってみることにしました。最近自分はgruntを使い始めましたが、gulpという別のビルドツールを使っているようで興味を持ちました。またファイルや画像を圧縮の最適化がされていおり、モバイルで作るときは便利そうとも思いました。 Gituhub https://github.com/google/web-starter-kit 使い方の資料 ・使い方のドキュメント https://developers.google.com/web/fundamentals/tools/setup/setu
demo codepenを見ていたら、綺麗なグラデーションでパーティクルが回るデモがあった。 http://codepen.io/jackrugile/details/Gving これを参考にシューティングゲームみたいなものを作れないかなと思った。しかし途中で挫折したww プレイヤーから弾が出るところまでは作ったが、敵を作ったり、もっと画像などを使ってリアルにするのにはすごく時間がかかると思ってやめた。一切のゲームライブラリを使わずに作るのはしんどい。このままゴミ箱に捨てるのはもったいないので、やったことをメモしようと思う。 Keyの同時押しを判定する ・参考 018.Javascriptでキーの同時押しを制御する - West in the Far East JavaScript Two key pressed at the same time - Stack Overflow 普通に上
ノイズグリッドを作る void setup(){ size(500,500); smooth(); background(255); float xStart = random(10); float xNoise = xStart; float yNoise = random(10); for(int y = 0;y <= height;y++){ yNoise += 0.1; xNoise = xStart; for(int x = 0;x <= width;x++){ xNoise += 0.1; int alpha = int(noise(xNoise,yNoise) * 255); stroke(0,alpha); line(x,y,x+1,y+1); } } } 短い直線を引いて、その透明度を変えて模様を作っています。 四角で描画 float xStart,xNoise,yNoi
vimからブラウザへコピペする方法 vimは独自の領域でコピーしたテキストを保持している。一方ブラウザ上ではクリップボードという領域を使っている。 vim --version |grep clipboard -clientserver -clipboard +cmdline_compl +cmdline_hist +cmdline_info +comments -xterm_clipboard -xterm_save まずはvimでclipboardが使えるか確認。clipboardの前が「-」になっていると使えない。その時はvimをリビルドする必要がある。たぶんvim7.3以降は「+」になっている。 vimエディタからクリップボードを利用する。 — 名無しのvim使い vimでクリップボードにコピー - mintsu’s プログラミング日誌 clipboardが"-"の時、vim7.3に
demo パーティクルが中心から様々な方向に動いていくものを作りました。クラスを作成する練習として作りました。 オブジェクト指向でつくる 前回のコードを修正 前回、ベクトルを使ってパーティクルを動かしました。 位置・速度ベクトルを使ってパーティクルを動かす - not good but great 個々のパーティクルの大きさや位置、色を変えてみたかったのでクラスを作成し、書き直すことにしました。 ・参考 メディア・アートII 第3回 openFrameworks基礎 OOoF : オブジェクト指向 oF クラス作成 Particle.h #pragma once #include "ofMain.h" class Particle{ public: void setup(); void update(); void draw(); //RGB int r,g,b; //半径 int rad
demo ・参考 Media Art II 2013 第7回 : openFrameworks 3Dグラフィクス、OpenGL from Atsushi Tadokoro Meshを描画する Meshとは? Meshは頂点情報の集合のことです。複雑な物体を描画する時に用います。 VBOで高速化 VBOとは? VBOは頂点バッファオブジェクトのことです。予めOpenGL側で頂点データを作成しておき、その後GPUで計算する手法のことです。CPUの負荷が減り、GPUで高速に演算できるメリットがあります。 //VBO ofVbo myVbo; //頂点座標 ofVec3f myVerts[NUM_PARTICLES]; //頂点の色情報 ofFloatColor myColor[NUM_PARTICLES]; ofVboクラスからインスタンスを生成します。また頂点座標、色情報を入れる配列を宣言して
何を作ったか? 以前、Youtubeの埋め込みコードに開始時間を設定する拡張を書いた。 YouTubeを途中再生できるように埋め込みコードを改変するChrome拡張をつくった - not good but great Embed Screen Jump Code for YouTube™ - Chrome ウェブストア それの技術的な解説を書こうと思う。 アプリの設計 拡張の作り方、用語の解説 構成や、拡張の作り方はこのページを参考にした。 2013-09-09 アプリの動作手順 おおまかな流れは次のようになる。 行程1.Youtubeの視聴ページに行くと、URLバーの端にPage Actionのボタンが現れる。 行程2.ページ読み込み終了後、Content Scriptを実行し、Youtubeの動画オブジェクトを取得し、現在の再生時間を得る。 行程3.Content ScriptからBa
demo Meshの位置を変えて複数の立方体を作成する //ジオメトリーを生成 var geometry = new THREE.CubeGeometry(60,60,60); //マテリアル(ランバート反射)を生成 var material = new THREE.MeshPhongMaterial({color:0x660000}); //キューブの個数 var cubeNum = 3; for(var i = 0;i < cubeNum;i++){ //メッシュを生成 var cube = new THREE.Mesh(geometry,material); //キューブの座標 cube.position.x = -100 + 80 * i; cube.position.y = 0; cube.position.z = 0; //メッシュをシーンに追加 scene.add(cube)
demo 無名関数を英語にしたら「no name function」だと思っていたが、何だか気持ち悪かったので調べてみると「nameless function」だった。 匿名関数(anonymous function)って呼び方もある。 404 Blog Not Found : jargon - 無名関数(nameless function)?匿名関数(anonymous function)? どうでもいいけどjsfiddleでRunさせるためのショートカットキーは「Ctrl+Return」。Returnキーってなんだっけと思ったEnterキーのことだった件。 Enterキーとは 「Returnキー」 (Return key) (Enter key): - IT用語辞典バイナリ 無名関数で実行 <p id='nameless'>nameless function</p> $("#namel
チルダの意味とは チルダ「~」はビット反転演算子で、整数をビット反転させると反転させて1引いた数になる。 これを説明する前に2進数における、補数や符号付き整数について説明する。 以下はこれを参考にしている。 2の補数を理解する (1) - とあるソフトウェア開発者のブログ 1の補数 1の補数とは次の条件を満たす数。 「X」の2進数と「Xの1の補数」の2進数を足すと、全てのビットが1になる。 ・例 Xの2進表現(8bit):01011100 Xの1の補数:10100011 (01011100 + 10100011 = 11111111) 「Xの1の補数」は「Xの2進表現」をビット反転させたものである。 2の補数 2の補数とは次の条件を満たす数。 「X」の2進数と「Xの1の補数」の2進数を足すと、2のn乗になる。(nはXのビット数) ・例 Xの2進表現(8bit):01011100 Xの2の補
大阪で行われた「GitHub トレーニングチームから学ぶ GitとGitHubの基礎」というセミナーに参加してきた。折角なので質問をした。質問をした背景、その回答を書いてみた。 commit識別番号とは? gitでコミットしたときに、つけられる番号。グローバルで一意のため英数字の羅列になっている。 ログを出力すると、識別番号を見ることができる。 $git log commit 0162e65afed22b9fbd4ef915d77f9f67a223f7ec Author: naoyashiga Date: Sun Jun 2 18:57:30 2013 +0900 change README.md commit 57228b29d976075bdf47eb9ea7ead44c8b867632 Author: naoyashiga Date: Sun Jun 2 18:55:15 2013
デモ ボタンを押すと線がアニメーションして描画される。 SVGを使ったアニメーションするチェックボックスが新鮮だったので、自分もやってみることにした。 Animated Checkboxes and Radio Buttons with SVG | Codrops そこでSVGのアニメーションについて紹介されていたページを参考にSVGアニメーションを試してみた。 Animated line drawing in SVG - JakeArchibald.com SVGってなに? ベクターデータで書かれた画像。どれだけ拡大しても粗くならないのが特徴。 2011年はSVG元年に。デザイナー大注目の画像フォーマット「SVG」の特徴を一気におさらい。 | KAYAC DESIGNER'S BLOG - デザインやマークアップの話 どうやってSVGを作成する? Adobe IllustraterでSV
企業名からすぐにリクナビインターン募集ページ飛べるサービスをつくった。 Simple Rikunavi http://simple-rikunavi.herokuapp.com/ 特徴 検索ワードを入力すると随時該当する企業名を提示してくれる。 企業名をクリックすると募集ページに1ステップで飛べる。 実際のリクナビではトップページから検索すると2ステップは最低要する。 ひらがな表記とカタカナ表記の両方で検索。 例えば「りくるーと」と入力すると「りくるーと」と「リクルート」に該当する企業が提示されます。ユーザはひらがなをカタカナに直す必要がなくなります。 話題はそれるが、herokuで起動準備がかかる。どうにかならないか調べると、サーバが常に準備している状態に設定できるらしいが、長く使っていると有料になるみたいだ。 以下は、一番頑張ったサジェスト機能の実装について書きたいと思う。 準備 最初
このページを最初にブックマークしてみませんか?
『not good but great』の新着エントリーを見る
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く