カテゴリー: プログラミング

こんにちは。現在メーカーでWEBディレクターをしながら、
ウェブカツで学んでいます。オブジェクト指向部でのOPを終えたので、
開発の経緯などを書きます。

【ゲームの名前】
算数ライダー
https://htmlcssjavascript0716.com/sansu_rider/top.html

【ルール】
・算数の問題に答えて、ライダーを倒そう！
99秒の間にできるだけ多く正解しよう。
・3つのボタンから正解だと思うボタンをおしてね。
正解すると、ライダーのHPが減ります。
・ライダーのHPが0になると、次のライダーが出現します。
間違えると、時間が減ります。強いライダーは、たくさんの時間が減ってしまうので注意！！
・すべてのライダーを倒すか、時間が0になるとゲーム終了。
・特別ボーナス！1秒以内に正解を回答すると、時間が減りません。

【対象】
小学生に上がる前のおとこのこ

【気をつけたこと】
大人が付き添わなくても一人でゲームができること
設定が多いと、そばに大人がいないといけないから

【公開前に実際にこども触ってもらって出た意見】
https://twitter.com/T5r9xysvdTHRt8b/status/1213569458993655808
・引き算は難しいからやだ
クラスを継承させて、せっかくメソッドを追加したのですがボツにしました。
機能を増やせばいいってものではないですね。
・30秒は短い　100秒にして
大人がプレイすると長く感じますが、計算の遅いこどもにはちょうどいいみたいです。

【参考にしたゲームなど】
5歳の子どもがいまして、今年の4月から小学生です。
今一番好きなものは仮面ライダー。なにかそれに関連したゲームに
したいと思っていました。

自分自身そこそこゲームは好きです。
子どもといっしょにツムツムをよくやっています。

ツムツムって始めはあまりおもしろくありませんでした。
家族がやっているので、自分もやってみようかな程度。
でもやっているうちにだんだんとハマりました。

流行るゲームは、
・ルールが簡単
・メジャーなキャラクター
・短時間でできる
大事な要素ではないでしょうか。

もう1つ参考にしたゲームがガンバライジング。今時1プレイ100円とって
やるゲームなんですが、うちの子大好きなんですね。
ゲームをすると、１枚カードがもらえます。それから、おもちゃの
２次元バーコードを読ませると、装備ができたりします。

進化しています。本当親としては困ったものです。
でも金とる方も、知恵を絞っているんだなぁと感じます。
自分が子どものころよりも、おもしろい！

【かかった時間、苦労したところ】
だいたい40時間くらいです。一番苦労したのは素材作りです。
こどもからカードを借りて、iPhoneで撮影
そのあと44枚をPhotoshopでゆがみを直して、背景を透明にして、
サイズを軽くして書き出し。半分以上の時間はこの作業に費やしました。

こんにちは。製造業の会社でWEBディレクターをしています。
ウェブカツを始めて、1年と2ヶ月…遅い進行ですが、ようやくWEBサービス部のOPができました。
約80時間。実装したかった機能の2割くらいでしょうか。
みためにも、もっともっとこだわりたかった。でもまずはいったん公開。

・このサービスの目的
工場の設備に使う部品の技術計算をしてくれるコンテンツです。
1つのベンダーの部品だけではなくて、複数のベンダーの部品をまとめて
選定してくれます。

・なぜこのサービスを作ったのか
何かしらのものを作ろうとするとき、部品を選定するという作業が発生します。
製造業の設計者なら必ず経験します。そして選定のさいには、面倒な技術計算が
必要だったりします。
カタログを持参した営業マンから話を聞いていたときは「使えそう」と思っていたけれど、
いざ巻末の技術計算をしてみたら全然使えなかった。

こんなとき私だったら、
「始めに言えよ」って思います。

なんでもそうですけれど、大事なことって取扱説明書のうしろの方に
小さい字で書いてあるんですよね。

・どんな人に使ってもらいたいのか
「FA機器をあつかう営業マン」です。
うちの会社では理系出身の営業マンはいません。当たり前かもしれないですが、
物理とか普通苦手です。それにも関わらず、高学歴理系の設計者に部品を売らないといけないんです。
私は営業は経験ありませんが、すごいことだと思います。
そういった営業マンのツールを目指しています。こういう面倒臭い計算を商談のときに
ぱっとできる営業って一目置かれる　はず

・こんな風に稼げないか
　部品をあつかうベンダーに製品を登録してもらって、1ヶ月１件いくら　みたいな感じ
　入力された値を集計して、ベンダーにマーケティングのデータとして売る

こんにちは。製造業の会社でWEBディレクターをしています。
ウェブカツを始めて1年が経ちました。他の生徒と比べれば、
かなり遅い進捗だとは思います。
勉強時間は合計で372.5h、日数は206日です。

今やっと….
javascript・jQuery部 上級
きました。javascript・jQuery部 上級。
正直今までのレッスンは十分に理解していないですし、
ポートフォリオもまだまだこれからです。
でもここまできました。

Lesson09「bacbone.jsの基本の機能と書き方〜ViewとModelの連携前編〜」
はまりました。さすが上級、いや上級じゃなくても
ずっとはまりっぱなしでしたけれどね。

レッスン動画を見て、コードを写しgulpを使う段階になりました。
javascript・jQuery部 中級でやったこともかなり忘れていて、
npm？、gulp？何が違うんだっけ？というレベルですが、
とりあえずpackage.jsonをディレクトリにコピーしてきて、
ターミナルを起動して、
npm install
うんうん、インストールできた。package.json便利です。そして、
gulp
これで環境構築完了〜となる予定だったのですが
ReferenceError: primordials is not defined

いやいや、レッスンで提供しているpackage.jsonと
gulpfile.jsなんだから、間違ってないでしょ。おかしいでしょ。
レッスンの質問欄を見た所、同じエラーが出ている方がいました。
先輩ありがとう。これで解決。

しかし、そうはいきませんでした。
質問に対する答えは、エラーの原因をおおまかに説明しつつ、
「上級まで来たのですから、自分で解決する努力をしましょう」
本当すみません。いつも楽をして解決しようとしていた自分が恥ずかしいです。
このあたりが他のプログラミングスクールと違うところだと思います。
解決方法を教えるのはきっと簡単だと思いますが、現場ではなんでも質問できるわけではありませんよね。エンジニアに限ったことではないですが、
ググれば分かることを人に聞いていたら「使えない」認定されます。

エラーの原因ですが、node.jsとgulpのバージョンの組み合わせがよくないということのようでした。解決の方針は2つです。

1. gulpのバージョンを上げる
2. node.jsのバージョンを下げる

1は最新のバージョンを使うやり方ですが、gulpfile.jsの書き換えが発生します。
大変な道ではあるのですが、こちらをチャレンジしてみることにしました。

「gulp4 gulp3 書き換え」などで検索をしました。
いろいろな記事がヒットして、それを参考に少しずつコードを修正していきます。
個人的には公式のドキュメント、以下URLあたりがお気に入りです。
https://gulpjs.com/docs/en/api/task
https://gulpjs.com/docs/en/api/watch
https://gulpjs.com/docs/en/api/dest
英語で分かりにくい部分が多いですが、なんといっても公式。
サンプルのコードは絶対に間違っていないという安心感があります。
個人の方の記事は日本語ですが、その方の環境、
その方のgulpfile.jsです。どの部分を参考にしたらよいのか、
公式の書き方と差異があるけれど間違いではないのか。そのあたりに不安を感じました。
間違える要素が少しでもあるものを参照するのは怖いです。

いくつもエラーが出て、エラーが出るたびに検索、修正を繰り返しました。
そして最後に残ったのが、
Received a non-Vinyl object in dest()
destにVinylじゃない形式のオブジェクトで受け取ったよ
という感じでしょうか…

これがなかなか解決しませんでした。
エラーメッセージで検索しても日本語の記事がなく、
英語のQ&Aのようなサイトだけです。
「Vinyl」「dest」このあたりのキーワードでも検索しました。
でも結局分からず。検索結果が、前に訪問したページばかりになってきました。
このあたりでだいたい4時間。Macたたきたくなります。

いったん休んで次の日、ふと想定する原因が間違っているのではと思いました。
今まではgulpのバージョンが上がる、だからgulpfile.jsの更新が必要。
という視野でしか調べていませんでした。なので、見ていたのは完成したサンプルコードがあるページばかりです。

一度訪問した以下URLのページで、気になる記述がありました。
https://github.com/gulpjs/vinyl-fs/issues/288
「vinyl-fs 3 is a major, breaking version.Plugins will need to be updated to use a version of Vinyl that supports isVinyl()」
今回のエラーと直接関係はないのですが、
「プラグインはisVinyl()をサポートしているバージョンにアップデートする必要があるよ」という感じでしょうか。
この一文を見て、
“vinyl-source-stream”: “^1.1.0”
これアップデートしてみるかと思いつきました。
最新バージョンの2.0.0にしたところ、無事bundle.jsに値が入りました。

長かった…途中諦めて質問欄に投稿しようかと思いましたが、なんとか自力で解決できました。エラー解消まではつらかったですが、明確な正解のないところからエラーを解消できたことは大きな自信になりました。
それから解決までに調べたページから
・npmってなに
・gulpってなに
・package.jsonってなに
・gulpfile.jsってなに
のような基本的なことが感覚的に理解できました。
もちろんレッスンでは聞いているのですが、やはり手を動かさないと
身になっていない表面的な知識なんですよね。

最後に修正したコードを載せておきます。今同じレッスンをやっているという方は、
見ない方がよいかもれしれないです。
↓
↓
↓
↓
↓
↓
↓
↓
↓
↓
↓
↓
↓
↓
↓
↓
↓
↓
↓
↓
↓
↓
↓
↓
↓
↓
↓
↓
↓
↓

//gulpfile.js v4書き換え後
   //plug-in
   var { watch, task, src, dest, series } = require('gulp');
   var gulp = require('gulp');
   var browserify = require('browserify');
   var browserSync = require('browser-sync').create();
   var source = require('vinyl-source-stream');
// gulpタスクの作成
   task('build', function(){
     browserify({
       entries: ['src/app.js'] // ビルド元のファイルを指定
     }).bundle()
       .pipe(source('bundle.js')) // 出力ファイル名を指定
       .pipe(dest('dist/')); // 出力ディレクトリを指定
   });
task('browser-sync', function() {
     browserSync.init({
       server: {
         baseDir: "./", // 対象ディレクトリ
         index: "index.html" //indexファイル名
       }
     });
   });
task('bs-reload', function () {
     browserSync.reload();
   });
// Gulpを使ったファイルの監視
   task('default', series('build', 'browser-sync'), function(){
     watch('./src/.js', task('build'));     watch("./.html", task('bs-reload'));
     watch("./dist/*.+(js|css)", task('bs-reload'));
   });

長文読んでいただいてありがとうございました。

こんにちは。
ウェブカツで学びながら、WEBディレクターをしています。

ここのところ、以下レッスンの宿題にかかりきりであまり先に進めませんでした。
Lesson13｜CSS設計〜ディレクトリルールまで決めたFLOCSS〜
宿題は、SASSのファイルをFLOCSSの規約に基づいて書き直すというものです。
今日ようやく形になったので、ブログを書きます。

<1>成果物はこちら
・実際のみため
https://htmlcssjavascript0716.com/01_flocss_exmple/

・SCSSの構成などを見るためのGitHub
https://github.com/khosokawa0716/flocss-example

<2>かかった時間
12時間

<3>学んだこと
・CSSを書き直すには、HTMLファイルのクラスとの紐付けを調査する必要がある
・CSSの正解は分かりづらい。HTMLのクラスと紐付けがなくても、
文法として正しければ成立してしまう。
・SASSでネストするときに、異なる階層に同じクラス名を使わない。
・分割したscssを統合するapp.scssの記述は、上から読み込まれる。
_var.scssを下に記述にするとコンパイルできない。
・jsのプレフィックスは必ず付けておく。
・style.scssからapp.scsslに変更する場合は、package.jsonのscriptの記述も修正する。
・GitHubへのアップロード方法

<4>感じたこと
12時間。まさか宿題に着手する前にこれだけの時間をかけるとは思いませんでした。
始める前は、1時間もかからないだろうとタカをくくっていました。
だってHTMLとCSSですよ。いくらウェブカツの上級コースと言ったって、
一応業務でHTMLとCSSは触っていますからね。
しかもたった１ページでしょ。それに1からコード書くわけではなくて、すでに出来ているのを
直すだけでしょう。完全になめてました。

ファイルを分けるところまでは良かったです。
ブログに記載がある通りに、ファイルを分割していきました。

つまづいたのは、containerの扱いです。まずクラスのままにしておくのか、
Idに変更するのか。まぁ大した問題ではないですよね。どちらからに決めればいいだけです。
ところがもとのコードを見ていると、、、、、
Container-titleが2つあります。containerの直下とcontainer-ornamentの中にも
Container-titleがあります。

この紐付けを確認するのに、かなり時間を使いました。
クラス名なんて、エディタで一括置換すればいいでしょと思っていましたが、
そういうわけにはいきません。スタイルがあたっているところを確認しながら、
一つずつ変更をしました。
それでもいったんコンパイルしてブラウザで確認すると、間違っているところがありました。
SASSの入れ子の構造はとても便利ですが、気をつけないと大きな不具合になりそうです。

個人的な好みですが、id（#{）はcssに使わない方がよいと思いました。
id=contactのところにcssが書かれていなかったので、うっかり消してしまいそうになりました。
Htmlのリンクとして使われていたんでした。

アウトプットが足りなくて、いろいろ調べながら修正したため時間がかかりました。
でもいいんです。こうやって宿題を与えられてアウトプットできたんですから。
GitHubにコードをあげたのも初めてです。

レッスンは進んでいないですが、たくさんの収穫がありました！

最後まで読んでいただいてありがとうございました。
GitHubのコードも読んで、コメントいただけるとうれしいです。↓もう一度PR
https://github.com/khosokawa0716/flocss-example

【不具合現象】
最近順調にレッスンを進めていたのですが、このところ急にphpで作成したファイルが
正常に動かなくなりました。具体的には、以下のような現象です。
・MAMPをインストールして、ローカル環境下でphpファイルを表示させている
・リロードが終わらなくなるのは、DB接続時
・DBに接続しにいかない、たとえばオブジェクト指向部のサンプルコードは
問題なく動作する

【原因と対策】
Google Chromeの予測サービスが原因でした。これを停止させることで、
正常に動作します。以下の記事に手順が記載されています。
https://fukafuka295.jp/googlechrome_yomikomi/
試してみた② Chromeの予測サービスを停止させる

【解決までのプロセス】
この現象から以下の原因を推定しました。
・プログラムは今までと変えていない、かつエラーログも吐かれていないから
問題なし
・PCの環境、特にMAMPがあやしい

そして、「MAMP　リロード　終わらない」などのキーワードで調べたり、
ウェブカツの今までの質問で同様の不具合がないか見ていきました。
しかし、解決せず・・・

php.iniの設定を変更するなどの記事が出て、その通りにしてみましたが無駄でした。
考えてみたら、今までそれで動いていましたものね。

みなさんお分かりになると思いますが、phpファイル動かないと学習進められないです。
しかも何のエラーもなし。
段々と原因調査もおっくうになってきていました。何日も進展なし。

数日休みました。気を取り直して2019/8/18。前日よく寝て、もう一回調査開始です。
とりあえずウェブカツのマイページにアクセスすると、あれ、リロード終わらない。
・・
・・
・・
今までローカル環境だけに発生する不具合が、実際のWEBページでも再現しています。
そうか、MAMPのせいじゃないかもしれない。
Safariでマイページにアクセスすると、正常に動作しています。
これは・・・Chromeのせいなのでは？？
「Chrome　リロード　終わらない」で検索したところ、上記記事がヒットしました。

対策の二つ目を実行したところ無事に動くようになりました。
プログラミング学習されている方が、こんなところで時間を費やさないように
祈っております。

【環境】

Google Chrome is up to dateVersion 76.0.3809.100 (Official Build) (64-bit)

MacBook Pro (15-inch, 2018)
2.9 GHz Intel Core i9
32 GB 2400 MHz DDR4

ソースコードで実際に動くまで約10時間・・・
原因を調べて修正するのは大変でしたが、自分に力が付いてきているなと実感できました。
特に２番目の不具合を発見するのには苦労しましたが、修正後動くようになった時は狂喜しました。一人絶叫したくなりました。

1.年齢の半角数字のエラーメッセージ
対象
webservice_practice05
function.php

事象
年齢を未入力で送信すると、「MSG11：郵便番号の形式が違います」が
表示されました。

原因
Function validNumberを確認したところ、
MSG11が$err_msgに格納されています。

修正前のコード
define(‘MSG11’, ‘郵便番号の形式が違います’);
function validNumber($str, $key){
if(!preg_match(“/^[0-9]+$/”, $str)){
global $err_msg;
$err_msg[$key] = MSG11;
}

修正内容
・新しい定数MSG12を定義
・MSG11からMSG12へ変更

修正後のコード
define(‘MSG12′,’半角の数字のみご利用いただけます’);
function validNumber($str, $key){
if(!preg_match(“/^[0-9]+$/”, $str)){
global $err_msg;
$err_msg[$key] = MSG12;
}

2.不要なはずのバリデーションチェックが走ってしまう
対象
webservice_practice05
profEdit.php

事象
ファイルのコメントに「//DBの情報と入力情報が異なる場合にバリデーションを行う」と
あるにも関わらず、未入力のすべての項目に対してバリデーションチェックが走ってしまう

原因
DBにはNullが格納されている。一方で比較する変数は空文字のため、
型までの厳密な比較をおこなうと「更新された」と判定されてしまう
gettypeでDB値および変数の型を出力させると確認できる

修正前のコード
if($dbFormData[‘username’] !== $username){
validMaxLen($username, ‘username’);}

修正内容
・DB値がnullかつ入力値が空文字の場合には、バリデーションチェックが
走らないようにif文を変更
・上記のケースに該当したことが見えるように、関数debugでログを出力する
・記載しているコードは、usernameですが、tel,zip,addr,ageについても同様です。

修正後のコード
//username,tel,zip
if(empty($dbFormData[‘username’]) && $username===””){
debug(‘usernameはDB値が（nullや0）かつ入力値が空文字のためバリデーション不要’);
}elseif($dbFormData[‘username’] !== $username){
validMaxLen($username, ‘username’);}

まだ完全でないと思われるところ
Emptyは0や0.0を許容してしまうため、意図せずにバリデーションを回避してしまうかもしれない

3.更新した内容がDBに反映されない
対象
webservice_practice05
profEdit.php

事象
php.logには「クエリ成功」と出力されているにも関わらず、
更新内容がDBに反映されない

原因
DB、ageの型はint型のため、空文字を書きもうとすると反映できない
以下のようなSQL文をphpMyAdminから流すことで上記の理由が確認できる
UPDATE users SET username = ‘例’, tel = ”, zip = 0, addr = ”, age = ”, email = ‘XXXX@gmail.com’ WHERE id = X

修正前のコード
$age = $_POST[‘age’];

修正内容
zipと同じように空で送信されきてきた場合には0を入れる

修正後のコード
$age = (!empty($_POST[‘age’])) ? $_POST[‘age’] : 0;

まだ完全でないと思われるところ
DBに反映できない場合には、エラーにならないといけない

4.ageを未入力で登録したにも関わらず0が表示される
対象
webservice_practice05
profEdit.php

事象
「3.更新した内容がDBに反映されない」での修正をおこなった後、
画面上で年齢に0が入ってしまう

原因
LESSON動画でも解説していたとおり、DBに0が入っているため

修正前のコード
ブログの文章に入力できないため一部<>等削除しています
input type=”number” name=”age” value=”php echo getFormData(‘age’);”>

修正内容
DB値0のときには値を空白にする

修正後のコード

ブログの文章に入力できないため一部<>等削除しています

input type=”number” name=”age” value=”php
if( !empty(getFormData(‘age’)) ){
echo getFormData(‘age’); }else{
debug(‘ageはemptyでtrue判定されました’);}”

まだ完全でないと思われるところ
年齢0を登録する反映されていないように見えてしまう

備考
「value=」と「<?php」の間に改行やスペースを入れると、それ自体が値になってしまう