環境 MAMP導入済み Visual Studio Code　設定済み 今回使用する言語 HTML CSS JS 作業の目次 １：各フォルダの作成 ２：HTMLのコード作成 ３：JSのコード作成 ４：CSSのコード作成 1:各フォルダの作成 1.下記の画像のように、CSS / JS / img フォルダを作成しましょう！ ２：HTMLのコード作成 1.threeJS_4.htmlファイルを作成! 2.head部分を作成しよう ３行目　を記入 ４行目を記入 ここではCSSフォルダ内のNewstyle.cssを読み込みます。 ５行目　を記入 これを読み込むことで、Three.jsが使用できるようになります！ ６行目を記入 ここではjsフォルダ内のMoon.jsを読み込みます。 3.body部分を作成しよう ９行目 div class="example"クラスの宣言 １０行目　nav class="regular"　クラスの宣言 １１〜１３行目　Ulタグ　liタグで作成 １４行目　/nav で閉じる １６行目　 ここでcanvasのidを宣言 このmyCanvasに対して、３Dアニメーションが効いてきます！ １７行目　pタグで表示したい文字記入今回はMoonと記入 以上でHTMLコードの作成完了 ３：JSのコード作成 - 1.ページの読み込み確認とサイズの指定 ページの読み込みが完了してから４行目のfunction init() {　以降の処理を実行していきます！ 6~7行目でページの大きさを決めます！ - 2.レンダラーを作成しよう！ ※レンダラーとは仮想的な3D空間における物体を2Dのディスプレイに適切に描画するためのもの。 １０行目のWebGLRendererとは：その名のとおり、WebGLを扱うレンダラーのことです。 - 3.シーンとカメラの作成！ シーンとは：3D空間のことで、3Dオブジェクトや光源などの置き場のことです。 カメラとは：3D空間上での視点の位置を指します！ 4.月と輪を作成しよう！ ２６行目でmaterial（マテリアル）を作成します。 ここでは物体の色や質感または付与したい画像をロードします！ ※月の画像は各自で用意してください。 ３１行目でgeometry（ジオメトリ）を作成します。 主に、物体の形状を決めるものです。 例：球体・ドーナツ・キューブ ３４行目でmesh（メッシュ）を作成します。 これは、materialとgeometryの情報を元に物体を作るものです。 ３６行目のmesh.position.set(300, 0.5, 0.5);は物体の初期位置を決めるものです。 ３９行目のscene.add(mesh);でメッシュを3D空間に挿入します！ 同じように、輪の形状のものを作成しよう！ 5.光源を設置しよう！ ※光源（ライト）とは、物体に対しての光の角度や、光の明るさ、を調整して陰影を作り出すものです。 ５７行目：DirectionalLightクラスを定義 ５８行目：directionalLightの初期位置を指定 ６３行目：PointLightクラスの定義 6.星屑の作成！ ７１行目：createStarField();で宣言 ７３行目： function createStarField() 97行目： tick();の中に今までの設定が入っていると考えてください！ 7.物体に動きを与えよう！ １００行目：tick()の配列の中に動きを入れます。 １０２〜１０３行目：X・Y方向に向かって回転させる速さむきを調整します。 １０７〜１１１行目：三角関数を元に。Sin/Cosを使ってライトの周回向きを調整する １１４〜１１５行目：X・Y方向に向かって回転させる速さむきを調整します。 １１９行目：レンダリングを行う。 １２１行目：アニメーションの実行！ ４：CSSのコード作成 .example では位置を設定します！ .example pではpタグ内の文字の設定をします！ navではnav要素全体の大きさや色合いを設定します！ nav ulでは行全体の設定をします！ nav a ではaタグ内の文字の設定をします！ nav li a:hover ではaタグにカーソルを合わせた時のアクションを設定します。 myCanvasでは画面全体のデザイン、背景の設定もおこないます。 ※背景となる銀河などの写真は自由です。 完成 以上でThree.JSによる作品の制作は完了です！ 最後に下記のgitからコードをクローンして答え合わせをしましょう！ https://github.com/katayama502/TEST_ThreeJS

画像を一覧で表示する際、画像によってサイズが異なる場合に統一して見やすくする方法。 画像を中央の位置でトリミング .image { object-fit: cover; } を追加することで中央できれいにトリミング可能。 画像を任意の位置でトリミングする 中央以外の位置でトリミングしたい時は object-position プロパティーを設定。 左上を基準にして、object-position: 横の位置と縦の位置を記述する トリミングせずに余白を表示する object-fit: cover; を指定していたところを object-fit: contain; に変更するのみ。

事件はAndroidの文字入力で起きました． PCとスマホで入力文字の挙動が違う 依頼を受けてブラウザ上で縦書き画像を簡単に作れるサービスを開発していました． textareaから文字の入力を受けて，それをcanvas上にjavascriptで縦書き文字として描画するっていうシンプルなロジックのものでした． Reactをベースにして，特にこれと言ったライブラリは一切使っていませんでした． 事件はそのとき起きました 依頼者の方から， 「～が横のままになってるのでそこだけ修正お願いします～！」 と連絡がきました． これはまずいと思い，急いでPCから修正を行おうと思いましたが・・・ まったく縦のままでした・・・． いやいや依頼者の方,なんの文字を入力したんだと思いその環境を聞くと 「スマホのChromeです～！」 とのこと．ふむふむなるほどと思い私もスマホのchromeで確認すると あああああああああああああああああああああああああああああああああああああああああ（断末魔） はい，PCとスマホで挙動が違うじゃありませんか． 検証 原因はなんとなく推測がつきます． 文字コード これしかないやろと． ということでtextareaで受け取った文字を比較しました． encodeURIComponent(input) 結果 PC スマホ やった！原因合ってた！！！！！！！！ あああああああああああああああああああああああああああああああああああああああ（断末魔） 修正 文字をそのまま比較していたところを文字情報で比較することにしました // 修正前 if(ch === "～"){ // } //修正後 if(["%EF%BD%9E","%E3%80%9C"].includes(encodeURIComponent(ch)){ // } 結果 スマホ GG

概要 基本Railsの記法に則り書いていきます！ １から全ての説明ではなく その中であれ？どうやるの？と 疑問に思った点や実装に困った箇所を ピックアップして紹介していきます♩ 設定と準備 ・Rails ・HTML ・CSS ・Javascript(jQuery) ↑上記の言語とフレームワークを使い 架空(自分で考えたテキトーなもの)のCafeの HPを作っていこうと思います！ 13日目の作業内容 ・ビューの作成(一覧ページ) 13日目の気になった箇所 f.text_areaで入力された値をそのまま反映したいが どのようにすれば良いだろうか。 仮説 調べたらrailsのヘルパーメソッドである simple_formatや safe_joinなどを使うと 表示できるらしい。 testsテーブルのsampleというカラムに保存させて反映させていくとします。 tests/new.html.erb <%= f.text_area :sample %> まずは入力フォームを作成。 入力例) sample sample sample 上記のように文字の前に空白や改行を適当に入力したとします。 tests_controller.erb def show @test = Test.find(params[:id]) end コントローラでインスタンス変数に格納し使えるようにします。 tests/show.html.erb <%= @test.sample %> これで反映はされれるが sample sample sample このように表示されてしまいうまく表示できない。 ではここにヘルパーメソッドを使い検証していきます。 tests/show.html.erb <%= simple_fomat(@test.sample) %> tests/show.html.erb <%= safe_join(@test.sample) %> どちらもエラーが出てしまいうまくいかなかった。 結論 上記で検証したsimple_fomatやsafe_joinでも うまく反映させることが可能だと思いますが 今回は私がうまくいった方法を紹介します。 上記と同じものを使うと仮定するので入力フォームなどは割愛させていただきます。 では、同じようにように表示させていきます。 tests/show.html.erb <p><%= @test.sample %></p> 表示させたい値をpタグで囲っていきます。 今回はpタグで囲いましたがクラス名を付与でも可能です。↓ tests/show.html.erb 例) <%= @test.sample, class:"text" %> 次にこのpタグ(もしくは付与したクラス名)に CSSを当てていきたいと思います。 show.css p { white-space: pre-wrap; } /* クラス名の場合 */ .text { white-space: pre-wrap; } たったこれだけで空白、改行全て反映してくれます！ このwhite_spaceというプロパティは要素内の空白をどのように 扱うかを指定するものです。 今回はpre-wrapを指定しましたが、他にも 要素を詰めて空白を作らない 改行はするが最初の空白は作らない　など 用途に合わせて使えると思いますので、気になったら調べてみてください！