なぜエンジニアが作る画面はダサいのか…?「理由」と「対策」を徹底解説【エンジニア向け画面デザイン講座】UXUIDesignUIデザイン画面設計 1.はじめに エンジニアの私がデザインを本気で勉強した結果、デザイナーとエンジニアはそもそも思考が大きく違っているということがわかりました。 今回は「それ」をデザインに苦手意識のあるエンジニア方にも理解してもらえたらと思い、わかりやすくまとめてみました。 2.アプリの画面デザインを考えてみよう まず、こんなアプリを考えてみてください。 フィットネストレーナーが使うアプリ トレーニングルームでお客様とお話しながら使う 端末はタブレット そして 会員の個人情報確認 前回までのトレーニング状況の確認 次回の予約受付 といったことをします。 使える情報としては、こんな感じです。 あなたならどう画面デザインをするか、もしお時間があったら考えてみてください。

スペシャルサンクス @sega_yuu @frodo821 とある休日 娘（4歳）「ねえパパ」 ワイ「なんや、娘ちゃん？」 娘「非同期って何？」 ワイ「ひ、非道鬼！？」 娘「そうそう、非同期処理とかいうやつ」 ワイ「非道鬼を処理やて・・・！？」 非道鬼「ヴォ〜〜〜！！！」 娘「！？」 娘「・・・現れたわね、非道鬼」 娘「処理してあげる」 ワイ「娘ちゃん、まだ4歳なのに、もう厨二病か・・・？」 よめ太郎「おい」 よめ太郎「お前まさか、非同期も知らんのか・・・？」 ワイ「いやいや、まさかまさか」 ワイ「流石に知っとるわ」 ワイ「それはそれは・・・極悪非道な・・・鬼のことや・・・」 よめ太郎「お前が非道鬼に喰われてしまえ」 非同期処理とは よめ太郎「ええか、娘ちゃん」 よめ太郎「まず、同期って言葉は」 よめ太郎「タイミングが合うって意味や」 娘「じゃあ、非同期っていうのはタイミングが合わないって

こちらのReddit投稿 (https://www.reddit.com/r/sysadmin/comments/eaphr8/a_dropbox_account_gave_me_stomach_ulcers/) の和訳記事です。本番環境でやらかしかった人シリーズが盛り上がっていたので波に乗って（？）Twitterにヤバすぎる恐ろしい話が流れてきたのをすかさず和訳してみました。やらかしちゃった人というよりはやらかされちゃった人目線ですがいずれにせよそこら辺の怪談話よりよっぽど怖いです。 Dropboxのアカウントのせいで胃潰瘍になった。 皆は誰もが触れたがらない、会社を靴紐やガムやクリップでつなぎとめている「例のアレ」を見つけたことってある？そういうのって往々にして大型連休前の金曜午後4:45に落ちるし、般若のような様相を呈した上司が「このままだと第二のスターリングラード攻防戦が勃発するぞ

9月15日(土) DNSについて追記しました。バックエンド？今はクラウドがきっと上手くやってくれるので深く考える必要は無いんですよ（知らないので書けません😔） 問題のツイート 面接の質問で「ブラウザを立ち上げてページが表示されるまでの仕組みを全て知ってる限り説明してください」ってのをやると結構Web系の知識どれだけあるか分かると思ってる — 🍛🍺 (@tan_go238) September 10, 2018 解釈 今回は「ChromeのURL欄に入力してからページが表示されるまで」をやります。ブラウザの起動云々はWeb系の話じゃないと信じてます。 1. HTTPリクエストが飛ぶ HTTP2のヘッダ圧縮技術に全て書いてありました。 (追記)下のリクエストヘッダはテキストで書かれていますが、実際にはこれをバイナリにしたものが飛んでいるとのことです。segfoさんありがとうございます！

普段お世話になっているwebツール達の紹介です。 以下のサイトはすべて 無料 & 登録不要 です。 正規表現 regexper 正規表現を可視化してくれます。 複雑な正規表現を書くときやコードリーディングのお供に重宝します。 Rubular Rubyの正規表現をテストできます。 JSON JSON FORMATTER & VALIDATOR JSON系のツールが集まったサイト。 それぞれ、サイト名とドメインが違うのでリンクはそのうちの１つになっています。 (画像クリックでそれぞれのツールに飛べます。) ひとつずつ紹介します。 JSONをフォーマットしてくれます。 出力結果は折りたたむことができるので、長いJSONを読むときにも便利です。 JSONを含めた様々なデータ形式を変換できます。 Inputの以下に対応。 CSV INI JSON XML YAML Outputは以下に対応。 JSO

# ヘッダを複数指定する $ curl -v -H 'Connection: keep-alive' -H 'Content-Type: application/json' http://www.example.com # BacklogAPIでプロジェクト一覧を取得する $ curl -X GET -H 'Content-Type:application/json;charset=utf-8' -d '{"archived":false}' https://{ドメイン}.backlog.jp/api/v2/projects?apiKey={APIキー} # Kintone REST APIでアプリのレコードを一括取得する $ curl -X GET -H 'X-Cybozu-Authorization:{「ログイン名:パスワード」をBASE64エンコードしたもの};Content-Typ

目次 Django事始め: 1_環境構築 Django事始め: 2_プロジェクト作成 Django事始め: 3_Apache連携 Django事始め: 4_MySQL連携 前回は開発用簡易サーバでDjangoの起動をブラウザから確認しました。 後々公開することを考えるとapacheなどのウェブサーバと連携する必要があります。 ここではApache + mod_wsgi + Djangoという形にします。 公式でもオススメされている方法です。 Django を Apache と mod_wsgi とともに使うには？ ただ、いろいろウェブで調べましたが中々うまくいかず大変なところでした。 多分他の人がこの記事を読んでもきっとどこかでハマるんだと思います。 うまくいかない時は一度公式を読むことをお勧めします。しんどいですが、一次情報が一番確実です。 mod_wsgi公式 ではなるべく細かく書き残

タイトル通りによく使う正規表現を毎回ググるのが効率悪いのでまとめてみました。各言語で正規表現のサンプルを書いてみました。 正規表現式 Emailアドレス ^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$ ドメイン名 ^[a-zA-Z0-9][a-zA-Z0-9-]{1,61}[a-zA-Z0-9]\.[a-zA-Z]{2,}$ インタネットURL ^(http|https)://([\w-]+\.)+[\w-]+(/[\w-./?%&=]*)?$ ユーザー名 (Twitter username) ^[a-zA-Z0-9_\-.]{3,15}$ 固定電話 ^0\d-\d{4}-\d{4}$ 携帯電話 ^(070|080|090)-\d{4}-\d{4}$ IP電話 ^050-\d{4}-\d{4}$ フリーダイヤル ^0120-\d{3}-\d{3}

こんなの見つけたよ 100円ショップで物色していたら、こんなものを見つけたよ。100円ショップなのに300円※だったけど、いろいろ遊べそうなので思わず衝動買いしてしまったよ。 (※あとでAmazonをみてみたら1円から売ってました） Bluetoothでスマホにコマンドを送れるってことは、スマホではなくラズパイとBluetoothでつなげられれば、物理ボタンとWebを連携させるIoTっぽいことができそうだね。例えばボタンを押すとAmazonで注文できるなんちゃってDashボタンとか。今回は、LINEにメッセージをPush通知するLINEボタンをつくってみるよ。 準備するもの Raspberry-Pi3 (BluetoothがついてればOK) リモートシャッター (AB Shutter 3) つくりかた ラズパイとリモートシャッターとの接続 まずはラズパイとリモートシャッターをBluetoo

Pythonを使ってこの方さまざまな点につまずいたが、ここではそんなトラップを回避して快適なPython Lifeを送っていただくべく、書き始める前に知っておけばよかったというTipsをまとめておく。 Python2系と3系について Pythonには2系と3系があり、3系では後方互換性に影響のある変更が入れられている。つまり、Python3のコードはPython2では動かないことがある(逆もしかり)。 Python3ではPython2における様々な点が改善されており、今から使うなら最新版のPython3で行うのが基本だ(下記でも、Python3で改善されるものは明記するようにした)。何より、Python2は2020年1月1日をもってサポートが終了した。よって今からPython2を使う理由はない。未だにPython2を使う者は、小学生にもディスられる。 しかし、世の中にはまだPython3に

プログラマの永遠の悩み。デザイン。 とりあえず何か作らないといけない時のためのメモ。 やりたいこと Bootstrapでティザー等、最低限度のフロント画面を作る方法をとりあえずまとめておきたい。 基本レイアウトを決めておけば、全体のデザインやパーツ、パーツをデザイナさんにお願いしやすい。 別にFoundationでいいのですが、管理画面はBootstrapベースのAdminLTEで作るので、ノウハウを極力一元化しておきたい。 作るもの とりあえずこんなやつ。いちおうデモサイトも。 英語やマット系で作るとそれなりにかっこ良くなり、実データ（日本語）を適用した際のギャップに凹むのでとりあえず、ゴリゴリの日本語かつ普通の写真で作る。 全体の配色やカルーセル画像をデザイナさんにお願いするような流れとする。 また、スマホ？サイズの場合は、メニューが隠れる（collapse)ようにし、カルーセルの文字

不思議の国 SEが住んでいるところ、そこは不思議な不思議なお国柄です。 新たな国民として移住してきた人、特産物のシステムを買いに来た人など色々な人がこの国には存在します。 しかしこの国で話される言葉は 独特 です。 ぱっと聞いただけでは意味がわからなかったり、よく似た表現であっても微妙にニュアンスが違っていたり。 似たような表現を使い分けるその裏に、その人の意図や省略された文脈が隠されていたりもします。 どこの国でもコミュニケーションを間違うと非常に厄介ですが、そんなことにならぬよう、 お国言葉らしきもの をまとめてみました。 SEを代表例として、このお国言葉を話す人も、話される人も、改めて言葉の意味合いを見つめなおしてみると新たな気付きが得られるかもしれません。 なお、そんなことから 「絶対にSEしか使わない用語」を集めたわけではない のでその点ご了承くださいませ。 他言語版 @micr

アメリカ人です。 Hello 👋 この記事の目的 多くの日本人は自分の英語力には自信がないではないでしょうか。残念ながら「英語がわからん」、「英語が全然できない」という声をしょっちゅう聞いています。でも、今まで英語ができて意味がちゃんと伝わる何人かの日本人に会ったがあります。完璧な英語ではないけど(外国人も英語でミスる時もある...)、がんばって話そうとするので充分仕事ができる人たち。そういうがんばる姿勢はオープンソースのプログラムや英語圏のプログラムに手を出すためには一番大事なことだと思います（外国人側もすごく助かります）。日本の文化では「私はできる！」と自慢することは少ない中、この記事を通して、流暢に話せなくても自分のプログラミングの命名の仕方にはちょっとだけでも自信を持たせたいなと思います。完璧じゃなくていいです。Let's go! 合わせて読んでいただきたい 【日本人エンジニア必

http://paintschainer.preferred.tech こちらに先月記事にした線画の着色のデモを公開しました！！ 反響の大きかった皆さんに試していただけます！！（ちょっと期待値が上がり過ぎてないといいですがｗ） http://qiita.com/taizan/items/cf77fd37ec3a0bef5d9d 以前の記事『初心者がchainerで線画着色してみた。わりとできた。』はこちら。 ⇓そしてこちらがもじゃくっきーさんの使用例になっております。 GPUを使っている関係上アクセスが集中したりすると遅くなったりサーバーが落ちたりする可能性もありますが、生暖かく見守っていただければと思います。←たくさんの方に広まったこともあって、めっちゃ重くなっています。ぐぬぬぬ 画面はこんな感じっす。 線画ファイルを選択するととりあえず自動で塗ってくれます。 ※ただし、現状ではgifや

前回ではコンテナの基本操作に関して学んだので、今回はコンテナを実践的に使用した内容に関してアウトプットします。 行ったことはタイトル通り、MySQLを使用したRedmineの立ち上げです。 前提 コンテナを操作した環境は以下になります。 Mac book Pro（OS X El Capitan) Docker for Mac（1.12.0-rc4） 手順 MySQLのコンテナを起動 Redmineのコンテナを起動 MySQLのコンテナを起動 Docker Hubにある公式のMySQLイメージを使用しました。 $ docker run -d --name some-mysql -e MYSQL_ROOT_PASSWORD=secret -e MYSQL_DATABASE=redmine mysql --character-set-server=utf8mb4 --collation-serv

この記事はもう随分古いので注意してください。 mysql8.0のdocker-comose.ymlを作成したので新しいmysqlを使う方はそちらを参照してください。 dockerでmysql8を使う ### ここから古いです。 ### 公式のmysqlを使えるようにするのにハマったのでメモ。 ※Dockerのインストールが古かったので新しいリンクに変更しました。 Docker for mac install 公式のmysqlイメージを使う docker pull mysql docker run --name mysql -e MYSQL_ROOT_PASSWORD=mysql -d -p 3306:3306 mysql # 接続確認 passwordはmysqlになります。 mysql -h $(boot2docker ip) -uroot -p

はじめに 同人活動の形態としては、本業を持ちながら趣味の範疇で細々と同人活動を行う、というスタイルが多くみられる。かく言う私もその中の一人だ。 ところで、情報産業に勤めながら同人活動を行っている人は少なくない数いると私は考えている。（実際どうかはさておき。） そういう人達にとって、同人活動を行う上での敷居を嵩上げしまくっている要因がある。 それは無論、本業の収入だ。 IT関連のエンジニアはとにかく安月給なのである。 安くかつ長く働かせる（事により残業代で稼いでもらう）というのが我が業界の基本スタンスだ。どうしようもなくクソであるが、それはまぁ今回は置いておく。 そういった人達にとって、設備投資は常に悩みの種。できればしたくはないというのが本音だろう。 その場合、一番困るのが「どうやって『組版（印刷所に提出できる形式の原稿を作成すること）』するか」という事だと思う。 大手（壁サーとかお誕常連

プロローグ 恋人と暮らすことにしたので、新しい部屋に引っ越した。 家具やインテリアのテイストも二人で相談して、忙しい日々の中でもくつろげる落ち着いた空間を作ろうとしていた。 そんな幸福な日常が終わりを告げるまで、そう長くはかからなかった。 引っ越しも一段落して、新しい部屋にも慣れ始めたある朝、友人から引っ越し祝いと称して身の丈1mほどの神像が送りつけられた。 古代エジプトで天空神として崇められた、「ホルス神」をしつらえた置き時計だった。 その日からホルス神は、我が家のリビングに鎮座することになった。 準備 というわけで今回は、Raspberry Piを使ってリビングに突如として現れたホルスを喋らせて、さらに目覚まし機能を搭載してみようと思います。 今後エジプト神像を送りつけられた際の参考にしてください。 必要なものはこちら。 Raspberry Pi 2 micro SD スピーカー US

きっかけ matsuya-generator-rubyが、cowsayコマンドと組み合わせるとシュールこの上ない。 pic.twitter.com/gxaudeU377 — ぐれさん (@grethlen) 2015, 12月 6 もっと色々やってみたい。 あれ？Shell Script Advent Calendar 2015の22日目の枠残ってるじゃん。 じゃあやろう。 環境 Mac OSX Yosemite 10.10.5の端末上で実施。 zshを使って動作確認してますが、多分bashでも動きます。

Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article?