作成した掲示板システムの概略 こんな感じのメッセージ投稿とアンカー機能を搭載した掲示板システムを作成し昨日初投稿の記事として紹介しました。 【作成した掲示板】 判明した不具合 昨日初めてのWebプログラミング挑戦の一環として掲示板の記事を投稿したのですが、一つ大きなバグがあったので、早くもアップデートが入りました。 この掲示板にはコメントにアンカーをつける機能を搭載しており、>>1などの文字列を正規表現で置き換えることで、リンクにして目立たせる機能を搭載していたのですが、リンク先がないので当然NotFoundエラーが表示されていました。 今回の改良ポイント そもそもリンク用途のaタグを修飾に使うべきではないような気がしたので、普通にspanで囲んで、青色をつけました。 1つ目.js $("#comment").html($("#comment").html().replace(/>>(\d)/g,"<a href=id$1 class='anc'>" + ">>$1" + "</a>")); 1つ目のコードはaタグを利用して修飾しています 2つ目.js $("#comment").html($("#comment").html().replace(/>>(\d)/g,"<span x=id$1 class='anc text-primary id$1'>" + ">>$1" + "</span>")); 二つ目では単にtext-primaryクラスを追加し、bootstrapで修飾しているので、NotFoundエラーは出ません。タグ内の要素はhrefではなく適当にxとおいて互換しています。 さらなる改良 モバイル用のマウスイベントがJavaScriptにあるなんて！ 以前はmouseenterがポップ出現条件だったのですが、スマホでは使えないという欠点がありました。今回、リンク不良が治ったためポップ条件をclickにし、PC用ではマウスが離れた時、スマホ用では画面スワイプでポップを削除するようにしました。 改良.js $(".pop" + n).on("mouseleave", function () {//マウスが離れた時削除 $(this).remove(); }) $(".pop" + n).on("touchmove", function () {//画面をスワイプしたとき削除 $(this).remove(); }) 一つ前の記事へ
どうも7noteです。テキストにするか画像にするかの線引きをいろいろなパターンで考えてみた WEB制作を行う中で 「テキストにするか、画像にするか」 は非常に難解な問題です。 特に線引きが難しいこの問題を個人的見解で基準となる線引きをしてみました。 さまざまな場面に合わせてテキストか画像かを分けて行きます。 「テキスト」のほうが好ましい場面 ・seo対策に重要なキーワード 重要なキーワードはできる限りテキストとしてgoogleのクローラー(サイトを巡回してるロボット)に認識してもらい評価を受ける必要があるので、できるだけテキストで作成します。 ・見出し、ページタイトルなど こちらもseo対策を行う場合はテキストのほうが好ましいので、できる限りテキストで作成します。 ただCSSで再現できないものは画像にします。 ・今後更新することがある数値・テキスト 更新のたび画像を修正していると作業時間がとても増えてしまうので、できる限りテキストで作成します。 ただ、デザインを損なう場合は画像で作成します。 ・ナンバリングはolのカウントで出来るだけ再現 1.ほげほげ 2.ふがふが などの文字はcssの装飾で対応できる場合はcssだけで再現します。 もし新しく増えたり、順番が変更になってもHTMLの修正だけで済むので。 ただ、標準デバイスにないフォントで作成されている場合は画像で作ります。 ・テーブル、表 HTMLでテーブルがあるので、できるだけtableタグを使って再現します。 ただtableタグだけで表現が難しいデザインの場合は画像で作ることもあります。 ・コピペしてもらう用の文章 そんなにないとは思いますが、コピペしてもらいたい物、たとえばソースコードなんかは画像だとコピペできないのでテキストで書くようにしましょう。 「画像」のほうが好ましい場面 ・標準デバイスにもWEBフォントにもないフォントが使われている文字 フォントが変わりデザインが変わってしまうので、画像を使うしかありません。webフォントで対応できる場合でもページの読み込み速度を考えるとページに1箇所2箇所程度であれば、画像のほうがいいかもしれません。ページスピードを計測しながら良い方を利用してください。 ・CSSでは再現できないデザイン これは諦めて画像にしましょう。 cssで再現できるかどうかはgoogleで検索して、方法が見つからなければという判断でいいと思います。 ・文字の配置がcssではとても複雑になる テキストだけでは説明が難しいですが、文字の大きさがバラバラでかつ位置もcssで調整が難しいものは画像にすることが多いです。 CSSで再現してもいいのですが、デザインが細かいとCSSで完璧に再現するのはとても難しいので画像にしてしまいます。 微調整しても全てのデバイスで完璧に同じ見え方にさせるにはテキストでは限界があるので、凝ったデザイン配置のテキストは画像にします。 ・グラフや時間軸付きの図など グラフ系は複雑になりやすいので基本的に文字ごと画像にすることが多いです。 注釈は一緒に画像にしたり、テキストのみにしたりと場面に応じて変えてますね。 ただデータベースと連携してリアルタイムでグラフを生成する場合は画像では作れないのでcssやｓｖgを使って作成をしなければなりません。 まとめ いかがでしたでしょうか。思いつく限りを書きましたが、まだ他にも具体例があるかもしれません。 web制作をする上では気をつけなければ行けないポイントや悩むポイントが多くあると思います。 そんなときに自分なりの指標をもって取り組むことでムダな考える時間を省くことができるので、マイルールに従って作成していくといいかなと思います。 また「本来テキストでないといけないところを画像にしてしまった！」となっても、1箇所2箇所程度であればそこまで大きな影響はありません。 作成する人によってもそれくらいの誤差がでるものなので、あまり気にしすぎずどんどん作って自分なりにこういう作りにしようと考えて取り組んでみてください。 そうやって考えて取り組んできたものが最も正解に近いのかなと思います。 【フロントエンド強化月間に参加中↓↓】 おそまつ！ ~ Qiitaで毎日投稿中!! ~ 【初心者向け】WEB制作のちょいテク詰め合わせ
最近ポートフォリオ内でレコード登録からデータベース反映までの機能を作成しました。 その際に、入力フォームと同じフォームデザインで入力内容確認画面も作成したかったのですが、入力フォームと同じフォームに入力した内容を表示するだけでは、確認画面なのに入力内容を変更できてしまうという問題にずっと悩んでました。 （前に作成したポートフォリオでは、入力内容確認をテーブルで表示していた為、入力フォームとテーブルで全く異なるデザインになってしまい統一感が無かった。） 結果、input要素内でreadonlyを指定してあげるだけで解決できました（笑） とても短い内容ですが、今回はreadonlyについてご紹介するので是非参考にしてもらえればと思います！ readonly readonlyは、input要素での入力を不可にし、編集ができない読み取り専用のinput要素にしてくれます。 <input type="text" name="" value="" readonly> 1.登録内容を入力して確認画面に送信する。 2.確認画面フォームのinput要素でreadonlyとvalueに登録画面から取得したデータを指定。 これだけで、登録内容入力画面と同じデザインで統一感のある入力内容確認画面を作成することができます！ Tailwind CSSを使用されている方は、下記のサイトを参考にするとアプリらしいフォームを作成することが出来るので、是非ご覧になってみてください！ https://absarcs.info/how-to/customize-form-tailwind-css/ 参考サイト readonlyについて http://html5.cyberlab.info/elements/forms/input-readonly.html
レスポンシブデザインについて レスポンシブデザインについて学んだことを書き留める。 実装方法はいくつかあるようだが、とりあえずはわかりやすかった方法で ◆サンプル <!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>StayWorld</title> <link rel="stylesheet" href="mobile.css"> <link rel="stylesheet" href="desktop.css" media="screen and (min-width: 600px)"> </head> <body> <h1>Test</h1> </body> </html> linkにmedia属性を付与する。 media="screen and (min-width: 600px) screen：ブラウザを使う場合は基本これ min(max)-width: スタイルを適用する条件（画面のサイズ） cssはモバイルファースト デスクトップからスタイルを設定したいところだが、PC画面のほうが往々にしてページが複雑化しやすい。モバイルのスタイルをベースとして、不足分にデスクトップのスタイルを適応するほうが冗長な記述が少なく済む。
Webアプリケーション（2） Webアプリケーション（1）の続きです。 XAMPPとVisual Studio Codeがインストール済みを前提としてすすめます。 今回の内容（動画） XAMPPの作業用フォルダを設定する Visual Studio Codeでフォルダを開くを選択 Windosの場合 Cドライブ＞XAMPP＞htdocs フォルダを選び、下のフォルダーの選択をクリック Macの場合 移動＞アプリケーションXAMPP＞xamppfiles＞htdocs フォルダを選び、下のフォルダーの選択をクリック エクスプローラーにhtdocsの中が表示される 先ほど選択したフォルダの中がエクスプローラー（左）で見えていることを確認してください 次はこちら （次）
プログラミングの学習のために同僚たちとともにマインスイーパを作る腕試しをしたところ、とてもエモい作品が上がってきたのでご紹介したいと思い、記事にしました。 以下のページで実際に動かすことができます。 MINESWEEPER 本記事の内容はエモいマインスイーパの紹介を通して、 再帰関数の使い方 背景色をじわじわ変えるCSSの方法 を解説します。 デザインコンセプト エモいマインスイーパは、初期画面では真っ黒な背景です。 ゲームを進めていくごとに背景色が徐々に変化していきます。 黒→青→水色… と変化し、成功すると最後は美しいグラデーションでfinishします。 これは夜明けをイメージしています。マインスイーパは地雷除去のゲームなので、平和な世界にしたいというエモい希望が込められています。 背景色が変化する実装は後ほど解説します。 start play1 play2 clear game over アルゴリズム、ロジックのわかりやすい解説 セルの生成と状態管理 ゲームボードはtableタグで、ひとつひとつのセルはtdタグになっています。 セルは、以下のような状態を持つ必要があります。 爆弾があるか 周辺の爆弾の数 旗が立っているか 開いているか、閉じているか エモいマインスイーパはこれらの状態をDOMに保持して管理しています。つまり、tdタグのclass属性であったり、innerTextに数字を持っていたりします。 周辺の爆弾の数の求め方 周辺の爆弾の数を求めるには、周辺のセルにアクセスする必要があります。 エモいマインスイーパはjQueryによるDOM操作で周辺のセルにアクセスします。 // n番目のセルを取得するコード $('#gameBody td').eq(n); tdを配列で全部取得して、配列のn番目を取得しています。 周辺のセルは、上、下、左、右、左上、右上、左下、右下の８箇所あります。それぞれのnを求める必要があります。 起点となるセルのインデックス（i）とゲームボードの列数（w）のふたつを使いnを算出します。 // 左上 let tl = i - w - 1; // 上 let t = i - w; // 右上 let tr = i - w + 1; // 左 let l = i - 1; // 右 let r = i + 1; // 左下 let bl = i + w - 1; // 下 let b = i + w; // 右下 let br = i + w + 1; ただし、角や端のセルは周辺にセルが８箇所あるとは限りません。角かどうか、端かどうかを判定しながら存在する周辺セルのnのみを取得します。 let array = [tl, t, tr, l, r, bl, b, br]; if (i === 0) { // ボードの左上の角 array = [r, b, br] } else if (i === w - 1) { // ボードの右上の角 array = [l, bl, b] } else if (i === w * (h - 1)) { // ボードの左下の角 array = [t, tr, r] } else if (i === w * h - 1) { // ボードの右下の角 array = [tl, t, l] } else if (i < w - 1) { // ボードの１行目（上端） array = [l, r, bl, b, br] } else if (i > w * (h - 1)) { // ボードの最優業（下端） array = [tl, t, tr, l, r] } else if (i % w === 0) { // ボードの１列目（左端） array = [t, tr, r, b, br] } else if (i % w === w - 1) { // ボードの最終列（右端） array = [tl, t, l, bl, b] } return array; これで周辺のセルのnをすべて取得ことができました。 あとは周辺のセルにアクセスして、爆弾があれば集計変数に+1し、起点となるセルに数字を設定します。 爆弾がないセルを一気に開く 開いたセルに爆弾がない場合、上、下、左、右、左上、右上、左下、右下の８方向に数字or旗がないかを判定しならがセルを開いていき、数字or旗が見つかったらセルを開くのをやめる、という実装をします。 このようなロジックには再帰関数を利用することが多いと思います。 再帰関数とは 再帰関数とは自分自身を呼び出す関数のことです。 以下は再帰関数を利用する場合の例です。 function openCell(targetCell) { if (targetCellに数字or旗がある場合) { return; } targetCell.open(); openCell(targetCellの上のcell); openCell(targetCellの下のcell); openCell(targetCellの左のcell); openCell(targetCellの右のcell); openCell(targetCellの左上のcell); openCell(targetCellの右上のcell); openCell(targetCellの左下のcell); openCell(targetCellの右下のcell); } openCell関数からopenCell関数が８回呼び出されています。こうすることで８方向に、数字 or 旗が見つかるまでセルを開き続けることができます。 もちろん再帰関数ではなく、ループを利用しても可能ですが、再帰関数の方がコードの重複が少なくシンプルに書くことができます。 再帰関数を利用する際には注意点があります。 必ず再帰呼び出しを抜けるためのreturnを書くこと 当たり前ですが再帰呼び出しはreturnしないと永遠に（※）呼び出し続けてしまいます。必ずreturnを書くことと、returnに入る条件をミスしないように気をつけましょう。 ※実際には永遠にということはなく、メモリ内のスタックという領域を使い果たしてエラーになります。 相互再帰 エモいマインスイーパは再帰関数の一種である相互再帰が利用されています。相互再帰とは一つの関数内での循環した呼び出しではなく、複数の関数を組み合わせた状態での循環呼び出しです。 こちらが相互再帰を利用したコードです。 function clearCell($el) { if ($el.hasClass('is-flag')){ // 旗が見つかれば終了 return; } // セルを開ける $el.addClass('is-clear'); if ($el.hasClass('is-bomb')) { // 爆弾が見つかればゲームオーバー return gameOver(); } // これは後述 setProgress(); if ($el.hasClass('is-blank')) { // 数字も爆弾もないセルだったら、周辺のセルも調査 clearBlanks($el); } } function clearBlanks($el) { let index = $('#gameBody td').index($el); // 周辺の存在するセルのindex配列 let array = getAroundCell(index); $.each(array, function(){ let $cell = $('#gameBody td').eq(this); if(!$cell.hasClass('is-clear')){ // まだ開いていないセルの場合は開く clearCell($cell); } }); } 背景色が徐々に変わるCSS bodyに付与しているクラスを付け替えることで背景色を変えています。 セルを開くたび、以下の関数が呼び出されます。 function setProgress() { clearCount += 1 // 開いたセルの数 ÷ 爆弾のない全セルの数 × 100 let progress = clearCount / (width * height - bomb) * 100; if (100 <= progress) { $('body').removeClass().addClass('is-morning'); gameClear(); } else if (90 <= progress) { $('body').removeClass().addClass('is-earlyMorning'); } else if (80 <= progress) { $('body').removeClass().addClass('is-sunrise'); } else if (70 <= progress) { $('body').removeClass().addClass('is-dayBreak'); } else if (60 <= progress) { $('body').removeClass().addClass('is-lateNight'); } else if (50 <= progress) { $('body').removeClass().addClass('is-midNight'); } else if (40 <= progress) { $('body').removeClass().addClass('is-deepNight'); } else if (30 <= progress) { $('body').removeClass().addClass('is-silentNight'); } else if (20 <= progress) { $('body').addClass('is-night'); } else { $('body').removeClass(); } } 進捗に応じてクラスを付け替えています。 色はCSSで以下のように設定されています。真夜中から朝にかけて、徐々に明るくなり、朝はlinear-gradientを利用して３色のグラデーション背景になっています。 body { width: 100%; min-height: 100vh; background: black; } body.is-night { background: #141418; } body.is-silentNight { background: #181620; } body.is-deepNight { background: #181621; } body.is-midNight { background: #12162b; } body.is-lateNight { background: #0d2246; } body.is-dayBreak { background: #0c3864; } body.is-sunrise { background: #0c5a8c; } body.is-earlyMorning { background: #498eb6; } body.is-morning { background: linear-gradient(180deg, #498eb6 0%, #b7dfc2 75%, #ffe1b2 100%); } これだけでは、クラスが付与された瞬間、急激に色が変わってしまうため、じわっと変化をするアニメーションを設定する必要があります。これもCSSで可能です。 * { transition: background 1s, color .6s, opacity .6s; } 上記のCSSは、すべての要素に対して、 背景（background）の変化に1秒をかける 文字色（color）の変化に0.6秒をかける 透明度（opacity）の変化に0.6秒をかける という指定になっています。
