日々記憶伍番地

ただの日記です。

仕事が出来ないwebデザイナーがJSONをちょっと読んでみた

JSON

 

何しろgoogleである。
jQueryがいいのかjsがいいのかわからなかったので「json 読み込み」とかで検索。一番上にわかりいいサンプルが出る。Qiitaばんざい。

jQueryJSON ファイルを読み込む
https://qiita.com/miiitaka/items/f77cb83b9dfcd05aea82

とりあえず、読み込むだけなら超カンタンじゃん。と空のファイルにサンプルのコードを流し込む。chromeで確認。ずっと白い画面。あれ?F5。白。コンソールを見るとエラーが出ている。クロスオリジンだのなんだの。

仕事が出来ないのでちょっとゴニョゴニョした後、別のサンプルを当たり始める。2こくらいみて、話がそれてきた感があるので、とりあえずエラーの意味を知ろうとエラー文言をコピーしてgoogleに突っ込む。なんとなくわかった。

[*その他*] ChromeにてAjaxでローカルファイルにアクセス
https://qiita.com/cigalecigales/items/33afaa42f91542ffa62e

はあはあ。「それで管理者権限でコマンドプロンプト起動してChromeのパス --allow-file-access-from-filesでいけた。」管理者権限で起動するやり方がわからないので普通の権限でやってみる。やっぱり白い画面。ダメだ。肝心なところをはしょっているからダメだ。

 

f:id:jacklipper:20171105222305j:plain

 

「ローカルサーバを立てるとかめんどくさい」というところからどうもローカルサーバを立てれば行けるくさい。管理者権限で起動を調べるより、昔、XAMPPを入れた記憶があるのでローカルサーバを使うほうが早そう。

localhostを叩く。動かない。XAMPPって起動がいったっけ?とコントロールパネルを立ち上げ、アパッチを動かす。ローカルホストでサンプルを表示。やっぱり白い。
エラーを見るとさっきと様子が違う。ゴニョゴニョした時にローカルのjqueryのパスに書き換えたのを忘れていた。googleから読むと動いた。

ふむふむと、サンプルのソースを読むとどうもjsonはオブジェクトでそれを読み込んで、あとの処理はオブジェクトをいじる感じであった。

chrome起動オプション

でも非同期でいちいちローカルサーバに放り込むのも面倒なのでローカルでも非同期出来ないかぐぐったら出来た。ショートカットのプロパティに謎の文字列を入れたら出来た。

javascriptではどうやる?

http://uxmilk.jp/46993
このサンプルは分かりやすかった。
あんまり意味はわかってないけどサクッと動いた。

そこで普通のjavascriptを勉強する意味はあるのかなー、という疑問にあたり、reactとかangularとか出てきてはぁーとなった。

おやすみなさい。

 

 

終わった、終わった。

この記事読んだ。内容はあんまり覚えてない。中間層が終わってきている的な内容だった気がする。格差、と言ってしまえばそれまでの感じ。

www.byosoku100.com

そして、読んでいるブログの人がこの記事を取り上げていた。

philhardison.hatenablog.com

ザラッと読んだ感じ人によるなー。と思ったが、ドイツと中東の国の人が満足みたいな意見だったことを捉えると、私の頭のなかではやっぱり経済的に豊かな国は基本的に満足度が高いという印象だった。

もしかしたら世界の国レベルでも格差が始まっているのかもしれない。

今の時代は銃で戦争をしないけど、お金で戦争をしているのだ。

その戦争に勝てなければ負け。

更にこの戦争、たちの悪いことに隣人ともしている。会社の同僚ともしている。

それを苦に思わない人ならいいけど、その人は恐らく勝ち組だ。

負け組の私は息苦しい。

 

今の時代、お金抜きでみんな行きていくのは難しいのかな。

結局、あいつはずるいとか、あいつだけ食べすぎてるとか、なんか殺人とかレイプとかあってうまくいかないのかな。

お金の話が中心に来るのは私がお金に苦しんでいるからだろう。

その苦しみから抜けるためにベーシックインカムはまじでいいと思うんだけど、そんなによくないのかな。お金の価値は下がる気がするんだけど。

 

ちなみに終わったという言葉の意味を考えた感じ。終わった。詰んだ。
でも実際、終わらないよね。世界。

 

寝よう。

 

画像はiPhoneにあった美人さんの画像。モデルの人だったような気がするけど名前忘れた。

f:id:jacklipper:20171102230351j:image

JSONってなんだろう

ここしばらく疑問に思っていた。JavaScriptで別ファイルにデータを持たす技かなー、くらいに思っていてなんとなく避けていた。

 

開発チームにJSONにミスがあるから制作会社に問い合わせてくれといわれ、何もわからないまま制作会社にJSONにミスがあるみたいだからみてもらえますか、と連絡し、どこらへんが、と言われても言葉を濁し、とりあえず、確認してもらい、制作会社のここがこう間違っていました。みたいな返答もなにひとつ理解しないまま、開発チームになおしてもらったので確認してもらえますか、と言っていた。ひどい話だが、生粋のデザイナーの私をPM的なポジションにいきなりぶち込むのもひどい話だ。

 

私はそんなことを繰り返していたので、上長に出世しないコースに放り込まれ、お前は運用を細々やっとれと今の地位に至る。

 

これは今後理解しなければならないもののような気がしてJSONとは的なホームページを読んだがいまいちピンとこない。

 

そしてこのページでバチコン理解した。

「分かりそう」で「分からない」でも「分かった」気になれるIT用語辞典

http://wa3.i-3-i.info/word13798.html

 

ここは前にトランザクションの時もお世話になった。素晴らしいサイトだ。

 

JSONはファイルの種類だ。xmlとかちょっと違うかもだけどcsvとかと似たとらえ方でよいみたいだ。

 

今後、勉強すべきことはjsでどうJSONのデータを取り込み、取得するか、どういった場面で有効か、ということになる。

 

f:id:jacklipper:20171028225958j:plain

最近

選挙

自民圧勝。なぜ希望の党が惨敗か、みたいな考察記事でも描こうかと思ったけど、あんまり知識ないからやめた。

軽減税率にいい加減しろや!と思ってたら自民党がするらしい。昨日知った。それくらいの知識。

 

浸水

台風で浸水した。ヤフーニュースにもなってたのを妻が見つけてた。仕事暇なのかなと思った。

f:id:jacklipper:20171024203037j:image

 

f:id:jacklipper:20171024203054j:image

 

やばかった。

 

妻が泣いた

2日連続で妻が泣いた。またふたりめの赤ちゃんの話だろうか、セックスレスの話だろうかとひやひやしていたが、訳を話してくれると人に嫌われるかもしれないという恐怖があるそうだ。わたしも心療内科に通っているので、いったらいいんじゃないかと勧める。

 

友達

あんまり返事がこない。人望がないから仕方ない。

 

えなこ

かわいい。最近は中条あやみが美人に思えてきた。タンブラーとかツイッターで見つけたセクシー画像をほかのsnsに放流したいがためにフォトライブラリーがセクシー画像で埋まり始めている。

f:id:jacklipper:20171024203722j:image

 

 

娘の753の写真に老害の片鱗を見た

この間、娘の七五三の写真を前撮りしたんですよ。前撮りというのは実際神社で撮るのは着物で神社に行くのが大変だし、天気に左右されるし、着物の写真はスタジオで別日で撮るのがなんか今の「普通」みたいなのです。妻に任せましたが、結構贅沢な選択だと思います。本末転倒感も若干あります。でも、娘の写真をきれいに撮ってもらうのはいいことだと思い、納得していたのです。

 

実際、撮ってもらった写真は綺麗で娘がそれはそれはかわゆーくうつってました。スタッフの人の対応も良いうえに、子供のいい表情を引き出そうとがんばってくれます。スタジオも工夫を凝らしてあって素晴らしかったのです。

 

撮ってもらったのはライフスタジオというところです。そこに作品例みたいなのがあるんですが、この写真どう思います?

https://www.lifestudio.jp/data_up/www/board_atch/201608/140009/o_1ar4tob2g2vl1dfbelr1oo77kua.JPG

可愛くない?

 

 https://www.lifestudio.jp/data_up/www/board_atch/201607/139180/o_1an7ca4cp1sc937o1tm4c3c1jo1a.jpg

葉っぱをエフェクトっぽく使って柔らかい印象を与えてよくない?

 

娘の写真もふんだんにこんなテクニックを使って可愛く撮られてたわけですよ。これは、娘大好きな義理の父母も喜ぶだろうと後日見せると、反応は全く逆。

 

「頭が切れてる!これはプロが撮ったの?下手だなあ」

 

頭が切れてるという理由で全否定なのですよ。義理母に至っては私はセンスないけど義理父は結構構図とるのうまいのよなんて言い出す始末ですよ。ふたりともズブズブの素人です。ハイ。

 

視野が狭いというか、固定観念を外せないんでしょうね。どんなにいい写真でも頭が切れてたらダメなんです。彼らの中では。

 

しかし、これは結構あるあるみたいで頭が切れてたらダメという観念は根強くあるみたいで、ネットで見てみるとそれで揉める例も結構見ました。

 

頭が切れてたら悪い訳ねえだろドアホが!!!!!!

 

 しかし、そんな個人的な感想は一回、置いといて、一応、できないデザイナーなりに商売としての感覚は理解しているのです。例えばマスに訴えるのであれば、このじいばあのような感覚を持った人を納得させないといけないわけで、おそらく、おそらくですけどスタジオアリスなんかは頭を切らないと思うのです。ターゲットによるのですが、そんなデータは間違いなく持ってるはずなので。それでジイバア含めた家族が全員かわいいねーという写真を作るのです。構図がどうのというより、衣装がかわいいかとか子供表情はいいかとかしか見てないと思います。

 

私も昔、紙のデザイナーのころ、銀行のチラシを作るときにイラストを頼まれ、テイストにあっていようがいまいが見る角度がどうのとかどうでもいいからとにかく手の指はきっちり5本書いてくれ、と言われたのを思い出します。やくざにみられるから、という理由ときかされ、そんなこともあるんだ。と深くは考えませんでしたが、イラストはxxxxをパクった主婦で、やくざもなにもないだろう、ともおもいますし、ミッキーは指4本だしな、と思います。しかし、クレームやトラブルを避けるためには不自然でも指を5本書くのがベターなのです。

 

今はそんなことはない(と信じたい)と思いますが、古臭い風習だよなーと思います。

 

好き嫌いといえばそこまでなのですが、「頭が切れている」という理由で他は見ずに全否定してしまう姿勢が違和感がありすぎなのです。頭が切れていたらよくない写真である理由を論理的に説明せよ、というとできないのです。偏見に近くないですか。あいつは部落出身だからだめだ、というような理不尽な理由に感じてならないのです。

 

そんなことを思った七五三の写真でした。

 

後日、兄にこんな愚痴った感じのメールをしたら老害はいいすぎやなとたしなめられました。 

 

下の写真は有村架純です。私は別段有村架純を好きではないんですが、この写真が姑息でいいなあと思ったので貼りました。ジェラシーを駆り立てる構図ではないですか?

  

f:id:jacklipper:20171001215439j:image

仕事が出来ないwebデザイナーのjquery タブメニューの作り方

仕事が出来ないwebデザイナーjquery タブメニューの作り方

最近、仕事が忙しく残業続きなので、少しでも作業量を稼ぐためにタブメニューの動作だけ作ることにする。

4:12

 

まず、祝日の朝4時に起きる。日中は娘や妻の攻撃が激しく思ったように作業できないため。

PCを立ち上げgoogleに「jquery タブメニュー」と打ち込む。

音がないと寂しいのでserph の el espaerankaをかける。

スマホのゲームをする。

 

ゲームをしつつ待ち時間でファイルの準備をする。今回の案件のjqueryのバージョンを忘れたので、公開されているサイトを見る。/*! jQuery v2.1.3。まあ、タブメニューくらいだし、自作するのであんまりここまで気にしなくてもいい気がするけど。googleから同じバージョンのjqueryを引っ張ってくる。sublime Textが自動でバージョンアップした。

4:33

 

ゲームをしつつ、最初の「jquery タブメニュー」の検索結果をみる。

 

http://5am.jp/jquery/jquery_ui_tabs/

タブメニューってこんなに簡単にできるの?と思いつつ、みるとjquery uiを使っている。見ると今回の案件のサイトにはjquery uiは入っていなかったので却下。

 

http://www.prontonet.mobi/javascript/jquery/tab/

悪くない気がする。一部jsの記述で自分の知識ではわからないところがあるが、HTML、JS、cssをコピーすると動いたのでよしとする。jsはindexOfを理解してないので
if($(this).attr('class').indexOf(tabClass) != -1)
がよくわからない。

 

とりあえずhtmlが全部divで書かれているのがきにいらないのでタブの部分をul、liに変えてCSSセレクタごとに一行で書かれていてみにくいので改行をいれて、ちゃんと見えるようにCSSをちょぼちょぼいじり、タブの下に要素が入っても崩れないか見て落ち着いたので、ブラウザチェックしようと思ったらfirefoxが入ってないのでインストールする。

5:02

 

firefoxを入れながら、IEで見ると8でjsエラーが出る。今回のサイトの要件がIEのバージョンがなに以上か忘れた。とりあえず良しとする。タブの表示要素がfadeinだけど、まあスライドにすれば変わるんじゃないかと思い、ここは検証しても無駄になる可能性もあるのでこのままにする。
ffのダウンロードがおわったので見ると動く。まあ、動くよねー。

 

mac?macねー。スマホ関係は今回レスポンシブでもないのでほっとく。多分レスポンシブでも家でスマホ検証は面倒なのでほっとくと思う。会社でやってダメなら会社でやり直し。

 

タブのデータ一式を会社のメールアドレスに送っておしまい。

5:08

 

 

HTML5 professional level 2 に不合格した

勉強は諦めた。

今日もワンピース読んでた。

おナニーましたし。

ダメだったんです。はい。

 

やけに試験範囲が広い印象です。

なんか、、、いや、、、でもjsの知識だけではどうにもならないところもある気がする。

今度は無駄にならない試験を受けようか。