なぜエンジニアが作る画面はダサいのか…?「理由」と「対策」を徹底解説【エンジニア向け画面デザイン講座】 - Qiita
なぜエンジニアが作る画面はダサいのか…?「理由」と「対策」を徹底解説【エンジニア向け画面デザイン講座】UXUIDesignUIデザイン画面設計 1.はじめに エンジニアの私がデザインを本気で勉強した結果、デザイナーとエンジニアはそもそも思考が大きく違っているということがわかりました。 今回は「それ」をデザインに苦手意識のあるエンジニア方にも理解してもらえたらと思い、わかりやすくまとめてみました。 2.アプリの画面デザインを考えてみよう まず、こんなアプリを考えてみてください。 フィットネストレーナーが使うアプリ トレーニングルームでお客様とお話しながら使う 端末はタブレット そして 会員の個人情報確認 前回までのトレーニング状況の確認 次回の予約受付 といったことをします。 使える情報としては、こんな感じです。 あなたならどう画面デザインをするか、もしお時間があったら考えてみてください。
低スペックでも応用情報技術者試験に合格した話 - Qiita
はじめに 令和2年度10月試験 応用情報技術者試験に合格しました。 応用情報への挑戦は初めてでした。 また、私自身、IT業界歴も浅く、プログラミングが出来るわけではないです。 こんな低スペックな私でも勉強法次第で確実な合格を手に入れることが出来ました。 再現性のある勉強法だと思うので、本記事がどこかの誰かのお役に立てればと思い、記事として残しておきます。 筆者のスペック 年齢 ：20代 業界経験 ：プログラミング未経験でSIerに入社して3年目 メイン言語 ：Python 備考 ：勉強は苦手 こんな感じなので、応用情報は私にはハードルが高いかなと思ってました。 （周りの諸先輩方も毎年落ちてましたし。。。） ただ、ネットで情報収集していく内に 「未経験でも応用情報に合格する勉強法！」 みたいな記事を見かけて愚直にその勉強法を実践したら合格しました。 （本当にありがたいです。世の
【CSS】スマホで Media Queries が効かないときの対処法 - Qiita
Media Queries とは Media Queries はCSS3から追加された機能で、レスポンシブデザインを行うのに利用されます。 レスポンシブデザインとは レスポンシブデザインとは、PCやスマホ、タブレットなどの画面サイズが異なる複数のデバイスに対して、それぞれの画面サイズに適したデザインを、それぞれ全く別のCSSファイルで書くのではなく一つのCSSファイルでまとめて行うものです。 Media Queries の使い方 Media Queries の使い方はとっても簡単です。 このブロック内にスマホのみに対応させたいCSSを書くだけでスマホの画面のスタイルを適用することができます。 ⚠️ 厳密にはスマホではなく横幅500px以下の画面に対して適用されます。PCでも、ブラウザのウィンドウ幅を500px以下にすればこのブロック内のスタイルが適用されますし、逆に500px以上の画面サイ
NEMの追跡botを作ってみた - Qiita
経緯 先日仮想通貨取引所のCoin CheckのNEM約600億円が盗まれるという事件が起きました。 その後の対応として日本の17歳JKが追跡用プログラムを作成したということで話題に話題になりました。(実際はJKではないようですが) ハッカーのアカウント監視はじめるか。 — Rin, MIZUNASHI (JK17) (@minarin_) 2018年1月26日 【コインチェック事件】NEM財団所属17歳の天才女子校生ハッカーみなりん氏が流出資金の自動追跡プログラムの開発をして犯人捜査 そこで私も17歳のJKになるために、あるNEMアドレスからの取引を監視し、そのアドレスから送信されたアドレスにもモザイクを送りつけ監視するbotを作成してみました。 環境 Arch Linux Node.js v9.4.0 nem-sdk 1.6.2 動作確認はテストネットのみで行っています。 GitHub
iPhone/iPad/Apple Watch解像度(画面サイズ)早見表 - Qiita
用語解説 ポイント boundsやframe等で使用される論理的な画面サイズ。通常はこれを意識してプログラムを作成します。 ピクセル 描画が行われる論理的な画面サイズ。ピクセルパーフェクトな描画が必要な場合には、このグリッドに合うように描画を行う必要があります。 デバイス 端末に搭載された液晶の物理的なピクセル数。これが上記ピクセル数と一致しない場合には、ピクセルパーフェクトの描画は非常に難しくなります。 このサイトの解説がわかりやすいです。 https://www.paintcodeapp.com/news/ultimate-guide-to-iphone-resolutions 拡大モード iPhone6, 6 Plusでは、画面設定から拡大モードが選択できます。 上記の表にまとめた通り、retinaの倍率はそのままで、ワンサイズ小さいiPhone相当のポイント数になります。 iPho
srcset属性について - Qiita
とりあえず3行で srcsetはHTML5で策定された新属性 この要素はブラウザのスクリーン要件(幅、高さ、ピクセル密度)に応じて、異なる画像を読み込む事ができる IEでは使うことが出来ないので注意(http://caniuse.com/#search=srcset) srcset属性について詳しく 詳しく書いてあり、良い記事です。 srcset と sizes エリック・ポーティス 文と絵 鈴木丈 訳 個人的には、印象に残ったのは グリンピースおいしい^q^ でした メリット Retinaディスプレイ用に画像を切り替える ウィンドウサイズに合わせて画像を切り替える ウィンドウサイズに合わせて動的に画像を切り替える ->環境ににあった最適な画像をブラウザが選んでくれる（余計な画像は読み込まない） 引用元:HTMLのsrcsetを使って画像をレスポンシブにRetina対応させてみよう デメリ
ATOM Editor をそろそろ始めようか - Qiita
私は20年来の「秀丸」ユーザでかつ重度の秀丸依存症なのだが，今まではともかく，これからも「Windows で秀丸」というわけには恐らくいかないので，マルチプラットフォームで使えるエディタを探している。 いくつか試してみたが，やはり ATOM Editor が相当だろう，と思うようになった1。 Visual Studio Code は MS 製品にしては面白いと思うし， .NET 5 のリリース時期あたりにはかなり良くなってる可能性もあるのだが，まだできないことのほうが多い。 Sublime Text は（Windows 版はあるけど）なんとなく Mac 用という印象。 そこで， ATOM Editor を実用性の観点から評価してみる。観点は以下のとおり。 Windows 環境でのインストールや運用の簡易さ できるだけ少ない機能拡張（基本機能でどこまでできるか） 秀丸との比較 ATOM Ed
SQLServerのインデックスについてざっくりとまとめてみた - Qiita
SQLServerについて SQLServerのインデックスについて学ばせていただく機会があり、ものすごく勉強になったのでまとめます。 はじめに 他のDBと同様にSQLServerにもインデックスの概念は存在します。 インデックスとは、DBデータの検索を高速に行うための索引のようなものです。 これがあることによって、データベース内すべてを検索せずに目的のデータを特定することができる便利なしくみです。 SQL Serverにおいてインデックスの種類は以下のようになっています。 ヒープ表（インデックスなしのテーブル） クラスタ化インデックス 非クラスタ化インデックス 複合インデックス 付加列インデックス インデックスは大きく分けてクラスタ化、非クラスタ化にわかれ、非クラスタ化インデックスの中に複合インデックスや、付加列インデックスといったものがあります。 これらを順に説明していきます。 ヒープ
[初心者向け] プログラムの計算量を求める方法 - Qiita
はじめに この記事では、プログラムの計算量を求める方法を説明します。プログラミングの初心者向けに、厳密さよりも分かりやすさを優先して説明していきます。 サンプルコードについて この記事のサンプルコードは、C言語（C99）で記述しています。 計算量とは？ 計算量とは、 「そのプログラムがどれくらい速いかを大雑把に表す指標」 です。 もう少し正確に言うと、 「入力サイズの増加に対して、実行時間がどれくらいの割合で増加するかを表す指標」 です。 グラフによる計算量の表現 計算量をグラフで表すと、以下のようになります。 これは、「入力サイズ $n$ が増加するにつれて、実行時間が $n$ に比例して増加する」ということを表しています。 別のグラフも見てみましょう。 これは、「入力サイズ $n$ が増加するにつれて、実行時間が $n^2$ に比例して増加する」ということを表しています。 計算量を求め
![[初心者向け] プログラムの計算量を求める方法 - Qiita](https://cdn-ak-scissors.b.st-hatena.com/image/square/d3ecfe09df0a88403b4eb96790db9ac55331d6ad/height=288;version=1;width=512/https%3A%2F%2Fqiita-user-contents.imgix.net%2Fhttps%253A%252F%252Fcdn.qiita.com%252Fassets%252Fpublic%252Farticle-ogp-background-412672c5f0600ab9a64263b751f1bc81.png%3Fixlib%3Drb-4.0.0%26w%3D1200%26mark64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTk3MiZoPTM3OCZ0eHQ9JTVCJUU1JTg4JTlEJUU1JUJGJTgzJUU4JTgwJTg1JUU1JTkwJTkxJUUzJTgxJTkxJTVEJTIwJUUzJTgzJTk3JUUzJTgzJUFEJUUzJTgyJUIwJUUzJTgzJUE5JUUzJTgzJUEwJUUzJTgxJUFFJUU4JUE4JTg4JUU3JUFFJTk3JUU5JTg3JThGJUUzJTgyJTkyJUU2JUIxJTgyJUUzJTgyJTgxJUUzJTgyJThCJUU2JTk2JUI5JUU2JUIzJTk1JnR4dC1hbGlnbj1sZWZ0JTJDdG9wJnR4dC1jb2xvcj0lMjMyMTIxMjEmdHh0LWZvbnQ9SGlyYWdpbm8lMjBTYW5zJTIwVzYmdHh0LXNpemU9NTYmcz02N2I2OWQzNzNjMmExYjBiN2FkMjEzMWJmYzE3MGQ2Yw%26mark-x%3D142%26mark-y%3D57%26blend64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZoPTc2Jnc9NzcwJnR4dD0lNDBjb3RycGVwZSZ0eHQtY29sb3I9JTIzMjEyMTIxJnR4dC1mb250PUhpcmFnaW5vJTIwU2FucyUyMFc2JnR4dC1zaXplPTM2JnR4dC1hbGlnbj1sZWZ0JTJDdG9wJnM9NGZjNDZhOWU0OTlhMDE4NzAzMzZmODZmYzU2N2JjMGU%26blend-x%3D142%26blend-y%3D486%26blend-mode%3Dnormal%26s%3De92ae458505ab54e62eba6f270378cb7)
計算量オーダーについて - Qiita
プログラムの計算量を表すO記法について、使用例を調査しました。 計算量（オーダー）とは？ あるアルゴリズムを使った演算の性能を表す指標。 計算量は大きく二つに分けられる。 時間計算量（処理時間の計算量） 空間計算量（メモリ使用量の計算量） 単に計算量（オーダー）と言った場合、時間計算量のことを指す。 O記法（オーダー記法） 特定のアルゴリズムでの計算が、どれくらい掛かるかを表した記号。 処理対象のデータが非常に大きくなった時の処理時間を大雑把に評価する。 処理時間が短い順（性能が良い順）に代表的なオーダーをまとめる。 O記法 概要 使用例
DB論理設計のノウハウ - Qiita
DB設計の概要を簡単におさらいした後、論理設計について主にまとめていきます。 DB設計の全体手順のおさらい DB設計は、大きく論理設計と物理設計に分けられます。 概念スキーマを定義します。 エンティティの抽出 エンティティの定義 正規化 ER図の作成 物理設計 論理設計の結果を受けて、データを格納するための物理的な領域や格納方法を決めます。 テーブル定義 インデックス定義 ハードウェアのサイジング ストレージの冗長構成決定 ファイルの物理配置決定 テーブルの構成要素のおさらい 行と列 行(レコード)：横のデータの組 列(カラム)：縦のデータの組 キー キーとは、DBのテーブルから特定のデータを引き出すための鍵です。 主キー：その値を指定すれば、必ず一行のレコードを特定できるような列の組み合わせのこと。一意にレコードを識別するためにある 外部キー：2つのデーブル間の列同士で設定するもの。参照
B-treeインデックス入門 - Qiita
B-treeがMySQLで使用されている背景から、B-treeインデックスの構造、そしてそれに基づいたインデックスの使用方法の入門編です。以下の流れに沿ってまとめていきます。 インデックスってなに？ B-treeってなんでインデックスに使われているの？ B-treeインデックスの構造 インデックスの使用方法 ※ 勉強をかねてまとめていることもあり、間違っている箇所がございましたら教えていただけると嬉しいです。 インデックスってなに？ 全体の内容の中から特定部分を探すために使用する、本の索引のような概念のことです。これを用いることで、検索を高速化することができます。 特定の項目が本のどこに載っているかを確認するために索引を調べることで、全ページを順に調べなくても、その項目が登場するページ番号がわかる MySQLのストレージエンジンでも、インデックスが同様の方法で利用されており、インデックスの
分岐アンチパターン - Qiita
「秩序のない分岐なんてほろんじまえ！！！！」 レガシーなシステムを触った時に、こう思ったことはあるのではないでしょうか。 私にもよくそう思うときがあります。 そんな絶望を生み出さないように分岐に関するアンチパターンと対策を考えてみました。 まず、なぜ生み出されるのかを書き出してみましょう。 秩序のない分岐 たくさんの分岐 →迷子になる ネストが多い →インデントが見づらい。 分岐ごとに条件が複雑 →覚えるのがつらい。 気づいたらスパゲッティコード →処理を追っている間にお腹が空き、スパゲッティを食べちゃうので太る。 テストがしづらい。テストケースが作りづらい。 →テストをするためのテストが必要とか言い出してしまう。 ifだけに畏怖 →書きたかった。 分岐処理に出会った時、これだけの問題があることに気づきました。 私はもう絶望したくないし、私のように絶望する人を作りたくない。（そして太りたく
ソフトウェア開発 アンチパターンのまとめ - Qiita
ソフトウェア開発アンチパターン（Software Development Antipattern）をまとめた． 基本的に下記の本を邦訳した内容になっている． https://www.amazon.com/AntiPatterns-Refactoring-Software-Architectures-Projects/dp/0471197130 ソフトウェア開発アンチパターンって何？ システムの拡張性と保守性の向上のために，良いソフトアーキテクチャが必要 ソフト開発は混沌とするため，実装されたものは計画とかけ離れてしまう． リファクタリングが効果的となる． ソフト開発のアンチパターンが有用となる． それぞれのアンチパターンで，リファクタリング方法を解説している ソフトウェア開発アンチパターン目次 アンチパターンとは，「やってはいけない例」を類型化したもののこと． パターンごとに「どんな問題が
DB スキーマ設計のガイドライン - Qiita
この記事は、2011年頃に書かれた Yii framework サイトの wiki 記事 Guidelines for good schema design の翻訳です。 もともとは Yii 1.1 のために書かれたものですが、Yii 2, Yii 3 にもそのまま適用可能ですし、もっと広く、アクティブ・レコードのような ORM 一般に通用する内容であろうと思われます。つまり、以下の文章中の "Yii" という名前は、あなたが使っている任意のフレームワークの名前に置き換えてもよい筈です。 はじめに 事実上すべての Yii アプリケーションはデータベースの上に構築されます。Yii はデータベースの取り扱いにおいて非常に柔軟ではありますが、以下に述べる設計上の選択をすれば、そうでない場合に比べて、ものごとがより一層都合良く進みます。 最初に、ごく大まかに言うと、Yii アプリケーションではアク
HTML5 Canvas 入門 - Qiita
今更ながら、Canvas をまともに勉強したことがなかったので、一からやってみました。 これまでの人生、 JavaScript は初心者の超えるべき壁をすっ飛ばして学んできたので、おさらいも兼ねて。 キャンバス上でクリックすると、その座標で図形を描画できるようになるチュートリアルです。 コードだけ見たい方はこちらを。 https://github.com/kyrieleison/canvas-tutorial/blob/master/index.html キャンバスを準備する <!DOCTYPE html> <html> <head> <title>canvas tutorial</title> <style> #canvas { background: #666; } </style> </head> <body> <canvas id="canvas" width="640" heig
JavaScriptの同期、非同期、コールバック、プロミス辺りを整理してみる - Qiita
対象 このあたりの理解があいまいな方： JavaScriptは非同期で処理できる！？ 並行処理と非同期処理って同じ！？ そもそも同期と非同期って何が違う！？ 非同期の結果はコールバックで受け取る！？ コールバックを多用するとコールバック地獄に陥る！？ Promiseを使うとコールバック地獄を回避できる！？ JavaScriptの基礎 大前提として、JavaScriptはシングルスレッドで動いています。 これはつまり、JavaScriptは並行処理はできないということです。 同期であろうと非同期であろうと2つ以上の処理を同時に行なうことはできません。 JavaScriptでは、キューに登録された関数が順番にひとつずつ実行されていきます。 でもキューに登録される順番が同期であったり非同期であったりします。 JavaScript以外（例えばデータベース等）に仕事を任せてる間、その処理を待たないで
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
VisualStudio ショートカット（基本） - Qiita
Media Queriesの指定について - Qiita
データベースオブジェクトの命名規約 - Qiita
