jQueryと戦ってました！
こんにちは。しゅーのーです。
ここ数日はjQueryと戦ってました。
スクロールでアニメーションの話
目標は「Appleの商品紹介ページみたいに、スクロールすると要素がアニメーションして出てくる」というのを作りたかったのですが、JavaScriptからだと難しそうでした。
そんなわけで、まずはjQueryの力を借りてやってみようと思い立ったわけです。
前回は「Bootstrap→自力で」という流れをやってみたので、今回も「jQuery→自力で」にしてみた、そんな感じの軽い感じでした。
最終的にできたのはこちらになります。
https://shuno-web.github.io/scrolltest/
内容としては、「空、山、森、海」の写真を載せて、それぞれの写真の下に説明を加えて、スクロールすると説明が下からふわっと出てくる、そんなものです。
写真はフリー素材で、説明はWIkipediaから拝借してきました。
jQueryの部分は結局自力ではわからなかったので、以下のサイトを参考にして作りました。
色々探してみましたが、一番分かりやすかったです。
中身の内容は理解できたので、とりあえず自分の中では「OK」って感じです。
課題あり難あり
とりあえずそれっぽくなったと思います。
「そもそもjQueryってどういうことができるの？」っていうことから始まったので、時間がかかりました。
便利ですね、jQuery。勉強してて面白かったです。
それはそうと、今回できあがったものには以下の課題が残っています。
・スマホ対応してない
・最後の部分はアニメーションを放棄した（下に要素がないから）
パソコンは画面が横長なのでよかったのですが、スマホだと縦長なので、挙動がすごいことになっています。
ためしにChromeのディベロッパーツールでiPhoneとかにしてみると、ぼくが言ってることがなんとなく分かるかと思います。
なんか別の方法で画面の高さとか、スクロールの量とかを取得していかないといけないのかもしれないですね。
最後の方でアニメーションを放棄したのは、「表示させたい要素より下に行けないと、アニメーションしてくれない」ということが原因です。
実際には最後の方までアニメーションさせる必要はないかなと思うので、とりあえずこのままにしました。
これから何しようかな
これから何をしようかな、と思っているところなんですが、ひとまずHTML周辺は置いといて、またアプリケーション寄りなことをしようかと思ってます。
PHPのことを忘れつつあるので、同じような言語のRubyを勉強してみようかなーと考えています。
HTMLもまだグリッドデザインとかやってみたいんですけどね。
今日はこんな感じです。ではー。
JavaScriptとかレスポンシブとか
こんにちは。しゅーのーです。
ここ最近は、インプットしながらアウトプットしたりで、若干ブログの更新が途絶えています。
というわけで、近況を書いてみようと思います。
ボールのプログラムは挫折しました
スタートボタンを押すと、指定した個数のボールを画面上に表示するっていうプログラムをJavaScriptで書いてましたが、うまくいきませんでした。
結果として、スタートボタンを押すとボールが移動するだけのものになりました。
こちらになります。
https://shuno-web.github.io/balls/
ボールはdiv要素で作っていて、試しに移動させてみて、これをループ処理すればいいのかなと思ってました。
ですが、なぜかid属性じゃなくてclass属性にした途端にうまく動かなくなったりしてます。
あとはHTML上のstyle属性で位置を指定したいのですが、新しいdiv要素にstyleがつかなかったり。
setAttribute()とかappendChild()とかいじくり回したんですが、どうもダメでした。
もう少し詳しくなってから再チャレンジしてみようと思います。
レスポンシブサイトのサンプルを作りました
dotinstallに「Bootstrap4入門」というものがあります。
これをやってみて便利すぎて感動してました。
ただ、先日チャレンジした256timesの参加者のみなさんは「Bootstrapを使わない」でサイトを作ることになっているらしいので（今のところ）、ぼくもトライしてみることにしました。
できあがったのがこちらになります。
https://shuno-web.github.io/oyasai/
外観は適当に作ったので適当にみてください。
スマホ表示のときと、PC表示のときで一応デザインが変わるようになりました。
すごく大変でしたけど、学んだことも多かったですね。
何度もやり直しました。
形になったのでよかったなと思います。
なぜか中央揃えにならなかったりで心が折れかけました。
今日はこんな感じで。ではー。
給料計算機なるものを作った話
こんにちは。しゅーのーです。
年明けから20日も経たないうちから人生の転機にさしかかろうとしています。
まぁそれはそのうち、転機が終わってからブログにでも書いていこうかと思います。
とりあえずタイトルの件を。
「給料計算機」を作りました。
作ってて怖くなりましたが、着手してしまったので、とりあえず形にしました。
日本の闇が垣間見える「給料計算機」というものを作ってみました。https://t.co/UmK8sa1vVA
— 30歳からWebエンジニア転職を目指す (@jobchangeit1) January 19, 2019
時給、月給、年収のどれかに数値を入れると、他を適当に計算してくれます。
次は計算機じみたものじゃないものを作りたい。#電卓でやれ #JavaScript
時給、月給、年収のどれかを入力すると、その他を適当に計算してくれます。
今回もJavaScriptで書いてみました。
こちらからどうぞ。
https://shuno-web.github.io/salary-calc/
問題点は次のとおり。
・全角入力を半角入力にできない
・3桁区切りの , がないので見づらいことこの上ない
技術的にはこんなところ。UXの向上とかどこ行ったんだろう。
あとはこんな不用意にテキストボックスをドカーンって置いて、なんかヤバイことが起こらないかが心配です。
ほら、phpだとサニタイズとかあるじゃないですか。htmlspecialcharsってやつ。
あ、サーバーが絡んでなければ平気なんですか、もしかして（あとで調べます）。
あと社会的に問題がありますよね。
そもそもフルタイム勤務のことしか考えてない、と見せかけてボーナスとか考えられてない。
ハードモードまっしぐらの給料計算機が生まれてしまいました。
でも時給とか気にしてたら、きっといいことないですよ。
そんな思いも込められています。後付けです。
「タイムセール計算機」を改良しました
前回公開した「タイムセール計算機」は試行錯誤の上、バージョンアップしました。
改善点は
・見た目がやや整理された（枠とか）
・計算ボタンが１つ減った（結果だけを知るなら１個でよかった）
・リセットボタンが追加された
・Math.floor()が動いた（むしろ何で機能しなかったのか不明）
くらいです。一番最後に書いたやつが一番でかい気がする。
こちらからどうぞ。
https://shuno-web.github.io/timesale-calc/
なんかもう少し簡単にアクセスできたら、結構使えると思うんですよね。
イオンの服売り場で「換算表」みたいなのが下がっているの見たりしますし。
「今日は60％OFFです。〇〇〇円⇨△△△円」っていうやつ。
知りません？目の錯覚？まぁいいや。
計算機だけではなく
なんだかんだでphpもかじり、JavaScriptもかじったわけなので、次は計算機っぽくないものを作りたいと思ってます。
上の２つって、電卓たたけば解決しちゃう問題じゃないですか。
そうじゃなくて、「あっちとこっちのデータのやりとり」があって「これです！」っていう何かを作りたいですね。
アイデアはないんですけど。またそのうち沸いてくるんじゃないかと思います。
今現在はtwitterでも書きましたが、ボタンを押すとブラウザ上に◯がボボボッと登場するコードをJavaScriptで作ってます。
進捗状況はあまりよくないですね。
◯をdivで作ってるんですけど、読点（。）にしちゃえば、実はすぐかもしれないです。
もう少しいじってみます。出来たらまた資材置き場に。
今日はここまで。ではー。
タイムセール計算機とか最近のプログラミング勉強事情とか
こんにちは。しゅーのーです。
ここしばらくブログの更新をしていませんでした。
プログラミングの勉強はしていたので、近況を書いてみます。
「タイムセール計算機」というものを作りました。
JavaScriptを利用して、「タイムセール計算機」というものを作成しました。
よくイオンとかに行くと「タイムセーム中でーす。割引からさらに何％オフでーす」って言うのを聞きますよね。
「で、結局いくらなの？」と思うことがあったので、「簡単な計算だし、プログラミングで作れそう！」と作成に着手しました。
Githubに上げてみました。
https://shuno-web.github.io/timesale-calc/index.html
ただ、今現在、問題がありまくりのプログラムです。
・UIがダメ。ボタンとか揃ってない。
・小数点以下の切り捨てができてない。
・何も入力しなくても計算ボタンを押すと動いちゃう
などなど。
金額のところに切りのいい数字を入れると、ちゃんと動いてるように見えるんですけど、適当な数値にするともうダメですね。
学生の課題だったら、問答無用で赤点になっちゃう気がします。
問題点はちょっとずつ解決します
UIについては、「とりあえず計算部分ができてからじゃー！」ということで、ある程度の要素がそろったのでOKにしてました。
ちょっと形式を整えていこうと思います。同じようなプログラムが意外といっぱい転がってたので、真似していこうかな。
小数点以下の切り捨てについては多分、Math.floor()を使えばできる”はず”なんですけど、導入するとなぜか計算結果がもれなく「０」になるという自体に陥っています。
このへん、ググって解決しようと思います。
とりあえず使えるものになるまで手を加えていこうと思います。
（ところで、GithubでのWebページの方法、これであってます？）
dotinstallの256timesにチャレンジした話
少しさかのぼって、dotinstall主催のプログラミングスクール、「256times」に参加するために年始から事前課題にチャレンジしていました。
最終的に参加できるのは10名程度のところに、400名くらいの応募があったとのことで、超激戦だったみたいですね。
ぼくは７日目で脱落してしまいましたが、次回またチャレンジしてみようと考えています。
今日はこのくらいで。ではー。
一進一退
こんにちは。しゅーのーです。
やはり休日となると勉強をする時間を確保できないのが、最近の悩みです。
ひとまず最近の進捗状況と、今日からの予定を書いていこうと思います。
phpは一旦終了
phpの参考書はひとまず２周しました。
これでとりあえずphpの基本的な動作と、MySQLとの連携の仕方がわかりました。
これからWebサービスを作っていく上では、とりあえずphpを主にしていこうと思います。
php勉強の副産物
phpの勉強をしたので、「WordPress」が扱える日が来るかもしれません。
実際にWordPressに着手するのは、まだ先になるかとは思いますが、できることが増えたことは嬉しいです。
とりあえずは「dotinstall」で入門編が公開されているので、そちらを見てみようと思います。
HTMLとCSSとBootstrap
時間がなかなか取れない中、昨日（日曜日）の隙間時間から、「dotinstall」で「HTML基礎文法入門」を見始めました。
前見ていた「HTML入門」よりも、詳しく解説されているので、もう少しいろいろなことができるようになりそうです。
phpの勉強のときにHTMLを書いたりをしていたので、理解はスムーズでした。
今日からは「CSS基礎文法入門」を見ています。
こちらは、これから使っていくであろう内容が盛り盛りなので、しっかり見ていこうと思います。
デザインはそのままユーザーのサービス満足度につながっていきますからね。
それが終わったら「Bootstrap入門」というのを見ていこうと思います。
まだ見ていないのでなんとも言えませんが、サイトのレスポンシブ化にも対応できるみたいですね。
dotinstallの動画は１本あたり約３分なので、今週中には、見終わる予定です。
それからは、いろいろなサイトの真似をしてHTMLに慣れていこうと思います。
絵も模写から、作曲も耳コピから始まる、という話を聞いたことがあるので、まずはどんどん真似していって型を身につけます。
何かおすすめのサイトがあったら教えてくださいね。
今日はここまで。ではー。
ひとこと掲示板２回目と寝落ち
こんにちは。しゅーのーです。
昨日は勉強しようと思いながら、寒かったので布団に入ってしまって、そのまま寝落ちしてしまいました。
今日は反省を生かして、布団には入らずにいました。なんとか成功しました。
勉強の参考書はこちら。
ひとこと掲示板作成中
復習ということもあって、早く終わるかなと踏んでいたんですが、なかなか終わりません。
今日で「ひとこと」を投稿する部分を作り終えたので、あとは細かい機能を追加していくだけです。
返信、削除、それからログアウトですね。
おそらく明日で終わるのではないかと思います。
それが終わったら
早いとは思うんですが、少しずつ実践な内容というか、何か作ってみようと思います。
そんなに難しいものを作ろうという考えはありません。
今のところ「それ、紙に書けばいいんじゃね？」っていうようなアプリ案しかないので
、そんな小さいところから始めようかと思っています。
公開するには
作ったからには、誰かに見てもらわないと、フィードバックができません。
しかし、そのためにはレンタルサーバーを借りないといけません。
つまりお金がかかります。
ドメインとかにこだわらなければ、そんなにしないとは思いますが、公開の仕方とかも勉強していかないといけないですね。
まずはひな形づくりか
今のところ、デザインの力は全くないに等しいのですが、人に見てもらう以上、体裁を整える必要があります。
とりあえずHTMLとCSSで共通のデザインを作っていこうと思います。
頭の中でふわふわしていましたが、今後の予定が固まりそうですね。
・ひな形つくり（HTMLとCSS）
・レンタルサーバーを借りる契約をする
・できたものを順次アップしていく
こんな順番でしょうか。
果たしてどれだけ時間がかかるのやら。
年末年始のお休みの時に、ワーッとできたらいいなと思っています。
あくまで希望ですが（何故か休みの日の方が忙しいのです）。
今日はここまで。ではー。
ログインの仕組みを理解する
こんにちは。しゅーのーです。
土日に勉強するつもり満々だったのですが、家庭の事情により、なぜか土日の方が勉強時間が取れないという事態になりました。
今日からまた勉強再開です。参考書はこちら。
ログインの仕組みを理解する
とりあえずHTMLでのマークアップは、隙間時間に終わらせてあるので、php部分をじっくり勉強することができました。
今回はログインの仕組みについてです。
流れとしては、
・セッションを開始
・入力された情報をSQLに探しにいく
・上記が一致したら、ログインより先に進む
・チェックボックスにチェックが入ったらログイン情報をクッキーに保存する
今日はこれくらいのことをしました。
段々MySQLの使い方に慣れてきたような気がしてきました。
転職活動について
twitterで転職についていろいろ呟いていました。
年収がごっそり減るけど、アルバイトからIT業界に飛び込むのもありかな、と思い始めました。
— 30歳からWebエンジニア転職を目指す (@jobchangeit1) 2018年12月8日
1日6時間（仮）×365日（1年）で、余裕で1000時間を超えるので、そこから次のステップに移れるのではないかと。 #プログラミング #転職
今見た限り、出されている求人は「未経験お断り」なところばかりです。
そんなわけで、とりあえずなんでもいいから飛び込んで見ようと思ってみたわけです。
ですが・・・。
転職のためのセーフティネットを設置してたんだけど、うまく機能しませんでした。
— 30歳からWebエンジニア転職を目指す (@jobchangeit1) 2018年12月9日
このままだと目指している転職が危ういです。
次の安全策を作らないと、、、。#プログラミング #転職 #エンジニア
今更ですが、３０歳ということもあり、ぼくにも家庭があります。
ここでいうセーフティネットは「共働き」を指します。
少し前から配偶者が「正社員化」に乗り出したため、ぼくはそれが完了した段階で、バイトなり転職なりに移行するつもりでした。
しかし、ちょっとあてが外れてしまいました。配偶者の正社員化、まだ先になりそうです。
これが完了しないままに、ぼくが転職をすると、路頭に迷う可能性があります。
年収がごっそり減ってしまう未来が見えているからです。
というわけで、今すぐに転職というのは難しくなりました。悔しい。
とはいえ、やっぱりノースキルは怖いことこの上ないので、このまま勉強は継続していくつもりです。
その間に市場は変化してしまうかと思いますが、プログラミング的な思考というのは不変なのではないかと思うので。
今日はこのへんで。ではー。
