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

訳も知らないで

デザイン&プログラミングのことも書くし、それ以外のことも書く。

デザインワークを進める上で何を押さえておくべきか

(ビジュアル)デザインを考える上で準備が足りず時間を無駄にしてしまったことがあったので デザインワークを進める上でやるべきことをざっくりですがまとめておこうかと。 あくまでイメージを変える・新しく構築するようなデザインワークの場合の話です(新…

某スーパーのセルフレジUI

最近自宅近くの某スーパーにセルフレジが登場しました。 正確にいうと「セミセルフレジ」というものらしく、バーコードの読み取りは店員さんがやってくれて支払いをセルフレジで済ますというもの。 小売店で最近増えているらしいですね。 セルフレジのUI 完…

Atomic DesignでWebサービスのフロントエンドをイメージする

Atomic Designというコンポーネントを組み合わせてシステムを構築していく手法がイメージしやすそうだったので、実際にWebサービスのフロントエンドデザインに当てはめるとどんな感じになるのか考えた。 Atomic Designについてはこの辺を参照 Atomic Design …

Loop processing for NodeList at JS ( ES6 )

Make a note as it is a frequent process. (get some element and use it at loop processing by JavaScript) Use for-of See the Pen Loop processing by for-of for NodeList at JS(ES6) by Fumihiro Nakahara (@711fumi) on CodePen. Use Array.from (If…

エンジニア(プログラマー)はランニングに向いている

そんな気がしています。 ※ここで言うランニングとは長距離走のことね 効率化 ランニング力を上げるために重要なのが、無駄を省く(効率化する)という考え方。 無駄な脂肪、筋肉をつけない 効率の良いトレーニングを行う(根性論じゃない) 無駄なペースの上げ…

駅トイレの緊急ボタン

駅のトイレ(個室)の緊急ボタンにはもれなく注意書きが添えてある。 今更感はあるが良い解決策はまだ出てないっぽいので考えてみた。 なぜ間違える人が多いのか いたずらなどの可能性は置いておくとして。 1, 見た目・形で区別(役割の判別)がつかない場合があ…

フロントエンドの勉強も兼ねて「近場の食事できる場所をテキトーに教えてくれるWebapp」作った

お勉強がてら簡単に作るはずだったのに疲れた。 https://god-of-meal.herokuapp.com/ GitHub - 711fumi/god-of-meal: God will tell the restaurant not far away. やったこと 現在地(緯度経度)から近そうなごはん処をぐるなびAPIを使って取得、テキトーに選…

Google design guidelines のライティングに関する部分を少し訳してみる。 〜 Language & Tone 〜

Google design guidelines のガイドラインの中にライティングに関するページが。 参考になるかなと思い、訳してみた。 ※LanguageとToneのみ 注:だいぶひどいですがニュアンスが伝われば… 良い表現を教えてほしい _(´ཀ`」 ∠)_ Material design - Writing テ…

PadrinoでBootstrap4(α)を管理するためにnpmを使う→Herokuにデプロイ

ちょっとしたサイトをPadrinoで作る際、Bootstrap4(公開時はまだα版)を使ってみることにしました。 せっかくなのでnpmを利用してJS及びCSSを管理することに。 理解できてない部分もありますがとりあえずメモ。 Bootstrap4をnpmで管理 Padrinoでプロジェクト…

I'm in Mars.

という歌がある。 FoZZtoneというバンドのボーカル、渡會さんのソロ作品。 可笑しなものさ 笑いながら憧れの中に住み着いた俺達は 雨乞いばかり ここには水がなくってさ みんなビールばっか飲んでるんだよ そんで泣いている 涙は集めて飲むんだってさ 夢に見…

【JS】jQueryの.onでES6のアローファンクションに書き換えたら動かなくなったので

jQueryを使ったコーディングで関数定義を ES6(Babel使用)のアローファンクションで書き換えたら動かなくなったので。 単純に関数内でのthisの意味が変わるから挙動も変わる。 アロー関数 - JavaScript | MDN $('#foo').on('click', function() { $(this).hid…

【HTML/CSS/JS】擬似要素の中身(content)を動的に変更する。

擬似要素のcontentについてそういえば調べたこと無かったのを反省。 擬似要素はJSから操作できない ある時擬似要素(:before, :after)の内容(content属性)を動的に変更したくてJSで変更しようとしたが、 調べた感じ、JSで擬似要素は変更できないぽい。 (CSS…

各デバイスでの確認環境を準備したメモ ~ windows(IE), iphone, Android ~

Webアプリやらなんやら作った時に必要となる各デバイスでの確認。 Mac上に無料で動作確認環境を用意したメモ。 Windows(IE) Microsoftが提供している無料の仮想マシンをMacで動かすことができる (昔はmodern.IEとか言ってた気がする)仮想マシンをここから…

おすすめ国内インストゥルメンタルバンド。

最近インストゥルメンタルバンドの曲を聞くことが多いので おすすめをつらつらと。インストゥルメンタルってカタカナで書くと格好悪いですね(´・ω・`) SPECIAL OTHERS 野外で聞きながらビール飲みたい。SPECIAL OTHERS - AIMS 【MUSIC VIDEO SHORT ... rega…

wantedlyとgreenで転職活動してみた感想。

最近転職者向けWebサービスを利用し転職活動をしたので、 転職活動の感想をぱらぱらと。 期間 2015/4~2015/7 使ったサービス ・Wantedly(ウォンテッドリー)「はたらく」を面白くする ・IT/Web業界の求人・採用情報に強い転職サイトGreen(グリーン) なぜこ…

夏の音楽フェスの持ち物メモ。 〜ROCK IN JAPAN FES.2015に参加して〜

今年も参戦してきましたROCK IN JAPAN FES.2015! (3年ぶり2回め) とにかくサンボマスター最高だった…! 体中から汗(目も含む)でもうすごいライブでした。 なぜgrassステージではないのか( ゚д゚)ro69.jp …で、毎年のことながら 「アレ準備しておけばよかっ…

東京マラソン2016のエントリーが始まったので東京マラソン2015を振り返る。 〜サブフォーのトレーニング〜

東京マラソン2016のエントリーが始まりましたね。もちろん来年もエントリーする予定ではありますが、 そういえば今年のレースを振り返ってなかったことを思い出したので記録&振り返り。 4時間切り(サブフォー)を狙っている人には参考になる…かも? 結果 201…

【Ruby】HTMLメールのテスト(デザインの確認)がしたかったのでメール送信するためのrubyスクリプト書いた。

HTMLメールを気軽に送信してデザインの確認をしたかったので メール送信用Rubyスクリプト書いた。fumihiro/send-test-email · GitHubGmailアカウントを使って指定したメールテンプレートを使いメールを送るだけ。 意外とHTMLメールを気軽に送る方法が無かっ…

【Gmailでの通知をリッチに!】Email markupでGmailユーザーにわかりやすくお知らせする。

Gmailでgithubからの通知を受け取った際、メール一覧での表示の中にボタンが付いているのに気が付きました。 (今更ながら) これ、issueに変更があったことを通知してくれたメールなのですが、 issueページへのリンクボタンが付いているんですね。 メールを…

プログラマーからWeb(UI)デザイナーになった時に読んでよかった本。

プログラマーからWeb(UI)デザイナーになってもうすぐ1年です。 まだまだ一人前には遠い気がしますが、最初デザイン業を始めるにあたって 参考になった本をまとめておこうと思います。 私と同じように新しくWebデザイナーとして働き始める人の参考になれば、…

【css, js】横並びにした要素の高さをそろえる方法。

HTMLで要素を横並びにした場合(float,inline-block)、高さをそろえる方法。 css3のFlexible Boxを利用する場合 古いブラウザを考慮しなくて良いのならこれで。〜参考にさせていただきました!〜 CSS3のFlexboxを基本から理解して、使い倒そう! | 株式会社LI…

【CSS】擬似要素を使って装飾を行う場合、ie8は::擬似要素というcssセレクタを理解しないことを利用する

css

Webデザインにおいて、CSSでちょっとした装飾を行う場合 擬似要素の:afterや:beforeを使うことがありますよね。 例えばこんなの↓ 〜参考にさせていただきました!〜 [CSS]box-shadowを使って、紙がふわりと浮かんだようなエフェクトをつけるスタイルシートの…

HTMLメールコーディング(デザイン)でちょっと困ったこといくつか。

css

HTMLメール作成で困るのが、 メールクライアント(サービス)毎に対応しているCSSが違うこと… スタイルはインラインで指定するとかtableレイアウトじゃなきゃダメとかいろいろあるんですが、 先日HTMLメールを作成した時に「これもダメなの?」という細かい問…

Adobe Creative Cloud 再インストールできなくて困ってた。

とある理由でAdobe Creative Cloud(アプリケーション郡を管理してくれてる奴)を再インストールした時にうまくいかず(・へ・)要はゴミファイルが残ってしまっていたためにできなかったようなので それらを削除したらうまくいきました。 ※やるときは自己責任で…

【sass】インターポレーションがmixin名に使えたらいいのに…

compass(-rails)のスプライト機能を使っていた時のこと… photoshopのデザインカンプから画像の切り出し→compass(-rails)でのcssスプライト画像作成の流れ - 記すに足らず。 (Retina用の)画像を、以下のように3つのディレクトリに分けてapp/assets/images/spr…

photoshopのデザインカンプから画像の切り出し→compass(-rails)でのcssスプライト画像作成の流れ

RailsアプリのUIデザイン〜コーディングするにあたり、 今回はじめてphotoshopとsass,compassを使用しました。 Web(UI)デザインの作成を、Fireworksからphotoshopにのりかえた。 - 記すに足らず。 はじめてSass(Compass)を使ってみた&CSS設計について初めて…

Powの設定に関するちょっとしたメモ。

Rack用サーバー(Rails等で使用可)のPowを使うときに設定が必要だったことのメモ。 RVMを使っていてpowを起動する場合 〜RVMのサイトに載ってました〜 RVM: Ruby Version Manager - Pow - RVM integration リンク先に書いてありますが、 RailsならRailsプロジ…

RailsでSassの読込させる時気をつけること。

RailsでSassを書いていた時(sass-rails使用)、なんかsass内で定義しているはずの変数が見つからないとか言われたりして うまく読み込まれず困っていました。 その時のapplication.css.scss /* *= require_tree . *= require_self */ @import "scss_file1"; @…

はじめてSass(Compass)を使ってみた&CSS設計について初めて考えてみた(SMACSS)時の感想

とあるWebサービスを作った時に初めてCSSの設計(SMACSS)を考え、Sass(Compass)も使ってみたのでちょっとした感想を。 CSSの設計をSMACSSを元にして考えてみた。 今まで関わってきたプロジェクトのCSSというのが、 ・共通部品用css一つ ・あと機能(ページ)ご…

システムエンジニアとデザインエンジニア(Webデザイナー)の協業について。

あるサービスを立ち上げた時のお話です。 デザイン担当と(サーバー側)プログラミング担当の仕事の進め方(分け方) 今までのやり方 今まで携わってきたプロジェクト(Webサービス作成)では デザイン担当(いわゆるWebデザイナー)がデザインを作成 デザイン担当が…

Web(UI)デザインの作成を、Fireworksからphotoshopにのりかえた。

FireworksからPhotoshopにのりかえた 私、今までサイトのデザインはFireworksで行ってきたのですが、 今後Fireworksに新機能を追加することはない?とadobeが開発終了宣言をしてしまったらしいので 潮時か…と思い初めてPhotoshopでWebサイトのデザインを行い…

【Webデザイン/フロントエンド開発】作成したWebサイトをローカルで確認するのにWebサーバーが必要? →Anvil使うがよいよ

結構前からあるみたいなのに知らなかったMac用アプリのAnvil。 開発中のローカルサイトに簡単にアクセスできるようにしてくれます。 (バーチャルホストを簡単に用意できるというか)Rack(Rails等)アプリだけでなく静的サイトの確認なんかにも使いやすいので…

【雑記】働き方について。 〜Webデベロッパーが海外で働くという選択肢を聞いて〜

本当の雑記… 先日、とあるセミナーに行ってきました。WEBクリエイターボックス & バンクーバーのうぇぶ屋『私達はこうして海外で生きてきた。』対談セミナー | Peatixものすごーくざっくり言うと 海外でWeb制作関係のお仕事しているセナさんとマナさんのお二…

【html/css】aタグやinputでボタンとか作るときに文字を消す方法 〜text-indent使わずに〜

よくaタグやinputタグのbackground-imageに画像を設定してボタンを作ることがあると思うのですが、 何かテキストを書いてしまうと画像の上にテキストが表示されて邪魔な時が。で、よく用いられるのがtext-indentでテキストを見えない位置まで持っていく方法…

【Rails】delayed_jobのenqueue方法とqueue(非同期処理)実行方法についてまとめ

Railsで非同期処理を行うためのgemであるdelayed_jobを使ったので、 キューを入れる方法とそのキューの実行方法をわかった範囲でまとめておこうと。 検証環境(version) Rails 3.2.11 delayed_job 4.0.0 delayed_job_active_record 4.0.0今回はキューをActive…

【iTunes】windowsやめてmacのiTunesを使うことにした 〜外付けHDDへの音楽データ移行、Time Machineでのバックアップ〜

Macを持っていながらiTunesをwindowsで使うとは愚の骨頂?、ということで 音楽の管理もmac book proですることにして、音楽データをwindowsから移行することにしました。いろいろ困ったこと初めて知ったこともあったのでメモ。 ※iTunesのバージョン:11.1.5 …

【Ruby】よく見かけるklassってなによ?

今更ですが… よくRubyで「klass」ってワードが出てくるんですけど、これは一体何を表しているのだろう… とずっと迷っていました。 同じような人がいたよほら… 〜参考になりました!〜 What is the difference between Class and Klass in ruby? - Stack Over…

【adobe】psdファイル、aiファイルのイメージ(サムネイル)をwindowsのエクスプローラー上でも表示させる。

例えばFireworksで作成したファイルをエクスプローラで見た時は、表示をwindows7でいうところの「大アイコン」で表示すれば画像(サムネイル)が表示されて何となく中身が把握できるわけですよね(pngファイルですから)。ところがai(Illustrator)ファイルやpsd(…

【Dreamweaver】PUT/GET対象に含めたくないファイルはクロークへ

Dreamweaverでサーバーとのファイルのやりとり(PUT/GET)に含めたくないファイル(ドットファイルとか)は、クロークすることで無視してもらえるようです。詳しくは… Adobe Dreamweaver * Dreamweaver サイト内のファイルおよびフォルダーのクローク ファイルパ…

HTMLメールを作る。 〜画像を使わずボタン、outlook2007(2010)との戦い、テスト配信〜

最近HTMLメール、増えてきましたよね。 ただ作るとなると、各メールクライアントで表示が微妙に異なるため チェックが大変。。今回画像なしでボタンを配置しようと思ってあれやこれやしてみました。 HTMLメールについて 普通のHTMLページ?を作るのと違う部…

【Fireworks】透過画像の境界線がギザギザになる(ぼやける?)のを防ぐ。

ボタン用画像として角丸の画像(透過画像)を作った際、スライスしていざサイトに使ってみると 境界線がギザギザしてなんか汚い… ※ちなみにFireworksでの透過画像の切り出し方 〜参考になりました!〜 Fireworksで画像を透過gif(透過png)として書き出す際の…

【雑記】読んでやる気(焦り?)が出るお話3つ。

たまたま見つけて読んでみたらすごいグッと来たお話3つのご紹介。 たまに読み返してやる気と焦りを取り戻しています( ー`дー´) 1,サッカー岡田武史監督の講演 確か南アフリカW杯の後で行われた講演だったと思います。 岡田武史氏が語る、日本代表監督の仕事…

bundle installの失敗 〜command line toolsとかgccとか〜

mac

今までMacOSのLion(10.7)だったのをMavericks(10.9)にアップグレード。 タダだからね!特に目立った不具合もなく使っていたのですが… bundle installに失敗 ruby on railsで開発しているのである日bundle installしたところ失敗。。 なんかnokogiriのインス…

【JavaScript】amazonのドロップダウンメニューぽいものを実装するJQueryプラグイン

amazonの左上にあるメニューあるじゃないですか。 これね↓ これっぽいメニューを簡単に実装できるJQuery用のプラグインがこちら。 kamens/jQuery-menu-aim · GitHub 使用方法 使いたいページでJQueryとjquery.menu-aim.jsを読み込みます。使い方はREADMEまん…

windowsでgit、Dreamweaverでgit。

ちょっとデザインのソースがバージョン管理されていなかったので、履歴とかを管理できるようにしたいなーと考えていました。やりとりするプログラマさんたちはgit使っているので、デザイナー側もgitで管理すれば統一取れて楽そう。 また調べてみるとDreamwea…

【その他】英語配列キーボードちょっと試してみたいな−という人へおすすめのキーボード。

プログラム書くには日本語(jis)キーボードより英字キーボードの方がいい!と言われるじゃないですか。windowsのデスクトップ使う機会が増えたので、英字キーボード使ってみようと思い探してたんですが、 ちょうどいいのが無くて困ってたんですよね。。あまり…

プログラマからWebデザイナー?への転身例はどのくらいあるものなのだろう。

私、訳あって(というか私の希望により) 社内でWebデザイナー的な仕事もやるようになりました。 具体的な作業で言うと ・サイトデザイン(バナーとか作成含む) ・フロント側コーディング?(HTML、CSS、JSはどうなるだろう) ・企画会議等にも少し参加 ただ完全…

【ruby】gsubで複数の文字パターンを置換する&後方参照する場合

小さなことですが… 複数の文字パターンを置換する gsubで複数の文字を置換したい場合、メソッドチェーン?で 置換文字数分gsubを呼ばなきゃならんと思っとりました。 "hogeはfugaです。".gsub("hoge", "私").gsub("fuga", "男") #=> "私は男です。" 実は置換…

【Ruby on Rails】非同期処理についてその②。 〜マルチスレッドとかマルチプロセスを実装してみた〜

業務で非同期処理の実装が必要となったので、 前回ぼんやりマルチスレッド、マルチプロセスについて調べてみたのですが…両方軽く実装してみたのでメモ。実際に実装してみたところ、マルチプロセスでもマルチスレッドでも 処理時間自体は短縮されたのですが、…

非同期処理の実装についてその①。 〜マルチスレッドだかマルチプロセスだかについて調べてみた〜

仕事でプログラミングしてたらですね、ちょっと非同期処理が必要になりまして。メールを大量に送る必要があったのですが、時間がかかって困っていました。一時的な対応として、送信対象者を2つに分けて、 それぞれに対しプログラムを2つ実行させていたのです…