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

Develop and Design Note

フロントエンドなデザイナーの覚書

デザイナーだけど、アプリのUI実装してみたら、面白いし流行ると思った話

僕はデザイナー職ですが、主に、HTMLやCSS、JSを使って、Webのフロントエンド部分を実装する仕事をしてきました。 しかし、今年の4月からは、同じ職場で、iOSアプリのUI部分を実装する仕事を始めました。 新しい言語を学ばなければいけなかったので、それな…

アラサー社会人におすすめの自己啓発本6選

今回は、アラサー社会人におすすめの書籍紹介です。 社会人として年齢を重ねてくると、若いころにはなかった新たな課題に直面するようになります。 それは、若手の育成だったり、リーダーシップ、偉い人たちとの政治、過程よりも結果、自立や冷静さなど、多…

アラサー社会人におすすめの映画6選

アラサーになると、社会の中で置かれる状況が変わってきて、「これからどう生きていこうか〜」なんてことをよく考えるようになります。 そういう時に、生き方のヒントをくれるような映画に巡り会うと、ちょっと元気になりますよね。 僕はけっこう映画を観る…

独自の戦法と、そのお手本となったマイヒーロー

仕事で少し進展がありました。自分の夢に一歩近づいたというか、やっとというか。 本ブログは技術のお覚書がメインですが、たまーに、「社会人として、どうこの世の中で生きていくか」的なことを書く「社会人シリーズ」があります。 今回はその最新版で、「…

データーベース「くだもの表」を作ってみた

MySQLを使った超簡単なデータベース「くだもの表」を作ってみました。

社会人6年目だけど、ストレングス・ファインダーやって、自分の強みを考えてみた

去年10月に「自分の強みを活かす」ため、プロジェクトマネージャーを辞め、コーダーに復帰し、部署も変えました。あれから半年が経ち、様々なチャレンジを通して「手応え」を感じ始めました。 ここで自分の選択や行動を冷静に振り返ろうと思い、「ストレング…

JavaScriptの修行・中間報告

去年10月、プロジェクトマネージャーからコーダーに戻り、JavaScriptの習得を第一の課題として、修行を積み重ねてきました。 11月にはこんな記事も書きました。 JaveScriptの本格的な修行を始めます - Web Design Note それから5ヶ月が経過し、宣言したカリ…

第62回「html5とか勉強会」レポート(というかメモ)

第62回 HTML5とか勉強会スペシャル ー ブラウザ、次世代Web標準の最新動向とか - dots. [ドッツ] 2/20(土)に、hmtl5とか勉強会に行ってきました。 62回目となる今回は「ブラウザ、次世代Web標準の最新動向とか」ってことで、個人的にかな〜り気になるタイ…

パスを通すってなに?

ある日、Node.jsをインストール済みのPCで、nodeコマンドを使おうとした時、「そんなコマンドありません」って怒られました。 $ node -v -bash node: command not found原因を調べた結果、「パスを通す」という作業をしなきゃいかんようです。 しかし、Node.…

この業界で生きていくために大切な3つの心がけ

IT企業で、Webサイトやアプリの開発、ときにマネジメントをして6年半が経ち、三十路も過ぎようとしています。 まだまだ修行中の身ではありますが、多少なりとも経験を積み、仕事を上手くこなしていくために大切なことがいくつかわかってきました。 僕自身の…

compassのsprite-mapっぽい記法でgulp.spritesmithを使ってretina対応する方法

最近はGulpに代表される様々なタスクランナーがnpmで管理できるようになり、SassもGulpで扱えるようになりました。 そのSassのフレームワークとして、ひと昔前はCompassが人気でした。特にCSSスプライトを簡単にやってくれる「sprite-map」の機能はなかなか…

JaveScriptの本格的な修行を始めます

JavaScriptはWebのUIを構成する言語の一つですが、最近は、サーバー側でもJavaScriptを実行できるNode.jsが普及してきました。 また、JavaScriptをベースとした次世代の技術、Web ComponentsやService Workerが登場し、高い将来性も秘めています。つまり、今…

2015年10月度のflexboxの書き方

1年ぶりに業務でコーディング・・・が、早速つまずく。「display:flexは、仕様やら、OSやら、端末やら、いろんなものがコロコロ変わったみたいだけど、今はどう指定すれば良いの?」ってことで、flexboxの書き方を調べました。

Material Design Lite使ってみた

仕事でMaterial Design Liteに触れる機会があったので、いくつか感じとれた特徴を紹介したいと思います。

Webの新時代に備えて

スマートフォンの時代になり、アプリ開発の競争が激化している昨今ですが、一方で、Googleを中心に、Webサービスを発展させる新技術が出現してきています。 おそらくですが、数年後、モバイルサービスはこのWebの新技術を使って提供することになるのだと思い…

AngularJSを使ってタイムキーパーを作ってみよう 応用編まとめ【AngularJSとは】

去年の11月末から始まった本連載ですが、やっとそれっぽいアウトプットができました。 ということで、入門編に続き、応用編をまとめました。

AngularJSを使ってタイムキーパーを作ってみよう #2-2【アジェンダごとのカウント】

ちょー久しぶりですが、AngularJSの「タイムキーパーを作ってみよう」の#2-2です。 アジェンダごとに時間をカウントできるようにするのですが、ちょっとやっかいだったので、今回は友人の力を借りて解決しました。

初めてのアプリ開発とマーケティング

前回は、主にマネジメントについて書きましたが、マーケティングについてもいろいろと学び、実践したので、紹介したいと思います。

初めてのアプリ開発とプロジェクトマネジメント

去年の10月からですが、主にコーダーとしてのウェブデザイナーという立場から一転して、アプリ開発のプロジェクトマネージャーという立場に変わり、実際にアプリを世に出すまで体験したので、実践した手法などを振り返ろうと思います。

CSS Nite「体制作りからクライアントを巻き込むディレクション術(LP40)」行ってきた

僕自身、プレイヤーからプロジェクトマネージャーへと職を変えて半年が経つのですが、「もっとマネジメントやディレクションの勉強しないとな〜」とちょうど痛感していたところでした。

Chrome拡張の作り方

既存ウェブサービスを拡張するChromeの拡張機能を作成してみました。

マトリックス・トロン・ガリレオ 〜プログラミングが捗る作業用BGM〜

今回はちょっと脱線して、作業用BGMの話です。

Bowerを導入してみた

開発環境の効率化ツールとして、前回のGulpに続き、「Bower」を導入してみました。

Gulpを導入してみた

コードや画像の圧縮、コンパイルなどの面倒くさい処理を自動化してくれる、最近流行りの「Gulp」を使ってみました。

Vagrantを使って仮想サーバーを作ってみた

巷で話題の「Vagrant」を使った仮想サーバーを構築してみました。

display:flexにしたら、子要素の幅が何かおかしなことになった

CSS3のフレキシブルボックスが一昔前の「display:box」だったので最新仕様の「display:flex」に変えたら、えらい崩れてしまいました。

AngularJSを使ってタイムキーパーを作ってみよう #2-1【デジタル時計の時刻表示】

前回までの基礎編では、タイムキーパーの基本的な実装までできました。 以降の応用編では、実践で使えるレベルにまで磨きをかけたいと思います。今回は、会議時間の合計値を「デジタル時計」の時刻表示に変換します。

AngularJSを使ってタイムキーパーを作ってみよう 入門編まとめ

AngularJSを使ってタイムキーパーWebアプリを作る連載ですが、入門編までできたので、一旦まとめました。

AngularJSを使ってタイムキーパーを作ってみよう #1-5【スタート・ストップの制御】

前回(AngularJSを使ってタイムキーパーを作ってみよう #1-4【カウンドダウンの実装】 - Web Design Note)までで、カウントダウンの処理が実装できたのですが、今度は「スタート」「ストップ」ボタンを連打できないようにします。

AngularJSを使ってタイムキーパーを作ってみよう #1-4【カウンドダウンの実装】

z前回(AngularJSを使ってタイムキーパーを作ってみよう #1-3【入力値の合計】 - Web Design Note)までの実装で、入力した数値を合計するところまでできました。 今度は、その合計値をカウントして、効果音を鳴らすところまで実装しうようと思います。

AngularJSを使ってタイムキーパーを作ってみよう #番外編【UI Bootstrapの導入】

AngularJSを導入した環境(AngularJSを使ってタイムキーパーを作ってみよう #1-1【AngularJSの導入】 - Web Design Note)の下で、Bootstrapを使える状態にします。

AngularJSを使ってタイムキーパーを作ってみよう #1-3【入力値の合計】

前回(AngularJSを使ってタイムキーパーを作ってみよう #1-2【フォーム送信処理の実装】 - Web Design Note)の続きで、以下の挙動を作ります。 入力できる値を数字のみにする 入力された値の合計値を出力する アジェンダを個別に削除できるようにする

CSS Nite「Webデザイン行く年来る年(Shift8)」行ってきた

仕事ではプレイヤーを離れてマネジメント業務が中心なので、 最近のトレンドをおさらいできる良い機会だと思い、CSS Nite「Webデザイン行く年来る年(Shift8)」に行ってきました。

AngularJSを使ってタイムキーパーを作ってみよう #1-2【フォーム送信処理の実装】

前回(AngularJSを使ってタイムキーパーを作ってみよう #1-1【AngularJSの導入】 - Web Design Note)の作業で、AnuglarJSが使える環境ができたので、実際にAngularJSのコードを書いてみたいと思います。

AngularJSを使ってタイムキーパーを作ってみよう #1-1【AngularJSの導入】

AngularJSを使って、簡単なタイムキーパーWebアプリを作ってみたいと思います。 まずは、AngularJSを使える環境を作りましょう!

Material Design + Web Components = Polymer

フレームワークの調査を終え、AngularJS+Bootstrapを実際に使ってみようとしたころ、Android5.0 Lollipopがリリースされました。「せっかくだから、Material DesignのUIで作ろう」と思い、いろいろ調べていくと「Polymer」というフレームワークに遭遇しまし…

フレームワークの共存

前回、フレームワークについていろいろ調べたのですが(フレームワーク導入に辺り、いろいろ調べてみた - Web Design Note)、CSSフレームワークとMVCフレームワークの共存は可能なのでしょうか。

フレームワーク導入に辺り、いろいろ調べてみた

Web制作の一連の作業ってありますよね。だいたいこんな感じでしょうか↓ ワイヤー書く→ビジュアル描く→HTML・CSS書く→JS・PHP書く しかし、ある程度慣れてくるとと、毎回毎回この一連の作業をするのが正直飽きてきます。個人的には、さっさと「JS・PHP書く」…

はてなブログ→WordPress→はてなブログ

6月に「はてなブログ」でブログの運営を開始して、9月に「WordPress」に乗り換え、10月、再び「はてなブログ」へと戻りました。

WordPressテーマ作成のためのノウハウ

WordPressでブログを書いていた時、オリジナルテーマを作成しようといろいろ調べたので、そのまとめです。

タスクかんばんを使ったアジャイル開発のススメ

前回に引き続き、実務での体験による備忘録です。今回は、タスクかんばんを使ったアジャイル開発についてです。

コードの破綻と設計・リファクタリングの関係

大規模サイトでは、運用していくうちに、テンプレートの「破綻」という現象が起きることがあります。一方、「破綻」を防いだり、立て直す手段に「設計」や「リファクタリング」があります。今回は仕事でリファクタリングを実施する機会があったので、その備…

プラグイン使わずにjQueryだけでスワイプ対応のカルーセル作ってみた。

以前、ボタンで動かすカルーセルは作成したのですが(レスポンシブWebデザインでカルーセルを実装してみた - Web Design Note)、これをスマートフォンのスワイプに対応させました。 JavaScriptのプラグインを使えば早いのですが、勉強のため、今回はプラグ…

背景画像とともに要素を伸縮させるには、background-size:containとjsを使う

画像をブラウザウィンドウの横幅に応じて伸縮させる場合、以下の2つの方法があると思います。 img要素のwidth属性を%値にしてheight属性をautoにする。 css3のbackground-size:contain(またはcover);を使う。

レスポンシブWebデザインでカルーセルを実装してみた

フォトギャラリーなどでよく使われるカルーセルをレスポンシブWebデザインで試しみました。

フラットデザインの導入

サイトリニューアルの際、工数削減という目的で「フラットデザイン」を採用しました。今回は、その時調査した内容のまとめです(ほぼリンク集ですが ^^;)。

レスポンシブWebデザインの工数

「レスポンシブWebデザインって、工数的には良いの?悪いの?」という検証を兼ねて、3年前に作成したサイトを「レスポンシブWebデザイン」でリニューアルしてみました。結論から言うと、制作工数は増えます。具体的に言うと、

ブログを開設しました。

仕事や趣味で学んだ、Webサイト開発の覚書を書いていきます。 よろしくお願いします。