エラー内容 create-react-appのバージョンを2.0.4から3.2.0へアップグレードしたところ、yarn create react-appの実行時にエラーが発生しました。 $ yarn create react-app time-in-words yarn create v1.9.4 [1/4] Resolving packages... [2/4] Fetching …
久しぶりにReactアプリを作成しようと思い、reate-react-appのバージョンも最新にしようとして試行錯誤したことを記録しておきます。 結論 メジャーバージョンをまたいだ最新バージョンにアップグレードする場合は--latestを指定する。 $ yarn global upgrad…
こんにちは。今の会社(web系)に新卒で入って今年で10年になるブログ主です。IT業界で10年ともなるとかなりの古株です。担当しているサービスはECで、入社した時にはすでに大きなサービスでしたが、ありがたいことに、この10年でさらに大きくなりました。 会…
こんにちは。新しい技術を学ぶとき、概念を表す単語でつまづくブログ主です。Dockerの用語がよくわからなかったのですが、Javaに例えると少しはわかるようになったので書いておきます。 Docker用語とJava用語の対比 かなりざっくりですが、以下のようにDocke…
★前回の記事 yucatio.hatenablog.com 現在の実装では、フィールドに新しくピースが置かれたときにフィールドのピースを描画しています。 フィールドに置かれたビースを再描画する際、フィールドに置かれたピースが一気に置き換わる瞬間があります。 このよう…
★前回の記事 yucatio.hatenablog.com ピースの表示をもう少し工夫してみましょう。 KATAMINOを遠いている最中、フィールドに置かれたピースをピースの選択エリアから消します。 これによって、ピースの選択エリアにあるピースを取ってフィールドに置いている…
★前回の記事 yucatio.hatenablog.com 現在のUIでは、解くのをスタートさせたときに、どの位置までKATAMINOが置かれるべきかわかりにくいです。今回はこれを改善します。 本物のKATAMINOでは区切りとなる位置にバーを置いて、どの範囲の中にピースを収めるの…
★前回の記事 yucatio.hatenablog.com 現在300ms間隔で描画を行なっていますが、ピースの数が多い場合は若干遅く感じます。そこで速度調節機能を追加します。 速度設定の追加 速度の設定を追加しましょう。 下記の記事で5段階のスライダーを用意しました。 yu…
★前回の記事 yucatio.hatenablog.com 一時停止、再開機能を実装します。 一時停止機能は、solver.solveで実行したsetTimeoutをキャンセル(clearTimeout)することで実現します。 timerの保存 setTimeoutをキャンセルするには、setTimeouotの戻り値が必要にな…
★前回の記事 yucatio.hatenablog.com "ピースをえらびなおす"ボタンが押されたときの動作をプログラミングしていきます。 フィールドに置かれているピース(placedPieces)を空にして、画面の状態(solverState)をピースの選択中(selectPiece)に変更します。 ac…
★前回の記事 yucatio.hatenablog.com KATAMINOが解き終わったときに、解けたか解けなかったかをダイアログに表示します。 ダイアログにはbootstrapのmodalコンポーネントを使用します。 ダイアログパーツの作成 Modal · Bootstrap に載っている例を参考にダ…
★前回の記事 yucatio.hatenablog.com KATAMINOを解くのが終わったときに、解けた(solvedSuccess)または解けなかった(solvedFailed)へ状態を遷移させます。 解けたか解けなかったかはsolverの中でわかるので、コールバックを使用してstateを更新します。 終了…
★前回の記事 yucatio.hatenablog.com フィールド上のピースの表示を行います。また、KATAMINOを解いているときのピースの選択エリアやボタンの部分も変更します。 フィールドに置かれているピースの表示 前回、表示に必要な情報をstate.placedPiecesに格納し…
★前回の記事 yucatio.hatenablog.com スタートボタンを押したときの挙動をプログラミングしていきます。 actionの登録 スタートボタンへactionを登録します。スタートボタンがクリックされたときにaction.startSolveを呼びます。この関数はすぐ下で実装しま…
★前回の記事 yucatio.hatenablog.com プログラミングをしていきます。まずは使うピースの選択です。 状態の追加 選択中のピースをstateに追加します。 初期値はpieceIdが1, 2, 9, 5, 10ですので、これを追加します。 js/state.js const state = { // One of …
★前回の記事 yucatio.hatenablog.com 画面の状態遷移について考えます。画面の状態とは、"ピースの選択中"や"解いている"という状態です。 "ピースの選択中"と"解いている"、"解けた"、"解けなかった"の状態遷移は以下のようになります。 今回は一時停止がで…
★前回の記事 yucatio.hatenablog.com プログラムの内部設計をします。今回はjQueryを使用しますが、(jQueryのサンプルでよく見るような)コールバックを多用するとコードの見通しが悪くなるので、今回はReact+Reduxのプログラム構成を参考にして設計してみま…
★前回の記事 yucatio.hatenablog.com 一時停止・再開ボタンの追加 フイールドのcardコンポーネントのフッターに一時停止・再開のボタンを追加します。両方ともページが読み込まれたときには押せないボタンなのでdisabled属性を付与しています。 index.html <div class="card my-2"> <div class="card-body"></div></div>…
★前回の記事 yucatio.hatenablog.com KTAMINOのフィールドを配置します。 今回はKATAMINOを置くマス目(フィールド)に画像を用います。 画像はこちらからダウンロードできます。ダウンロードしたら、img/fieldに配置します。 KATAMINO-SOLVER/KATAMINO-SOLVER…
★前回の記事 yucatio.hatenablog.com KATAMINOを解くのをスタートさせるボタンを用意します。 ボタンの種類と実装方針 作成するプログラムでの、ボタンの状態は以下の4つです。 押せる状態のスタートボタン 押せない状態のスタートボタン "つかうピースをも…
★前回の記事 yucatio.hatenablog.com 前回までで、選択用のピースを画面に表示させることができました。今回はピースをドラッグ＆ドロップさせる処理を追加します。 draggableとdroppableの設定 jQuery-UIのdroppableのページを参考に、ピースをドラッグ＆ド…
★前回の記事 yucatio.hatenablog.com ピースの選択エリアを作成します。ドラッグアンドドロップでピースを選択できるようにします。 jQuery-UIのDraggableとDroppableを使用します。 使用するbootstrapのコンポーネントは以下のようにContainerとAlertとCard…
★前回の記事 yucatio.hatenablog.com STEP 1では、KATAMINOのフィールドの1マスをテーブルの1セルに対応させていました。 このままでは見栄えが良くないので改善します。 改善したいポイントとしては、1ピースの中ではボーターを表示せず、さらにピースとピ…
★前回の記事 yucatio.hatenablog.com 見た目を整える最初の1歩として、ロゴを作成して表示してみましょう。Webで無料でロゴが作れるサービスはいくつかありますが、今回はLOGASTER を利用しました。 会社名に"KATAMINO SOLVER"と入力して、次へを押すと、ロ…
★前回の記事 yucatio.hatenablog.com はじめに、bootstrapとjQuery, jQuery-UIのライブラリを読み込んでおきましょう。 ひな形をbootstrapのページからコピーします。前回までの内容は一旦全て削除します。 Introduction · Bootstrap のページ内のStarter Te…
★前回の記事 yucatio.hatenablog.com STEP2では見た目を整えてアプリを完成させます。 ページを開いた時の見た目はこのようになります。 画面上部でピースを選択します。スタートボタンを押すと、解くのを開始し、解く過程が表示されます。 ピースの選択(ド…
★前回の記事 前回まででピースを画面から選ぶことができ、解く過程も表示することができました。 いくつかの組み合わせを試してみると、以下の画像のように、フィールドに穴が空いている場合でも、ピースを置くのを続けてしまう場合があることに気づきます。…
★前回の記事 yucatio.hatenablog.com これまで、使用するピースはjs/main.jsで指定してきましたが、画面で選べるように変更します。 表示するピースの画像の準備 ピースを選択する際にどのピースの画像を表示させます。画像をダウンロードします。 KATAMINO-…
★前回の記事 yucatio.hatenablog.com 前回までで解けた場合のフィールドを表示しました。今回は途中の経過も表示します。 ピースが置けた時にフィールドを更新します。 途中経過の表示方法 途中経過を表示します。ピースが置けたときに画面を更新します。 画…
★前回の記事 yucatio.hatenablog.com 前回の記事で解けた内容を画面に表示しました。まだ見づらいので今回は見た目を整えていきます。 テーブルの枠線の表示し各セルに色をつけます。 色の準備 各ピースの色は以下のとおりです。 各ピースの色は パステルカ…
