スマホやWebなどのUXデザイナーのためのプロフェッショナルツールを数多くリリースしている「UX Pin」の中の人から、「iOS 8のUIキットをリリースしたよ」と連絡を受けたのでご紹介。 UI/UXを研究している彼らならではの、高品質な無料素材です。
Angular.jsのアドベントカレンダー6日目です。(遅れてすみません汗) 今日は泥臭い?感じの話になります。 この記事は言及している人達の記事やスタイルガイドのまとめという感じなのですが、これからディレクトリ構成を考える初学者の方や,ディレクトリ構成に悩んでるかたの参考になれば幸いです Angular.jsのディレクトリ構成パターン紹介と、利用して感じた考察などのことを書きます。 はじめに LIG主催のAngular.js勉強会 #ng-curry にて、登壇したときの発表内容をまとめようと思っていたのですが、今回のAdvent Calenderを機会に勉強会で話した内容をまとめてみます。 元スライドはこちら -> http://slides.com/sugawararyousuke/ng-curry-2 まとめ疲れたので スライドの前半部分だけの話をまとめます。 このテーマで話そうと
フロントエンドの世界では、日々新しいフレームワークやライブラリが生まれています。 初めてそういった新しいものを習得する場合に、なるべくなら近道したいと思うのが人の気持ちだと思います。 まず大変なのが、Hello World から実際のプロダクトやプロトタイプで利用する場合で、これは初めてで何もわからない土地を一人で散策するような感覚にも似ています。 今日、紹介するのは私が進化の早いフロントエンドの世界で、より早く未開の土地に慣れるためにスタイルガイドを有効活用しているという話です。 ちなみにこの記事はFrontrend Advent Calendar 2014 - Qiitaの 6 日目の記事です。 5 日目はじめての CSS 設計 - Qiita(@moschann) 7 日目CSS のプリプロセスとポストプロセス、そして Rework と PostCSS(@morishitter) 良
はじめに この記事はGulp.js(全俺) Advent Calendar 2014です。 前回のこれからはじめるGulp(5):gulp-connectモジュールを使ったLiveReloadでgulp-connectのLiveReload機能を使いファイルの変更に合わせてブラウザをリロードさせることができました。今回はgulp-plumberとgulp-notifyを使ったデスクトップ通知を試してみます。 gulp-plumberについて gulp-plumberはStream中に起こるのエラーが原因でタスクが強制停止することを防止するモジュールです。watch中にエラーが発生するとwatch自体が停止してしまうため、これを防止するために使われています。 gulp-notifyについて gulp-notifyはデスクトップ通知が行えるモジュールです。コマンドラインではエラーに気づきにくい
AWS Advent Calendar 2014の7日目です。あと、全部俺Advent Calendarも開催中です。 運用絡みで何か書くと宣言したので、AWSのアカウント運用について書いてみます。テクニックや技術より、考え方の面での整理です。 AWSのアカウントの種類 AWSで利用するアカウントは2種類あります。AWSアカウントとIAMアカウントです。AWSアカウントは、マスターアカウントと呼ぶこともあって大元のアカウントになります。AWSにサインアップ時に作るものが、AWSアカウントで1つだけ存在します。それに対して、IAMアカウントはユーザアカウントです。AWSの管理コンソールから、個々のユーザ向けなどに作成します。 AWSアカウントの取扱について AWSアカウントは、全権限を持っています。強力すぎるアカウントで、日常の運用に利用するには危険すぎます。日常の運用には使わないというのが
iOSとの比較つき!Androidでこんなアプリ,こんな機能を作りたかったらこれを見ろ!作りたいアプリに対応するクラス、ライブラリのまとめ!iPhoneAndroidiOS by @mixiappwchr 最近Androidのほうも久しぶりがっつりやっているため、簡単ですがまとめてみました。 環境編 IDEは何を使えばいいの? 今から始めるにはnatvieのコードとかを書かない限りAndroid Studioを使いましょう 最近ようやく1.0が出ました。 Android Studio http://developer.android.com/sdk/index.html 検証用のエミュレータが遅いよ! iOSと違う点ですが、Androidはエミュレータの遅さに定評があります。Intel HAXMでの高速なエミュレータか、Androidの仮想環境を提供してくれるGenymotionを使いまし
日本のインターネット広告の歴史 1996年頃~ バナー広告(純広告) 1996年4月、商用検索サイト「Yahoo! JAPAN」がサービスを開始 1996年6月、「電通」と「ソフトバンク」の合弁によるインターネット広告を専門に扱う広告代理店「サイバー・コミュニケーションズ」設立 1996年7月、「Yahoo! JAPAN」がバナー広告の取り扱いを開始 その後、「インフォシーク」、「goo」などの検索サイトを始め、朝日新聞、日本経済新聞などのWebサイトがサービスを開始 メール広告 数行程度のテキストメール広告からスタート メールマガジン発行サービスが誕生し、メルマガのヘッダーやフッターに広告文を挿入するサービスを提供 1999年頃~ アフィリエイト広告 世界初の成果報酬型インターネット広告 1996年のアメリカで誕生、Amazon.com「アソシエイトプログラム」が世界初のアフィリエイトプ
AngularJS is a JavaScript framework that allows developers to create dynamic web applications. It uses HTML as the template language and extends HTML attributes with directives. AngularJS applications are composed of modules, controllers, services and filters that allow creating single page applications with two-way data binding between models and views.Read less
この記事はGit Advent Calendar 2014の6日目の記事です! (更新がお昼になってしまいました、ごめんなさい><) みなさん! Gitの-pオプション使ってますか? 今日は便利な-pオプションを使えるコマンドと、使いどころをご紹介します! 紹介する内容 git add -p git stash -p git log -p git stash show -p git checkout -p git add -p きっとこれが一番有名ですね! 追加したい変更を、ファイル単位ではなく差分のブロックごとに追加していくことができます。 Git管理されているindex.htmlに、以下の修正を加えたとしましょう。 ヘッダーのメニューの文字を小文字から大文字に変更 Contactに新しいリンクを追加 このまま両方まとめてコミットしてコミットメッセージに両方の内容を書いておくというのもひ
本稿では、まず「ウェブサービス開発の現場で、ウェブデザイナーの仕事はエンジニアに奪われつつある」という脅威を語る。次に、生存戦略を考えるヒントとして「分かりやすい生存戦略」を2つ提示する。「アートディレクター」と「フルスタックウェブデザイナー」という2つの生存戦略だ。 なお、「仕事を奪われていくプロセス」と「生存戦略を遂行するプロセス」について、5〜10年程度のタイムスパンをイメージしている。 ウェブデザイナーの仕事がエンジニアによって奪われつつある ウェブサービス開発の現場では、ウェブデザイナーの仕事がエンジニア/プログラマーによって少しずつ奪われつつある。とくに小さな組織や新規事業の現場では。 象徴的なのは「Bootstrapがあればデザイナー不要だよね」論。「もはや社員としてデザイナーを雇う必要はなくて、必要な時にランサーズで発注すればいいよね」「スタイルシートいじったり画像パーツ作
「エンジニアにとって良い組織体制ってどんなものですか? お話を伺いたいのですが・・・」と依頼をいただくことがあるが、都合上全部を受けてはいられない。ので、そういう疑問を持たれた方は以下の本を読むと良いかと思います。 How Google Works (ハウ・グーグル・ワークス) ―私たちの働き方とマネジメントposted with amazlet at 14.10.18エリック・シュミット ジョナサン・ローゼンバーグ アラン・イーグル 日本経済新聞出版社 売り上げランキング: 19 Amazon.co.jpで詳細を見る 小さなチーム、大きな仕事〔完全版〕: 37シグナルズ成功の法則posted with amazlet at 14.10.18ジェイソン・フリード デイヴィッド・ハイネマイヤー・ハンソン 早川書房 売り上げランキング: 7,579 Amazon.co.jpで詳細を見る Tea
この記事は Node.js Advent Calendar 2014 - Qiita の5日目です。 atom-shellを使って、nodeつかった「アプリケーション」 -- そう、そのブラウザとかと同じような実行環境ですよ -- で配布する方法を紹介します。 今日紹介する方法は、チーム内でエンジニアじゃない人に渡してボタン押して実行してもらう、みたいなのを意図してます。 使えればいいという記事であって、この手続きで作ったものをプロダクションで配布したりとかはしないでください。 1. AtomShellをダウンロードして作業ディレクトリを作る Resources/app以下にディレクトリを作ってそこで作業します。 ダウンロードはここから最新のやつを https://github.com/atom/atom-shell/releases $ mkdir -p ~/Downloads/Atom
無料で資料をダウンロード SEOサービスのご案内 専門のコンサルタントが貴社サイトのご要望・課題整理から施策の立案を行い、検索エンジンからの流入数向上を支援いたします。 無料ダウンロードする >> コンバージョン祭Weekということで「コンバージョン改善記事祭り」にもなっているSEO Japanですが、今回は視点を変えてペルソナ作成に関する記事を。コンバージョン改善を考える上で、ユーザーのペルソナを考えることが重要なのは誰もが分かっているとは思いますし、それなりにペルソナ作成は行っていると思いますが、なんとなく感覚的にやっている方も多いのではないでしょうか?今回は人気マーケッターのハイディ・コーエン氏がペルソナを考える上で問うべき質問をまとめた「ペルソナ101」的記事を紹介します。 — SEO Japan ラテン語で、persona(ペルソナ)は、俳優の仮面を意味する。そのため、演劇の登場
2年前に同じ趣旨の記事を書いたが、いろいろ変わったのでまた書いてみよう! Sketch 3(Mac) + Sketch Mirror(iOS) もう、Sketch以外でデザインするのはイヤだ、と思ってしまうほどパワーのあるデザインツール。ベクターベースのグラフィックツールなので、Adobe Illustratorと近いのだけど、もっと機能が絞られていて、UIデザイン寄り。いろいろと細やかに気がきいていて、好きなところを書ききれない感ある。起動が早い、ファイル保存も早い、数字書く窓でそのまま計算できる、ファイル書き出しするとき1.5倍とか3倍とか自由に拡大縮小できる、実機プレビューがリアルタイムかつ容易。 iPhone実機でデザイン確認するときは、iOSアプリSketch Mirrorでつなげることができる。リアルタイムで変更が見れる。昔はいろいろバグがあったけど、だいぶ安定して安心して使え
はじめに いつも使っているMac book。 パッケージマネージャーはbrewを使っています。 いつも何気なく使っているbrewですが、よくわかっていないのにネットの情報をコピペ→実行してしまうときがあります。 今回はそんなhomebrewについてちょっと調べてみました。 homebrewとは?パッケージ管理システムとは? wikipediaによるとこうなっています。 「Mac OS Xオペレーティングシステム上でソフトウェアの導入を単純化するパッケージ管理システムのひとつである」 実行ファイルや設定ファイル、ライブラリetcを一つのファイルとしてまとめているものをパッケージと呼びます。 パッケージ管理システムとはこのパッケージのインストール(アンインストール)作業を一元的管理するものです。パッケージやライブラリの依存関係などが管理できます。 ちなみにパッケージ管理には、 バイナリを取得す
この記事はTypeScript Advent Calendarの6日目の記事です。 この記事では、主にTypeScriptの型定義ファイルを作成する時、どのようにジェネリクスを使うと良いのかを、jQuery の型定義を元に考えてみます。 とは言ってもあまりTypeScriptの文法面に詳しいわけではないので、むしろ学習メモですが... 動機 TypeScriptでは DefinitelyTypedコミュニティに、様々なjsライブラリの型定義ファイルが集約されており、普段、自分で型定義ファイルを作成する際に上手い書き方がわからない時など、このサイトで他のライブラリを参考にすることがよくあります。 それらのライブラリで頻繁にジェネリクスが使われているの目にするうち、自分自身では今のところほとんどジェネリクスを使うことがないのですが、「やっぱり一度理解しておかないといけないのでは...」という気
この記事はTypeScript Advent Calendarの5日目の記事です。 最近Marionette.js+TypeScriptを自社開発のeラーニングシステムeden LMSにも少しずつ投入しはじめていて、なかなか良い感じだと思っています。この記事は、TypeScript+Marionette.jsのサンプルを示しつつ、簡単に使い方を説明していくという内容になっています。 そもそもMarionette.jsとは Marionette.jsの知名度が心配なので簡単に補足しておきます。Marionette.jsは、JavaScriptのMVCフレームワークであるBackbone.jsを、さらに簡単に利用するためのライブラリ、といったところです。Backbone.jsはその名前の通り、良くも悪くも「背骨」にあたる機能を提供するフレームワークであり、実際の開発に使おうとすると、こまごまと
Intro.jsをAngularJSのDirectiveにしたAngular Intro.jsを利用して、簡単にチュートリアルを実現する方法を試してみました。 こんなのできました ⇒ http://hkusu.github.io/AngularJS_intro_demo 導入手順 開発環境 は Mac OS X (Mavericks)とします。 今回は Yeoman の generator-angular で作成した雛型アプリケーションが既にある前提で、Bowerで angular-intro.js を追加する手順を説明します。 雛型アプリケーションを用意する方法については、前に投稿したこのあたりを参考にしてください。 Bower で angular-intro.js をインストール 一応、bower search で確認
これは AngularJS Advent Calendar 2014 の5日目(12/5)の投稿です。 最初は AngularJS に絵文字を導入する方法とか、チュートリアルを組み込む方法とか、AngularJS での Chromeアプリの開発など、過去に書いたものの中から「変わりダネ」を整理して再投稿しようと思ってたのですが(もし興味があれば過去のをご覧ください)、 絵文字 ⇒ AngularJSで絵文字を表示するメモ チュートリアル ⇒ AngularJSアプリケーションにチュートリアルを簡単に導入する Chrome ⇒ ChromeアプリをAngularJSで書くまでの手順 今回はアドベントカレンダーらしく? 読む人にとって役に立ちそうなものとして、モバイルフロントエンドでの通信量/通信数/通信頻度の削減ついて書きます。 これを書こうと思った動機としては、チューニングするのに必要不可
Webアプリケーションを作る入門的なジェネレータ generator-angular を紹介します。このエントリーは「YEOMAN Advent Calendar 2014」12月4日の記事です。 YEOMAN Advent Calendar 2014 - Adventar ジェネレータ generator-angular は AngularJS を利用するためのものです。 インストールから実行まで インストール いつものようにジェネレータをインストールしてプロジェクトディレクトリを作りyoとgruntの実行です。 $ npm install -g generator-angular $ mkdir angular && cd $_ $ yo angular $ grunt serve 途中聞いてくるオプションは Sassを利用するか? Bootstrapを利用するか? AngularJS
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く