  |
はてなキーワード: UXとは
今回は、データベースを使ったWebアプリの制作を通じて、SQLの使い方を確認してみましょう。
Webブラウザー（Google Chromeなど）で動作するアプリのこと。
ウェブアプリケーション（Web application）は、インターネット（もしくはイントラネット）などのネットワークを介して使用するアプリケーションソフトウェアである。
多くの場合、これらのアプリケーションは、Webブラウザ上で動作するプログラミング言語（たとえばJavaScript）によるプログラムとWebサーバ側のプログラムが協調することによって動作し、ユーザはそれをWebブラウザ上で使用する。
Windowsパソコンを使ってたら、「XAMPP」を使ってすぐにWebアプリを試作できる。
以前の講座（その６、その９）を参考にして、XAMPPとCodeIgniterを用意しておこう。
最近のアプリの作り方は、「デザインスプリント」と呼ばれる方法が流行ってます。本やネットの情報がたくさんあるので調べてみよう。
ざっくりと、以下のような流れです。
それでは順番にやってみよう。
以前にデータベースの練習をしたとき、「後で簡単なチャット（おしゃべり）ができるWebアプリを作ってみたいと思う。」と言ったので、今回のアイデアは「チャットを作る」にしよう。
Webページを作るには、HTMLやCSSの知識が必要だ。HTMLやCSSを使ったことがなければ、本やネットの情報で勉強してみよう。
今回はCSSを使わずに、HTMLだけでシンプルなWebページを作ってみよう。（練習だから余計なもの、無駄を省きたい。）
特にこだわりがなければ、Microsoftの「Visual Studio Code」という無料のIDE（統合開発環境）を使ってみよう。
インストール方法や使い方、メニューの日本語化のやり方は、検索して調べてみよう。
「mock」フォルダの中に
テキストエディターで保存するとき、文字コードを「UTF-8」にしておく。
「index.html」ファイルをエディターやIDEで開き、以下のような内容に編集して保存します。（コピペする場合、行頭の字下げ（インデント）の全角スペースを半角スペースに置換して下さい。）
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<form>
<label>メッセージ</label>
<input type="text" name="message">
<button>投稿する</button>
</form>
<table border="1" cellpadding="5" cellspacing="0" bordercolor="#CCCCFF">
<tr>
</tr>
<tr>
<td><a href="edit.html">編集</a></td>
<td><a href="delete.html">削除</a></td>
</tr>
<tr>
</tr>
<tr>
</tr>
</table>
</body>
</html>
「edit.html」ファイルをエディターやIDEで開き、以下のような内容に編集して保存します。（コピペする場合、行頭の字下げ（インデント）の全角スペースを半角スペースに置換して下さい。）
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<p>メッセージを変更して「更新する」ボタンを押してください。</p>
<form>
<label>メッセージ</label>
<input type="text" name="message" value="Webアプリを作ってみる！">
<button>更新する</button>
</form>
<p><a href="index.html">戻る</a></p>
</body>
</html>
「delete.html」ファイルをエディターやIDEで開き、以下のような内容に編集して保存します。（コピペする場合、行頭の字下げ（インデント）の全角スペースを半角スペースに置換して下さい。）
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<form>
<p style="background-color:lightpink">Webアプリを作ってみる！</p>
<button>削除する</button>
</form>
<p><a href="index.html">戻る</a></p>
</body>
</html>
以上でモックのWebページ（HTMLファイル）ができました。
Webブラウザーで「index.html」を開いてください。「編集」や「削除」、「戻る」をクリックして、チャットの画面を確認してください。
実務では「仕様書」という書類を大量に作る場合もありますが、時間と労力の無駄になっている場合が多々あります。（紙の仕様書はあまり使われる機会がない）
紙の仕様書（アナログ）の代わりに、モックを仕様書（デジタル）として使うと、その後の段階がスムーズになります。
どうしても紙でなければ困る場合以外は、モックをそのまま仕様書として使ってみましょう。
モック（動くハリボテ）を作るための便利なツールがいろいろあります。
ちょっと長くなったので、モックを基に機能を実装（プログラミング）するのは次回にしましょう。
anond:20181015215004 未経験からのプログラマーなんだが全然分からない
anond:20181016015826 増田式プログラマー養成講座 その１ パソコンの用意
anond:20181016164341 増田式プログラマー養成講座 その２ プログラム＝データ＋処理、プログラム言語の種類
anond:20181016180059 増田式プログラマー養成講座 その３ 構造化プログラミングの基本（順次、反復、分岐）
anond:20181016193144 増田式プログラマー養成講座 その４ 子ども向け教材「Scratch」で構造化プログラミングの練習
anond:20181017161003 増田式プログラマー養成講座 その５ オブジェクトとは何か？
anond:20181017191404 増田式プログラマー養成講座 その６ OOPの種類、PHPの準備
anond:20181019181549 増田式プログラマー養成講座 その７ OOPの仕組み（前半）
anond:20181020230044 増田式プログラマー養成講座 その８ OOPの仕組み（後半）
anond:20181022232327 増田式プログラマー養成講座 その９ MVCフレームワークを使ってみよう
anond:20181023184616 増田式プログラマー養成講座 その10 OOPの参考書
anond:20181024214133 増田式プログラマー養成講座 その11 データベースを使ってみよう
anond:20181026145516 増田式プログラマー養成講座 その12 データベースの参考書
anond:20181028152656 増田式プログラマー養成講座 その13 SQLの文法
anond:20181031014212 増田式プログラマー養成講座 その14 Webアプリの試作品を作成 ←★今ここ★
anond:20181101225335 増田式プログラマー養成講座 その15 Webアプリの完成見本
：
実を言うと、一般人はプログラミング以前に計算も理解できないんだけど、あれらはまだ大衆的な要素を内在してるから、四則演算だけを受け取ることはできる。
それまで大衆的な要素＋紙的な要素だったそろばん(計算)が、電子化へと移行する時に大衆的な要素を切り捨てたのね。より高速な計算機に進化するために。
だから、それまで大衆部分だけを受け取って喜んでた一般人は急にわからなくなりヒステリーを起こした。
だけど、コンピュータ技術者はプログラミング以前にも数学等の計算部分しか見てないから一般人が何を騒いでるのかわからない。
一般の人って、パソコンの凄い人がプログラミングになるとか勘違いしがちだけど(オタク＝パソコンの大先生論もその変奏)、全く質の違うもの。
パソコンって、アプリをひすたら立ち上げて綺麗に絵を描いたり動画を観たりするようなもの。コーディングじゃない。
日本のバカって教養がない極東の田舎者だから、コーディングを理解できない。すぐに立ち上げてって言われたときに「パソコン」を持ち上げる。怖いんだろう。自分に理解できないパソコンが。UI/UXデザインですら大多数は理解できないんだもの。あんな教科書的なものですら。
とにかくアジアって科学後進国なのね。トップの日本ですらこうなのだから。謎のスタートアップがBitCoinと人工知能を脈絡なく展示してホルホルしてるレベルだもの。
まず日本に生まれた時点で、プログラミングを理解するには圧倒的に不利。英語もできないし。こんなこと言うと、「一般人にもわかやすく説明できるのが一流ダー」みたいな恥ずかしい駄々っ子が沸いてくるけど、プログラミングって歴史上一度も大衆を相手にしてないので。
民主主義の恩恵で、一般人もセミナーでプログラミング講師のダベりを数百円で見れるようになっただけで泣いて喜ぶべき。
そしてあれは、将来の顧客とプログラマの入り口としてやってるの。1000人に1人、将来IT業界に貢献する人材がいるかもしれないと信じて。
意味不明なものが多いし何かとケチつけないと気がすまない性格だから面倒なことを一々と
直接のユーザからの意見なら多少は変でもそのユーザが必要としてるなら納得できるし、イライラすることもない
社内でそんなことこだわったところで実際には気にされないことが多いのにだ
まだデザイナーがデザインについてこうした方がUXがいいねみたいなことをいうならわかる
専門の人の意見だし
そうでもないのに何かと文句をつけてくる
CSS すらまともに使いこなせずマージンもパディングもないような酷い作りのものしか作らないのにソッチのほうが良いという
色は red, green, yellow と標準のペイントのデフォルトカラーかよというような色を指定してくる
#fcfcfc や #0a0a0a なんて使おうものなら白と黒にしろと
max-width を指定せずに画面の端から端まであるようなものがいいという
今の時代のアプリやサービスを全く見てないのか？としか言えないようなセンスだ
自社サービスなんて手を出したらこれは酷いと話題になりそうなものだ
見た目にあまりこだわれない社内用サービスしか作ってないからと言って、その他サービスをみてる人からすれば明らかに
しかもデザインに限ったことではないがまだ序盤の時点で言っておけばいいものの完成後にいまから変えるなんて難しいのが
わかりきってるようなときになってからああしろこうしろ言い出す
先に書いたようにユーザの要望ならまだ仕方ないと言えるがなぜこんな無意味なことに付き合わなければならないのか
わりと自分が完璧主義なところもあるので作るならちゃんと作ろうとしてるんだが
こういうのを相手にしないといけないせいで結局グチャグチャになってくる
色のバランスやレイアウトを考えたところで一瞬でそのバランスが無意味になるようなことになる
プログラム側だって全然関係ないものを無理やり入れ込まないといけないようなことになることも多い
疎結合だとかグローバルをつかわないとかそういう作りやすくするためのことをしていても
それが維持できないような無茶で無意味な指示が出る
根本的に変えたり対処するためのものを作るとかすればなんとかできなくはない
過去のプロジェクトでもそういうのが多いから自分で作るのくらいは扱いやすくしたいと考えていたのだが
過去に言われたものだと速度を優先だとか言って自分で作ったものよりは遅くするなと言う
しかしながら関数は使わずコピペだわforeachなどは使わずループ変数を使って地道にやるなどメンテナンスが
できる気がしないが速度においては早いと言えるものだ
当たり前のようにグローバル変数がいっぱいあるしライブラリの使用箇所はカスタマイズするための仕組みがあるのに
便利で読みやすいような書き方だと速度的にはそれに劣る
だがわざわざそんな扱いづらいし見づらいコードは書きたくない
そんなに速度にこだわるなら勝手に一人で機械語でも書いてろよって思う
どちらか取捨選択すべきものなのに両方みたせとか無理なことを言う
ちなみに便利なライブラリは基本無駄が多い遅いものだからライブラリ頼みのベンダはクソだとか
能力がないだとか言っていた
そういえば昔先輩社員と仕事したときには変に凝ったものとか必要以上に作り込んだりはしないほうがいいとか
言っていてそれなりに手抜きでさらっと一応は動くようなものを作っていた
私はそういうやり方が嫌いだったのだが今ではこういう環境に長くいた結果仕事のものにこだわって作り込んでも無駄
ということがわかってそうなったのかなと感じた
自分でもサビ残や休日に無償出勤してまでいいものにしようと努力はしていたが謎の指摘に合わせていると
愛着もなくなってきたし後は適当に済ませてしまおうかなという気持ちだ
ちゃんとした自分なりの完璧なものを作ろうとするなら仕事ではなく趣味で作ってるツールやライブラリで
やればいいかと思う
作ったもの次第でユーザが集まる自社のウェブサービスやパッケージの商品やゲームなどは作り込む方が
良いと思うが先に値段が決まって受注して作るようなものだと最低限の要望さえ満たしていればあとは
どうでもいい
むしろ不便な方が改修依頼が来て稼げる
さらには綺麗で完璧な作りで大抵の想定できる改修は１日とかからないようなものに仕上げるよりも
どこ変えればいいかや影響範囲すらわからないくらいモノのほうが実作業時間が多いのでそれだけ請求できる
先に作り込むメリットがない
ストレスが溜まってきたので発散がてら書いてみたけど疲れてるのかわりと分かりづらい文章になった
けどまぁいいか
そろそろ転職でもしたいなーと考え始めた
http://d.hatena.ne.jp/megascus/20180726/1532557216
----
空リプで文句言う人がいて悲しいらしいが、直接リプライで文句言う人はブロックされたみたい(https://twitter.com/neuecc/status/1022474784569876481)(https://twitter.com/megascus/status/1022431727979913217)なんで、増田で書くわ。
@megascusがMSの自動翻訳がおかしい問題をツイッター経由で知って、軽い気持ちでフィードバックしようとしたのが6月。
https://twitter.com/megascus/status/1009298346064822273
(彼はJavaプログラマーなので、.NETのフレームワークデザインガイドラインにはモチベーションがないはずなので、たぶん気まぐれからの善意)
そしたら自動でGitHubのレポジトリにissueが立つという予想しない仕掛けだったので、一週間後に気づいてちょっと驚く。
https://twitter.com/megascus/status/1011826869413470209
どうやら、初めにMicrosoft Docsが始まった2016年の時点では、フィードバックコメントはGitHubと連動なんてしていなかったらしい。
https://docs.microsoft.com/en-us/teamblog/introducing-docs-microsoft-com
それが、2018年2月にシステムが変わってGitHubと連動するようになっている。
https://docs.microsoft.com/en-us/teamblog/a-new-feedback-system-is-coming-to-docs
でもそんなのMS寄りの人しか知らなくて当然だし、日本語ページからのフィードバックの流れの中で全然説明されていないので、@megascusが驚くのも当然だし、UXは改善されるべき。
(彼はフィードバックコメントの一週間前にMicrosoft DocsについてのQiitaの投稿を読んで「こういうのって普通なのでは。」と言ってた https://twitter.com/megascus/status/1006760629494042626 ようだが、Qiitaの記事のフローとは異なるので、GitHub管理されてるとはまったく思わなかったんだろう。)
それよりも、割と前から、MSDNやMicrosoft Docsの日本語文書がクオリティひくい機械翻訳ベースになって、フィードバック（コメントもissueもPRも）対応にも日本語ネイティブの人がほぼ関わってなさそうな残念な感じできてるっぽいのだけど、それもたぶんMS製品に興味ない人には関係ない話だな。
@kiyokuraはそのあたりのことをわかってるMS寄りの人なのか、issueに英語でコメント。@kiyokuraのコメントは元のフィードバックとはちょっと違う話をしているが、それより@megascusはいきなり英語で割り込まれたからまた驚いたかもしれない。
で、7/24に「マイクロソフトのスタイルガイドラインに従わない」というよくわからない不当な理由でクローズ。@megascusにも@kiyokuraにも何の問題もないにもかかわらず。@megascusのコメントをちゃんと読まずに@kiyokuraのコメントだけを読んだのか(日本語がわからないならわかるやつに聞くことをしなかったのか)はわからんが、とにかくMSの対応はひどい。
こういうブコメがあった。
バカロレアの哲学問題に比べれば、日本は青少年を子供扱い。 - ko2inte8cuのコメント / はてなブックマーク
フランス（って書いてないけど、「バカロレアの哲学問題」って言ってるから、それが毎年話題になるフランスのことだと思う）の文系バカロレア「bac-L」は、「誰でも受かる」ことで有名です。確かに問題そのものは難しいかも知れないが、採点基準はとても甘いのでしょう。そう言う意味では確かに大人なのかも知れないけどね。比較に出すのはどうかなぁ。
フランスから帰国後しばらく経つ私であるが、久々に調べてみよ、と思った。
今年のbac-L哲学問題は以下の通りだったようです。翻訳は私訳です。ますだにフランス語が堪能な人がいるとは思うけどそんなに多くはないとは思うけど、ファクトとの対照という意味で、原文併記しておきます。
（参照：BAC 2018 SÉRIE L SUJET ET CORRIGÉ PHILOSOPHIE）
Souvent nous ne savons pas ce que nous souhaitons ou ce que nous craignons. Nous pouvons caresser un souhait pendant des années entières, sans nous l’avouer, sans même en prendre clairement conscience; c’est que l’intellect n’en doit rien savoir, c’est qu’une révélation nous sembledangereuse pour notre amour-propre, pour la bonne opinion que nous tenons à avoir de nous-mêmes; mais quand ce souhait vient à se réaliser, notre propre joie nous apprend, non sans nous causer une certaine confusion, que nous appelions cet événement de tous nos vœux; tel est le cas de la mort d’un procheparentdont nous héritons.
Et quantà ce que nous craignons, nous ne le savons souvent pas, parceque nous n’avons pas le courage d’en prendre clairement conscience. Souvent même nous nous trompons entièrement sur le motif véritable de notre action ou de notre abstention, jusqu’à ce qu’un hasard nous dévoile le mystère. Nous apprenons alors que nous nous étions mépris sur le motif véritable, que nous n’osions pas nous l’avouer, parcequ’il ne répondait nullement à la bonne opinion que nous avons de nous-mêmes. Ainsi, nous nous abstenons d’une certaine action, pour des raisons purement morales à notre avis;mais après coup nous apprenons que la peur seule nous retenait, puisque, une fois tout danger disparu, nous commettons cette action.
SCHOPENHAUER, Le monde comme volontéet comme représentation,1818.
3問目は長くて訳すの大変なのでご容赦ください。ショーペンハウエルみたいです。日本のセンター試験でショーペンハウエルの文章そのものが出るか、と言うと、出ることもあるかも知れませんが、まあ出ても4択問題だと思うので、確かに問題は難しいですね。
さて、確かにある意味難しい、難しいが、しかしこの試験は誰でも受かる。つまり、ちょっとウケ狙いなところがあることが否めません。多分これは「太陽は西から昇るか東から昇るか」と言う試験にしたとしても、おそらく受験者の点数分布は変わらないと考えられます。どうせ誰でも受かると言う状況下にある場合、問題文そのものの難易度に意味があるのかどうか不定になる、と言うある意味哲学的問いかけなのかも知れん。。。
いずれにせよそう言う試験な訳で、フランス人は誰もがこう言うレベルにある、と言うのはちょっと。そうは思えません。比較に出すのはちょっと間違いだと思います。
ところでフランスではバカロレアがセンター試験みたいなもので、一般の大学はこれ以外に試験はありません。しかし一部のエリート希望の人は、準備学級を2年こなした上で、グランゼコールを受験します。グランゼコールの哲学は、本気で解くことを要求されます。こう言うとき、問題の難易度について論じる意味が出てくるのだと考えれます。
グランゼコールの一つ、高等師範学校の2015年の入学試験は「説明せよ（Expliquer）」。この一問だけで、試験時間は6時間だったとのこと。
まあ、なんと言うか、ここまでくるとねぇ。
都市銀行の口座に「預け入れ」がしたいが、周りに地銀かコンビニしかない
↓
使いたい都市銀行直営のATM以外だと、「預け入れ」だけ出来ないケースが多い
（振り込みも出来ないケースがあるけど、それは今は関係無い）
↓
「コンビニよりは地銀の方がなんか預け入れ対応してそう」と判断
↓
↓
↓
弾かれない（多くのATMは、取り扱えない取引はこの時点で弾かれる）
↓
入金口が開いたのでお金を入れる
↓
↓
「お取り扱いできません。エラーコード：×××」という紙が一枚出てくる
↓
「お取り扱いできませんって言われるんですけど、このエラーコードは何ですか。もしや他行には入金できませんか？」と窓口に問い合わせる
↓
「できるはずなんですけどー」と言いながら、窓口のお姉さんがエラーコード対応表を持ってくる
↓
↓
↓
「実際にやってみてください」ってもう一回全部の手順をやらされる
↓
できない
↓
別の人が出てくる
↓
ここでやっと「他行への預け入れは出来ないんですよ～」と言われる
「他行への預け入れはできないんですよ～」を伝えられるタイミング、ここよりもっと前にいっぱいあったよな？？？？？
カード入れた時点でATMが「このカードではお預け入れできませーん」って言ってくれれば、その後の30分に及ぶ個人による再試行＆窓口問い合わせ＆窓口のお姉さんの混乱＆お姉さんとの再試行は不要だっただろ？？？？？？
取引控えに謎のエラーコードじゃなくて「このカードではお預け入れできませーん」って書いてくれれば以下略、エラーコード対応表に「×××：預け入れ取引対応外の銀行への預け入れ」とか誰が読んでもわかりやすく書いといてくれれば以下略。
どれ直すにしてもシステム総取っ替えですごい額が、ってことなんでしょうか。エラーコード対応表くらいはすぐ直せる気もしますが難しいんですかね。
