はてなブックマーク

読了: 約 3 分 こういう事をブログに書くのは恥ずかしさしかないが、事業の立ち上げ期で手探りの中やっているとフラストレーションが溜まるのと、別に途中で諦めてもいいけど、それはそれで悔しい、けどサラリーマンをしながらの事業主だと相談できるような人もいないので、ブログに書きなぐっておきたい。 当然、覚悟を決めて起業しろ！とかサラリーマンに専念して成果残せよっていう話しもあると思うが、それは今後解決していきたいと思う。 現在は企業に勤めているが、個人事業主として事業を作っていく事にした(すでに作っている)。理解ある会社で、一応申請すればOKとのことで行っていくことにした。 事業主として申請した経緯 新卒で入社した制作会社に入社する前から自分で何かを起こすというのを一つの通過点として、「人の選択肢を増やしたい」と漠然とした思いがあった。 というのも父親が建設会社の社長をしていて、幼いときから父親

メルカリやMERYなど人気ネットサービスを生み出す組織の特徴と何故大企業から勝てるサービスが生まれないのか 11月 7, 2015 tanamako 読了: 約 9 分 インターネット業界に携わる方であれば、ネットサービスで世界で使われるサービスにしたい、サービスを伸ばして企業に売却したい、大企業から日本発のサービスを創りたい、など様々なモチベーションでサービスを開発をしているのではないだろうか。 多くの企業や個人が様々なサービスを運営する中で、サービスを企画・開発してグロースさせていくには ・どういう組織がそもそも伸びるサービスを創れるのか・考えられるのか ・なぜDeNA、GREE、サイバーエージェントなどの大手IT企業のチームからは何故日本・世界で使われるサービス(勿論ゲームを創るというのも凄いが今回はソーシャルゲームを除く)が出て来ないのか という疑問を抱いたので今回のブログを書いて

読了: 約 5 分 サービスを長期に渡って運用しているとデザインのパーツをどうするか、不要なものなのか否かわからなくなってきますよね。デザインも広がって来て、特殊な例が出て来たり、混在してくるとカオスな状態になります。 スタイルガイドを使う意味 wiki等でデザインを管理するのは、更新の手間やチームメンバーが変わった際などの役割分担・引き継ぎなどの手間が発生するなど無駄が多いので出来ればやりたくありませんね。 一々HTMLとCSSを切り出して、別のところに切り貼りするというのは長期に渡ると思ったよりもストレスになります。開発しながら管理したいというのが理想ですよね。スタイルガイドとして有名かつ歴史のあるstyledoccoの記事は多いのですが、Gulp+stylus+styledoccoという環境の記事がなかったので、今回は自分の環境をご紹介しておきます。完全なる俺得です。 まず最初に、諸

デザイン×テクノロジーで新しいサイトを創り続けるLETTERS.INCの制作物から心地よいアニメーションを学んでみるVol.1 10月 7, 2015 tanamako 読了: 約 2 分 最近様々なサイトで、デザインとテクノロジーの掛け算が素晴らしい『Letters.inc』が制作したサイトが取り上げられている。心地よいアニメーションと綺麗・シンプルでありながらも印象に残るデザインが特徴的だ。平凡な二次元的なデザインやインタラクションではなく、見るものを惹き付ける心地よいアニメーションの裏側はどのように創られているのか一部アニメーションのソースを見ながら学んでみる。 こういう発想があったのかという手紙のアニメーション 今回アニメーションの参考にしたサイトはこちら。 http://amp-music.net/about/howtobuy/ AMP MUSICというチームにミュージシャンが所

Web・ホームページ制作の競争優位性は価格(安さ)、スピード、デザイン、技術力のどれになるか 10月 1, 2015 tanamako 読了: 約 4 分 Web、ホームページ制作のツール(CMS)が増えて、一般に普及しており安価に、ある程度誰にでも制作を出来るようになってきました。更にクラウドソーシングサービスの成長で、フリーランス等の小さなチームに低単価で仕事を依頼するという流れがここ2年位あると実感しています。この流れはより進んでいくのではないかと思いますが、Web・ホームページ制作の競争優位性はどこになるのか、どこを伸ばすべきでどういう組織形成、受発注の仕組みを作るべきなのか考えてみます。 クラウドソーシングサービスによって価格が低下している？ ランサーズやクラウドワークスという発注者と受注する会社もしくは個人を繋ぐサービスが増えてきていますが、クラウドソーシングする事によって、価

読了: 約 4 分 昔から多くの出会い系サービスが存在する。 人間の根源的な欲求に基づくこの手のサービスは、今後も引き続き出てくる事は間違いない。 フィーチャーフォン時代では、前略プロフィールなどの掲示板が、実際は出会い系のような役割を果たし、男が可愛い女の子のやっている掲示板を毎日みて、ブログやアルバムを楽しみにしていた。 多くの出会い系サービスが存在する中で、勿論勝者が存在する。 そんな、人間の欲求に基づいている新しいサービスの勝ち方について調査してみた。 新しい出会い系アプリの時代 デバイスが変わって、スマートフォンの誕生や、SNSの台頭で、ネイティブアプリでかつ、ログインが自由で身元や趣味趣向が分かるからマッチングがしやすいFacebook連携型の出会い系が生まれ、今では、Pairs、omiai、タップル誕生など、App StoreのセールスランキングでもソーシャルゲームやLINE

読了: 約 5 分 大小・受託、自社メディア開発問わず、多くの企業でプロデューサー・ディレクターという職種が存在していると思います。しかし、プロデューサー・ディレクターというのは、どういう職業なのか定義が曖昧で、曖昧になっているからこそ【それは怠慢では？】と見受けられてしまうなんてことも。 いろいろな職場で起こっているのではないでしょうか。 今回は、プロデューサーやディレクターの存在価値、 更にはディレクター不要論からグロースハッカーの必要性について書いておきたいと思います。 ディレクター・プロデューサーの存在価値・実力がわかりやすく二分化している プロデューサーやディレクターというのは事業戦略、企画、仕様策定、スケジュール管理、リリースしたものの数値分析、 ユーザーテストなど多岐に渡る業務があります。 大企業だと、ディレクターとプロデューサーが分かれており、大まかな事業戦略やサービス、B

読了: 約 1 分 先日リリースしたandroidアプリですが、Googleが推奨する形にデザインや動きを変更しました。 https://play.google.com/store/apps/details?id=jp.coolhomme.android リニューアル後のUI リニューアル前のUI 変更点 ヘッダーのメニューの部分は下記のプラグインを使用しており、 背景には最初の記事の画像を設定しております。 スクロールすると上部の画像が消えるアニメーションがおき、 メニューがヘッダー固定になるデザインです。 https://github.com/florent37/MaterialViewPager チュートリアルもプラグインを使用しており、 1日で効率的に改善を行えたと思います。 まだまだダウンロードが少ないので、試行錯誤中 ニュースアプリという位置付けですが、雑誌のような形で、音楽の

【サービス】Webデザイン・コーディングが圧倒的に効率化するというAdobe museを触ってみた所感 4月 28, 2015 tanamako 読了: 約 2 分 最近デザイナー界隈で噂のAdobe museを若干触ってみたので所感です。 コーディング不要のwebデザインという大胆なキャッチコピーが気になっていたので、どれだけコーディングが効率化できるのかというのが気になったので、調べてみました。 コーディング不要ではあるが、効率的かは疑問である いきなり結論から述べていきますが、確かに完全なデザイナーさん、特にグラフィックなどを専門とされている方にとってはコーディングの勉強を一からやるのは非効率ですし、自分の得意な分野に力を注ぎたいというのはあるかと思います。 しかし、逆にコーディングをできて、Photoshopなども触ることができるが、もっとコーディングを効率的にやりたいという人にと

【書評】月刊事業構想2014年1月号のグロースハッカー(Growth Hacker)-成功請負人を読んで 12月 22, 2013 tanamako 読了: 約 8 分 会社の制度でクリエイターに年間10万円までセミナーや書籍購入を補助してくれる制度があるのでそれを使って最近話題の事業構想を定期購読してみました。 2014年1月号にグロースハッカーの特集があったのでそれについて少し書いておきます。 グロースハッカーとはどういう人材なのか シリコンバレーのトップアクセラレータである500 Startupsのメンターとして活躍されているジェームスホロー氏によるとアンブレラ(傘)型人材がグロースハッカーである。 以前は水平に幾つかのスキルがあって、一つだけ突出している【T型】人材がよく聞かれている事でしたが、アンブレラ型は実際の傘の様に斜め下に向かって幾つか全体が伸びているというものです。 それ

読了: 約 7 分 今制作に携わっているアプリケーションでページ毎、パーツ毎(ファーストビューであるか否か、アイコン等)でフォルダを作って画像を管理しています。 ホーム、投稿ページ、マイページ、タイムライン等。その中でもGoogleが最近1000ms以内で表示しろというものを出していて、 それじゃないと評価しないぞという事でスピードに本当にシビアになってきていますね。 Google公式サイトから Mobile Analysis in PageSpeed Insights Googleの方が書いた最近のspeedに対しての記事 Intro – Webを速くするためにGoogleがやっていること Make the Web Faster 00 – スタートアップのようにアプリを出してすぐの時や2,3年は改善を早いサイクルで回すために、 CSS Spriteや1つ1つの画像の管理が難しくなってきま

【Github】マークアップ・フロントエンドエンジニアは基本Git使えないと本当にヤバイ 10月 1, 2013 tanamako 読了: 約 2 分 今更になってしまいますが、最近はほとんどSVNを使っている所は少なくGit,Githubを使っている所が多くなってきているなと感じます。 今までマークアップエンジニアやマークアップよりのフロントエンドエンジニアは黒い画面に嫌悪感があるのかgit,githubに慣れていない方が まだまだ多いと思います。 そんな中マークアップエンジニアがおかれている現状と将来を考えていきたいと思います。 マークアップエンジニアの厳しい現状 photo credit: Tomas Caspers via photopin cc マークアップエンジニアの将来 これからマークアップエンジニアは確実にフロントエンドエンジニアとしてJavaScript寄りに移行していく

【JavaScript/アナリティクス】Backbone.js+mixpanelでユーザー動向をトラッキングする 10月 3, 2013 tanamako 読了: 約 5 分 スタートアップで有名なmixpanelですが現在のプロジェクトでGoogleアナリティクスより厳密な方法として 情報が欲しかったのでmixpanelを導入してみました。 現在のプロジェクトがbackboneを使っているのでその時のメモです。 mixpanelで何が出来るの uniqueユーザーや合計、平均でどのページが見られているか等グーグルアナリティクスより厳密なデータが取得出来ます。 アプリ等サービスローンチ後は得にそういった詳細情報をもとに作っていくと思うので必要だと思いますね。 mixpanel 例えばuniqueユーザーや合計、平均でどのページが見られているかはここから backbone.jsでの実装方法

【JavaScript】10分で出来るPhantomjs/Casperjsでページ計測 7月 29, 2013 admin 読了: 約 2 分 はじめてCasper.jsを使って認証のあるサイトのページスピードを測ってみようと思ったので それを試したときのメモ書きです。 はじめてのCasper.js 良く聞いていましたが使わなかったので、速度改善などで使用。 Casper moduleの使い方がざっと載っているのでこの辺りとかこの辺り見て認証する所を作る。 正直clickしてform入力して認証までがこんな簡単に出来ていいのかって位。 他にも色々なメソッドがあるので時間がある時に遊んでみたいですねー casper.start('http://xxx.jp',function(){ this.echo('Start script!', 'GREEN_BAR'); //表示したページのbutt

【JavaScript】テスト駆動開発 / Jasmine , Karmaの使い方・導入について 6月 15, 2013 admin 読了: 約 4 分 サービスを運用する中でテストを書いてないと拡張が難しい、確認に無駄な口数がかかるようになりますよね。 テスト駆動開発について今更ながらメモしておきます。 テスト駆動開発とは 詳しい説明はwikipedia先生に譲ります。 テストを書いてから実装の流れですね。 小さなスタートアップではTDDなのかどうか微妙ですが、今のプロジェクトでは徐々にこういう方向に持っていっています。 機能追加・拡張する時に無駄なフロントの確認項目が増えるからです。 最近ではgrunt,phantomなどで自動化したりサイトのキャプチャをとったり、 フロントのテストのためのものが増えてきましたね。 Jasmine / Karmaで永続的にチェックする Karmaはテス

読了: 約 4 分 こんにちわ。少しずつ夏の足音を感じる今日この頃皆さんはいかがお過ごしでしょうか。 絶賛スマホのウェブアプリを開発中の私ですが、開発・運用している中で学んだ事があったので、メモしておきます。 はじめに 皆さんはどのようなスマートフォンサイト、スマホのウェブアプリを作成しているでしょうか。 スマートフォンサイトといえば、あの忌まわしきIEから解放され、CSS3で角丸やbox-shadowなどを使ってデザインされている事だと思います。 なるべく画像を使わないように、写真とピクトグラム、CSSでグラデーション。というようなサイトをよく見かけます。 ウェブアプリといっても様々な形がありますが、今回は今私が開発しているアプリを作成している中で得たノウハウ？を メモしておきます。 CSSスプライトという神話 PCでの制作の時から画像はHTTPRequest数を減らすために極力まとめて

【CSS】Knyle Style Sheets(KSS)/KSS-railsを導入してみた 4月 8, 2013 admin 読了: 約 4 分 今携わっているスマホアプリがrailsを使用していて、CSSのドキュメント・クリエイティブの情報共有のためにstyledoccoを使用しようと思っていたのですが、railsとの互換性がなさそうなのでKSSを試してみました。 導入のための環境構築 まずrubyをインストールします。 かなり丁寧なのでこちらを参考に。 mac にrubyをインストールする方法 新規のアプリケーションを作成して、そこにいよいよkssを入れていきます。 KSS導入 既にKSSを使用してサンプルまで創られている人が記事を書かれていたので、そちらを参考に。 進めていて、kssのgithubのドキュメンテーション通りに進めているのですが、下記で止まったのでメモ //起動して、l

【JavaScript】Backbone.jsとUnderscore.jsのtemplateメモ 12月 5, 2012 admin JST 第4回 JavaScriptTemplates（JST）入門！ 概要 JavaScript用テンプレートエンジン「JavaScript Templates（JST）」 TrimPathというJavaScript用フレームワークの中で使用されているテンプレートエンジン デメリット ・SEO的にどうなのか。 ・JSオフすると微妙だよね ・テンプレートエンジンだから重い？ 例 試しに適当なものを作成しました。 <!-- window.onload = function(){ var contents = document.getElementById('contents'); var temp = contents.innerHTML; var data

【HTML/CSS/JavaScript】ウェブアプリを速くするための28の方法(翻訳) 3月 13, 2013 admin 読了: 約 24 分 フロントの技術について英語の記事をシェアされていて、気になったので理解を深めるために翻訳してみました。 英語の記事では、28から始まるのですがややこしいので、1はHTMLからはじめていきたいと思います。 DANGER!!!WARNING!!!はじめに 元記事はこちら ※間違った意図や誤訳をしている箇所が多々あると思いますが、その点ご了承くださいませ…。 初めてということでしょっぱい訳で、すみません…。 1. avoid inline code / インラインコードを避ける 1. <style></style> や <script></script> をHTMLに直接書く 2. <link rel="stylesheet" href="" />

【JavaScript】Node.jsでリアルタイムなものを創る チャットで試すVo.1 2月 26, 2013 admin 読了: 約 5 分 最近創っているアプリでコメント機能を創ったのですが、phpやajaxで創ると更新しなければ他の人のコメントが見られず不便ですよね。 ajaxでsettimeoutで10秒とかで取得しても画面がちらつくのが微妙という事で、Node.jsでリアルタイムチャットを創る事にしました。 macでの環境構築 以前の記事でwindowsでの環境構築については書いたのですが、mac book airを晴れて購入しまして、macの環境構築についてもざっくり書いておきます。 macでのインストールまでに参考になった記事 Node.js インストールログ 下記のコマンドが使えなかったので、node.jsは公式サイトからインストールしてしまいました。 $ sudo po

【JavaScript】JavaScriptフレームワークの実践的な使い方Vol.2 CoffeeScript/Require.js 2月 18, 2013 admin 読了: 約 5 分 JSフレームワークに関する概要を以前記事を書いたのですが、それの続編として、管理やリファクタリング・テストなどに使うのは何が良いか などなど、それに必要な知識や参考書籍、情報をまとめておきます。 以前の記事 【JavaScript】これだけ見ればJavaScriptフレームワークの概要を理解できる、フレームワーク毎の利点・使い方まとめ 目的 console.log,alertなど意外のテスト リファクタリングをするために 大規模開発のためのJavaScriptを学ぶための運用方法を学ぶため 参考例 サイボウズといえばJS界隈では知らない人がいないと思いますが、あまちゃんさんが元々いた企業です。サイボウズ

読了: 約 6 分 前職の時には使用しなかったので詳しい事はあまり分かっていなかったのですが、 現在スマホのブラウザアプリをごりごり創っていて、data URI Schemeも結構使えるんじゃなかろうかという事で 簡単にメモ・おさらいしておきます。 目的 ・HTTP Requestの回数削減によるスマートフォンでのページ高速化 使用されている方はもう分かっているかと思いますが、 CSS spriteとどっちがいいのかなという事で。 そもそもdata uriって何？URLなの？ 正直そう僕も思っていました。 そうしたら、英語の記事でも、『URI,not URL』とそんな事が書かれていました。笑 そもそものuri schemeについて これについては分かり易い記事があったので、こちらを参考にしてください。 メリット・デメリット メリット パフォーマンスが上がる CSS spriteで大量発生す

読了: 約 4 分 管理画面やWEBサービスの制作にあたり、登録フローを図式化したものって結構ありますよね。 ただ、そのデザインは何も考えないと陳腐というか味気ないものになってしまい、 本来の目的は達成しているが、行動を起こす気にならないものもあります。 ⇒　そこで喚起させる必要はないかもしれませんが。 ということで、登録フロー周りのデザインについて少しまとめます。 目的 登録フローなので、今自分はどういう情報を入力していて、 あとこのあとがどういうフローになっているかを視覚的に表現できれば 良いとおもいますが、それだけだと、ユーザーにとってどうなのか。 という疑問があったため、 １．そもそも情報を表示する以外に喚起する必要があるのか、 ２．他サイトはどうなのか ３．どういうデザインがあるのかをケーススタディで学んでいきたいと思う。 ケース 既に数個ですが、登録フローをまとめているサイトが

【JavaScript】これだけ見ればJavaScriptフレームワークの概要を理解できる、フレームワーク毎の利点・使い方まとめ 11月 3, 2012 admin 読了: 約 5 分 JavaScriptのフレームワークが増えてきて、なにがどう使えて今までとなにが違うのか、 開発の流行等纏めておきます。 大規模開発、ゲーム開発等規模や用途によって使い分けられるようにメモしておこうと思います。 最近よく聞くようになったフレームワークを挙げてみました。 Backbone.js SproutCore Sammy.js Spine.js Cappuccino Knockout.js Javascript MVC GWT Google Closure Ember.js Angular.js Batman.js enchant.js enchant.jsとは enchant.jsは日本のユビキタスエ