QiitaQiitaの最新情報を7時、12時、19時にTwitterでお届けします。HTMLPythonJavaScriptRailsRubyAWSPHPdockerJavavue.jsSwiftAndroidiOSC#UnityLinuxNode.jslaravelGoCSSGitHTMLReactMacMySQLC++TensorFlowDeepLearningKotlinSQL新人プログラマ応援201911292020/02/282020/02/272020/02/262020/02/252020/02/242020/02/232020/02/222020/02/212020/02/202020/02/1920191129のHTMLに関する記事は11件です。投稿日:2019-11-29T21:41:41+09:00【ポケモン】ゼロからはじめるダメージ計算ツールづくり【第1回:プロトタイプ編】まえがきダイマックスちょーかっこよかった!ポケモンシリーズの第8世代「ソード・シールド」が発売されました。全作品プレイしている僕は当然のごとく今作も買いました。メガシンカもZわざもないなんて...とバカにしていましたが、ダイマックスちょーかっこよかったです。殿堂入りするまでノンストップでテンションあがりました。僕もレート対戦がんばりたいと思っています。そんななかで発生するのがこんな状況だと思います。この相手にこのわざ撃って倒せるのか??倒せないなら交代or別のわざ撃ったほうがいいなぁ~具体的なダメージが分かれば戦略がたてられるのに...こんなとき、使いたくなるのが「ダメージ計算ツール」ですよね。僕みたいな初心者からすると、いちいちステータス打ち込んでわざ打ち込んで...ってダメージ計算するの、対戦中にやるには億劫だし慣れてないツールだと時間も足りないんですよね。実際の対戦画面みたいに、わざのボタン押したらダメージ計算してくれるツールがあったらいいのにな~と思いました。ポケモンのステータスが計算できること実際のバトルの状況に沿ってダメージ計算ができること自分の使うポケモン・パーティー、流行っているポケモンの型が登録でき、なるべく少ない手順でそれが呼び出せることわざボタンを押すとダメージ計算の結果が表示されることダメージ計算の結果が相手ポケモンのHPバーで表示されること(乱数による幅を含む)使う技術、環境HTML,JavaScript,CSSPython(いったんやめた)いままでプログラミングでつくったことがあるものは、PythonでExcelファイルを操作して業務効率化を図るコンソールアプリだけだったので、GUIのあるものをつくるのはこれがほぼはじめてです。Python大好きエンジニアなので、はじめはPythonでつくろうと思っていたのですが、PythonのGUIライブラリよくわかんない(tkinterとか)最近ポートフォリオサイトをgithub.ioでつくったのでHTMLに慣れてたダメージ計算だけだったらとりあえずJavaScriptでもつくれそうの理由でいったんHTML,JavaScriptをベースにプロトタイプをつくることにしました。PythonをベースにHTML,CSSでGUIアプリをつくることができるEelというライブラリも試してみましたが、途中で3に気づき、複雑になってしまうことを避けたかったので、今回はHTML,JavaScriptを勉強しながらつくってみることにしました。数値を直接入力して使うタイプのダメージ計算ツールを避けるためにつくるのですが、まずはステータス計算、ダメージ計算の仕組みなども理解しながらつくる必要があると思ったので、よくあるシンプルなダメージ計算ツールを作成することにしました。(ehresult-mintemp)/ehresult*100;}基本的な計算ツールとしての要件を満たすものはつくれたかなと思います。反省点としてJavaScriptのコードが不必要に長いです。JavaScript側で親関数を作って各ステータスを計算する子関数を作り、HTML側はいまのままのどちらかできれいなコードになる気がします。このへんはまだオブジェクト指向な考え方が身についてないのですぐスマートな書き方にならないと思っています。あと、随時コメントを書くクセをつけていかないとなと思っています。いまは1人でつくっていますが、複数人で開発するときにコメントがないのは大問題ですよね。課題ほしい仕様2の道具などの対応ほしい仕様3について、いきなりいろんなポケモンに対応するのは難しいので、いくつかのポケモンのプリセットボタンでダメージ計算のデモができるようにするダメージ計算の結果をHPバーで表示する機能はできてきたがデザインがダメ見えている課題についてはこんなところです。次回はプリセットボタン、HPバーの実装について書きたいと思います。今回は技術的なこと、苦労した点などについて書けていませんので、次回からはそのあたりも書いていきます。Railsアプリケーションに導入する方法HamlとはHamlとは、HTMLを簡潔かつ簡単に記述できるマークアップ言語。Hamlを導入Gemfileの一番下にコードを記述すると、すべての環境でhamlが使用できる。installを忘れずに。newにより、erbファイルがすでに作成されているので拡張子がerbのファイルをhamlに変換する。一括変換する方法ターミナルから以下のコマンドを実行。(y/n)と聞かれたら、状況に応じてy/nを選択する。172日目100日チャレンジの172日目twitterの100日チャレンジ#タグ、#100DaysOfCode実施中です。100日超えましたが、継続。100日チャレンジは、ぱぺまぺの中ではプログラミングに限らず継続学習のために使っています。2019ツイートは171日目ですが、172日目です。TweetQiitaで続きを読む投稿日:2019-11-29T19:07:23+09:00デザインが上がってきてからコーディング前にする脳内整理したいはじめに記事を書く目的は「自分のやり方の整理整頓」です。いうのも、自分はこう考えてやってるけど合ってるんだっけ、もっといいやり方あるかもな、、と最近思う今日この頃。「これからマークアップをやっていこうと思っているよ」といった方へ一つの考え方として参考になるようなものになればと思います。デザインが上がってきたときにやることデザインカンプを貰った時にまず考えること・やることを記述します。ちなみに、デザインがあがってきた時に「さあ!コーディングだ!」と突然手をつけたら色々ぐっちゃぐちゃになって爆死します。(経験談)PCのデザイン、スマホのデザインを見比べる※デザインカンプにPCとスマホ両方のデザインがあることを前提に記述します。PCのデザインとスマホのデザインを見比べて、どこがどう違うのかをじっくり見ます。ここでは以下を意識しています。余白のルールコンテンツ間の余白コンポーネント同士の余白等テキストサイズのルール見出しのテキストサイズ本文のテキストサイズ注釈のテキストサイズ等コンテンツの位置関係レスポンシブ前提の場合、要素の位置をスタイルの調整のみで変更できるかどうかを確認する増える|消える要素はあるかルールが見えてこなかったり、不明な点がある場合は、素直に「教えてください」や、「こう実装しようと思ってるんですけど意図合ってますか?」とデザイナーさんにお伺いしています。自分が思う「これがベスト」を提案してます。文書構造が破綻しそうにないかをチェックマークアップをする上で文書構造は、見出しと文章の関係性を明確にする上でとても大事です。スクリーンリーダーで読み上げた際に、見出しがないことで文章が成り立たなかったり、意図していない見出しの中に画像やテキストの内容が紐づいてしまう等もあります。それを防ぐために以下の観点でデザインを見て、文書構造を考えます。見出しはどこかを考えるまず見出しは何かを明確にしていきましょう。私はデザインカンプに直接「h1」や「h2」と泥臭くペンで書いてます。見出しに紐づくものは何か上記で見出しを明確にしたら、次にその見出しの中になんのコンテンツが入るかを確認します。以下の画像では、タイトルに紐づくのは画像とテキストであるようにしなければなりません。以前私がやってしまったNGパターンを紹介します。</div></div>と以前の私はやってしまってました。(大反省)一見見た目は再現できているように見えますが、上記では1つ目の画像が別の見出しのものに紐づいてしまうので、文書構造上はNGです。</div></div>上記がマークアップ上正しい記述となります。これだと、画像がタイトルに紐づく形になるので問題ないです。画像とテキストを逆順にするのであれば、逆順にする用のclass属性を付けてあげましょう。まとめ今回はデザインが上がってきた時、コーディングを行う前に脳内整理として大きく上記2点をやるといいのではないかなと思ってます。この後に、コーディング規則とか、どんな設計にするとか色々工程はあるのですが、それは後日公開しようかなと思っています。そのほかにも「自分はこれをやってるよ!」「これを意識しているよ!」等ありましたら、教えていただけると幸いです。約半年間の勉強を経て、以下のようなホームページを制作しました。(ホームページ制作に費やした時間は3か月ほどです。)空いてる時間を見つけては少しずつ制作していったのでかなり時間がかかってしまいました。野々市の焼き鳥居酒屋[PC版サイト][スマホ版サイト]サイトは、モバイルフレンドリー、SEO対策、ユーザーエージェント判定、jQueryによるアニメーションなどを考慮しました。サイト制作には、HTML5、CSS3、Bootstrap4のみを学習した状態で取り掛かり、必要な技術や知識はその都度学びながら作業を進めていきました。使用した言語やフレームワーク・HTML5・CSS3・Bootstrap4・jQueryホームページを作ろうと思ったきっかけ半年ほど前にwebプログラミングの勉強を始め、徐々に勉強をしていく中で完全オリジナルのホームページを作りたいと思うようになったのがきっかけです。最初は、クラウドソーシングを用いて誰かのためにホームページを作ろうと考えていました。初心者である私は一つも案件を受注することができませんでした。そこでポートフォリオ作成のためにも現在自分がアルバイトをしている居酒屋のホームページを勝手に作ってみることにしました。(笑)出来上がったホームページをオーナーに見せてみるとぜひ欲しいということで公開に至りました。サイトのデザイン、レイアウト、構造を大まかに決める正直自分はデザインやレイアウトを決めるのに一番頭を抱えました。デザインの勉強などもしたことがなかったので他の居酒屋ホームページを見まくりました。(笑)たくさんのホームページの中からいいなと思ったデザインを参考にしてサイトを制作しました。HTML、CSSを記述し、大まかなサイトを作り上げるHTML、CSSを記述し、大まかにサイトを作りました。文書や写真は仮のものを使用し、1で考案したデザインを形にしていきました。Bootstrap4を用いて余白やレイアウトを調節するCSSのフレームワークとしてBootstrap4を導入しました。制作したホームページの大半はBootstrap4を用いています。フレームワークによりかなりCSSの記述が楽になるのでCSSのフレームワークを学ぶことをお勧めします。自分の思い通りにCSSが反映されない時は、Chromeのディベロッパーツールを用いることで原因を突き止めていました。レスポンシブ対応にするためにスマホ版のサイトを作成する(1~3を繰り返す)サイトをレスポンシブ対応にする方法はいくつもありますが、自分はPC用サイトとスマホ版サイトを分けて作ることにしました。そのほうが、より自分の思い通りにレイアウトを調節できると感じたからです。手順としては、PC版と同じように1~3を行っていく形です。XAMPPを使用し動作確認ここまでのプログラミング反映の確認はChromeで行っていました(ディベロッパーツールを使うことでスマホ版のサイトも確認していた)。スマホ版のサイトを実機で確認がしてみたかったためサーバーが必要になりました。レンタルサーバーは費用がかかるため、無料でサーバー構築ができるXAMPPというソフトを使用しました。費用はかかりますが、圧倒的に楽で簡単なのは、レンタルサーバーを借りることです。自分は、料理の魅力やオーナーの気持ちを伝えれるように文書を作成しました。写真は一部オーナーから頂き、足りない写真は自分のスマートフォンで営業時間外に撮影し編集しました。画像編集には、無料のソフトであるGIMPを使用しました。主なseo対策として、サイトに使用するワードについて気を付けました。(スモールワードとビッグワードをうまく使い分けることが大事。)また、HTMLファイル内にメタディスクリプションを記述したり、ファビコンの設定なども行いました。jQueryの実装サイトに動きを与えるためにjQueryを実装しました。サイトに動きを与えることでよりサイトが使いやすく見やすいものになっていきます。jQueryは、「スクロール幅によってトップに戻るボタンを出現させる」「ドロワーナビを表示させる」「ヘッダーとフッターのHTMLを別ファイルで管理する」といった箇所で実装しました。レンタルサーバーを借りる(ロリポップ)サイトが完成形に近づいてきたのでレンタルサーバーを借りました。レンタルサーバーはロリポップを使用しました。実践的にホームページをWeb上にアップロードしてみることでホームページの運用を体験しました。個人的にホームページをアップロードする瞬間が一番楽しかったです。ユーザーエージェント判定、CSSハックに対応するPC版のサイトとスマホ版のサイトをアクセスした端末によってうまく振り分けれるようにユーザーエージェント判定をjQueryで制御しました。いざ、サイトを公開しようと思いアップロードしたところブラウザごとにレイアウトが乱れてしまうことが起きていたのでCSSハックにも対応させました。自分の思うようなホームページが完成したので公開に至りました。Analytics」を用いてseo対策がうまく適応されているかどうかを確認しつつ、ホームページを運用していくつもりです。感想ホームページを作成してみて一番重要なのは、使用する写真とSEO対策であると感じました。画質の良く、映える写真を利用することで見栄えのいいホームページになります。それを検索上位に表示させるSEO対策も必須です。レイアウトが思い通りにいかないことが多く、試行錯誤を繰り返すことはとても大変でしたが、その分達成感はものすごくありました。現在HTMLやCSSなどを勉強していてアウトプットする方法を探している方は、オリジナルのホームページやブログを作成し、公開してみるといいと思います。今後の展望ホームページの作成当初は、出来上がったサイトを元にクラウドソーシングや近所のお店への直営業から案件を受注することを目標をしていましたが、ホームページが出来上がっていくにつれてより自分の技術を向上させたいと思うようになっていきました。今後は、今回作成したホームページの運用とともにJavaScriptやそのフレームワークを中心に勉強していきたいと考えています。ホームページのSEO対策についての改善案や、おすすめするJavaScriptのフレームワークなどありましたら教えてもらえると嬉しいです。}</script>TweetQiitaで続きを読む投稿日:2019-11-29T12:50:37+09:00HtmlFormでDeleteやPutを表現するHTMLの標準では、FormはGETとPOSTしかサポートしていない。擬似的にフォームでDeleteとPUTを表現したい場合は、パラメーターにmethod情報を含める。Railsのフレームワークは内部の処理で隠されたDeleteフォームを生成することでDeleteFormを表現している。自分だって、いつケガしたり、障害もったり、するかわからないケガや障害じゃなくても、公共の場の利用でもヒントになるHTML書くとき※書き終わったあとのコードを振り返るときにも。Rendering)にトライ。try-conditional-renderingで、./public/index.htmlと./src/App.jsを編集。App;早速条件付きレンダーをやってみる。丸パクリにならないよう公式ドキュメントのマネをしてGreetInTheMorningとGreetInTheAfternoon、そしてGreetInTheEveningというコンポーネントを作る。<h1>おはようございます。