はてなブックマーク

二重否定「!!」の意味 以下はブラウザが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

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("株式会社","㈱")+"【エントリー締切】"; 予定の詳細 リクナビに載っているタグを詳細に加えることにした。タグ

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に

何を作ったか? 以前、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 無名関数を英語にしたら「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

企業名からすぐにリクナビインターン募集ページ飛べるサービスをつくった。 Simple Rikunavi http://simple-rikunavi.herokuapp.com/ 特徴 検索ワードを入力すると随時該当する企業名を提示してくれる。 企業名をクリックすると募集ページに1ステップで飛べる。 実際のリクナビではトップページから検索すると2ステップは最低要する。 ひらがな表記とカタカナ表記の両方で検索。 例えば「りくるーと」と入力すると「りくるーと」と「リクルート」に該当する企業が提示されます。ユーザはひらがなをカタカナに直す必要がなくなります。 話題はそれるが、herokuで起動準備がかかる。どうにかならないか調べると、サーバが常に準備している状態に設定できるらしいが、長く使っていると有料になるみたいだ。 以下は、一番頑張ったサジェスト機能の実装について書きたいと思う。 準備 最初