<p>こんにちは！さとです。うぇぶスタを運営している6人チームの中でエンジニアを担当しています！</p><p style="text-align:right"><br></p><h2 id="h9b7fc86181">プロフィール</h2><blockquote>名前：さとうまなみ<br>出身：大阪府<br>趣味：写真撮影/ゲーム<br>何してるの？：下っ端フロントエンドエンジニア<br>得意なこと：写真が得意です！！！！！！<br>自慢できること：寿司打高級で6000円返ってきました</blockquote><h2 id="h4875dd3546">普段何してる？</h2><p>フロントエンドエンジニアになるため、わからないなりに日々コードを書いています。（今はNext.jsとNuxt.js！）<br>エンジニアリングもデザインも大好きなので、将来はデザインエンジニアになりたいと思っています！<br><br>写真とゲームが大好きで、片道2時間半の範囲内ならどこでも飛び回りつつテトリスとナワバトラーに励んでいます<br>いつか上京したいな〜と思いつつ、まだしばらく大阪で働く予定です、、</p><h2 id="h898085d62a">なぜWebの専門学校に入ったの？</h2><p>小学生の頃に簡単なHTMLとCSSに触れており、高校の頃「子供の頃好きだったことがあるのなら」と担任にWeb業界を薦められたことがきっかけでした。<br>当初は「デザインなんてできるわけがない！」と思っていましたが、学んでいくうちにその奥深さを知り、今では大好きになりました！<br>苦手意識があっても取り組まなければいけない環境があるのは、とても大切だな〜と思いました。</p><h2 id="h3bcda3e6b0">最後に</h2><p>ここまで読んでくださり、ありがとうございます！今後も私たちと一緒に勉強していきましょう🎶</p>

[メンバー紹介]うぇぶスタのネコの紹介！

<p>こんにちは！普段うぇぶスタでは、webデザインやプログラミングを勉強中の学生さんに向けた勉強お悩み解決するための情報発信をしています！<br>運営メンバーは6人いて、その中でも私はプログラミングについて発信しているのですが、今回はうぇぶスタのシバイヌの中の人「おかざきるい」についていろいろ紹介していきます！</p><p style="text-align:right"><br></p><h2 id="h9b7fc86181">プロフィール</h2><blockquote>名前：岡崎流依(おかざき るい)<br>出身：神戸市<br>趣味：カメラ、邦ロック、ゲーム、プログラミング<br>何してるの？：エンジニアしてます。<br>得意なこと： デザインの意図を汲み取ること<br>自慢できること：全国大会で銀賞を2回、yahooさんのハッカソンでも優秀賞を2回受賞しています。</blockquote><p><br></p><h2 id="haa024e407c">普段何してるの？</h2><p>実務でデザインエンジニアとして働きながら、趣味でアプリ開発をしています！<br></p><h2 id="h0520b8cd19">なぜWebデザインの専門学生からフロントエンドエンジニアへ？</h2><p>専門学校にてHTML, CSS, JavaScriptの授業があり、苦手を克服するために勉強を始めたのがきっかけで好きなものを自分で作れる楽しさにひかれプログラミングにはまってしまいました。<br></p><h2 id="h3bcda3e6b0">最後に</h2><p>この記事を読んで少しでも私やうぇぶスタに興味を持ってくれたら嬉しいです。ではまた！</p>

[メンバー紹介]うぇぶスタのシバイヌの紹介！

<p>大家好！！<br>私はうぇぶスタのダルメシアン「リョウ」です。<br>うぇぶスタではプログラミングについて発信しています。<br></p><h2 id="h9b7fc86181">プロフィール</h2><p>名前：梁逸東（リョウイットン）<br>出身：香港<br>趣味：旅行・アニメ<br>何してるの？：WEBデザイン・プログラミングを勉強しています！<br>得意なこと：目標に向かって突き進むこと。でも目標が無ければ適当にやる。<br>自慢できること：1人で日本で４年間生きていること<br></p><h2 id="hb5c7f12176">今何をしている？</h2><h3 id="h118073bf8b"><strong>・旅行！！！</strong></h3><p>来年は東京に就職します。社畜になる前に一所懸命遊んでいます。<br>沖縄、上高地、北海道など、学生のうちに行っておきたいです。社会人になったら仕事の大変さ・お金など、色々な悩みが溢れると思います。自由に旅行し、自分が生きたいように生きることはもうできない。だから今、毎日の生活を充実したいです。<br></p><h3 id="h64cec52943">・勉強したいことを勉強する！！！</h3><p style="padding-left:3em"><strong>運転免許</strong></p><p style="padding-left:3em">最近運転したいから、合宿で運転免許を取りに行きました。毎日お弁当しか食べなかったり、運転が下手すぎて教官にめっちゃ叱られたりして、大変でした。でも合宿で色々な人と出会って、ルームメートと一緒に勉強し、仮免一発で合格するのは楽しかったです。</p><p><br></p><p style="padding-left:3em"><strong>WEBプログラミング・デザイン</strong></p><p style="padding-left:3em">udemyで色々なコースを買いました。</p><p style="padding-left:3em">Figma UIUX Design, React, Typescript, PHP……</p><p style="padding-left:3em">udemyのコースが全部英語なので、英語の重要さがわかるようになりました。今私の英語のレベルでは全然ダメダメなことが気付きました。</p><p><br></p><h2 id="h45948e8a53">今後・目標</h2><p>今WEBプログラミングもできる、デザインもできるエンジニアになりたい。けど、将来何をしたい？私は全然わからないです。<br>今変化が激しい世代で生きていくには別に目標を持たなくていいのではないかと思います。良い波が来た時に飛び乗れるように、日々勉強し続けることが大事。<br>勉強は一生のことだからね！！<br></p><h2 id="h3bcda3e6b0">最後に</h2><p>将来のことは誰にも分からない。<br>やりたいことをやり、大事な人を大事にし，今の瞬間だけに生きよう！！<br>毎日自分探しというより、人生を楽しもうぜ！！</p>

[メンバー紹介]うぇぶスタのダルメシアンの紹介！

<h2 id="hd6b71a9c8d">そもそもペルソナの背景とは？？</h2><blockquote>ペルソナ法とは…調査などをもとにしてユーザーのデータを統合して架空の人物を記述しデザインに利用する</blockquote><p>という手法で、もともとクーパー社（ユーザーエクスペリエンスデザインと戦略のコンサルティング会社）を率いるAlan cooperによって生み出されました。<br>この概念の背景には、多くのユーザーに合わせて最大公約数的に機能を拡大していくと、結局誰にとっても使いにくいものになってしまうよね！という考え方があります。ここから、特定のユーザーを具体的に考慮することで、最終的にいろいろな人にとって使いやすいものを作れるという考えが導き出されました。<br></p><h2 id="h300f82494e">なぜペルソナをやるのか</h2><h3 id="ha9c11462b9">ユーザー視点の精度を高めることができる</h3><p>定量データや多くの情報をもとに詳細な情報まで設定したペルソナは、1つの人格のようなものです。ペルソナのニーズを満たすような製品を考えることは、そのほかの多くのユーザーのニーズを満たすことにつながり、結果的にユーザー視点の精度を高めることができます。ユーザー視点の精度を高め、ユーザーが求めるものを製品に集約すれば、製品の完成度を高めることにもつながります。</p><h3 id="ha071f2b158">ターゲットとなるユーザーに対する理解をより深められる</h3><p>結局プロダクトを使ってくれるのは「人」というお話が前回のワークの最初でありました。使ってくれる人すなわちユーザーが何を考え、どのような場面でどんな行動をするかを把握しておく必要があります。一般に商品企画を行う際には、年齢層や性別、居住地といった定量的な属性の組み合わせとして「ターゲット層」が定義されます。<br>たとえば女性向けの化粧品なら、「30代、女性、主婦、既婚者」といった具合ですね。しかし、こうした属性情報の組み合わせだけでは、生き生きとしたユーザーの姿を思い浮かべることはできません。そこで、ターゲットの属性情報に加えて趣味や性格、ライフスタイル、好きな雑誌…といった定性的な情報を肉付けし、よりあたかも実存する人物のようなペルソナを定義するのです。<br>ペルソナを定義しておくことで、カスタマージャーニーの検討やコンテンツ設計といった様々な場面で、「ペルソナのタナカさんならどうするだろう？」…というように、よりユーザーの視点に立って考えることができるようになります。</p><h3 id="h537169dc20">関係者の認識共有を促進できる</h3><p>属性情報の組み合わせであるターゲット設定だけでは、見る人によって解釈に差異が出てしまう懸念があります。具体的なペルソナを関係者全員で共有することで、認識のブレ幅を最小限に抑えることが可能となります。<br>担当者間で認識がズレたままでは、無駄な作業が発生したり、スケジュールが遅れるといったトラブルになりかねません。ペルソナという1人の代表的な人格を設定することで、異なる分野の担当者とも共通の人物像をイメージすることができ、効率よくプロジェクトを進行することができます。<br></p><h2 id="h19e008275e">ペルソナの作成方法</h2><p>ペルソナの作成方法は多岐に渡りますが、どんな方式であれ作成目的を達成できるかどうかを考えて書くことが大切になります。数あるペルソナ記述法の中で、今回の記事は<code>Putting Personas to Work in UX Design: What They Are and Why They’re Important</code>というAdobe社が出している記事を参照しています<br>こちらの記事→(<a href="https://xd.adobe.com/ideas/process/user-research/putting-personas-to-work-in-ux-design/" target="_blank" rel="noopener noreferrer">https://xd.adobe.com/ideas/process/user-research/putting-personas-to-work-in-ux-design/</a>）<br></p><h3 id="h1b83dce853">ユーザーに関する情報を収集する</h3><p>すでに決めてあるターゲットを対象に、インタビューやアンケートを行います。年齢などの基本情報から、プロダクトに関わる質問を聞きましょう。例えば、オンライン通販サイトに関するインタビューであれば、使用デバイス、買い物の内容、予算などなど聞いていきます。ここで完全な想像で作ってしまうと今後のプロセスが全て根拠のない情報の土台の上に出来上がってしまうので重要なパートです！</p><h3 id="h1c3d3e157a">調査データから行動パターンを特定する</h3><p>次は調査から分析パート！調査結果から多くのインタビュイーに共通しているような行動パターンを見つけます。例えば、上記に続いてオンライン通販サイトに関するインタビューの場合、複数の人が「商品を買う前に他のサイトも見にいっている」という行動を述べたとします。この人たちは他の質問に対しての回答は異なっているかもしれませんが、ここでより重要なのは違いよりも共通点なので「商品を買う前に他のサイトも見にいっている」ことは行動パターンとみなすことができます。</p><h3 id="hd999286b34">ペルソナを作成し優先順位を付ける</h3><p>ユーザーを理解するのに十分な理解と共感を表現するような方法でペルソナを作り上げましょう。このステップでは多くの個人情報をデタラメに追加することを避けます。詳細が多すぎると気が散り、分析ツールとしてのペルソナの信頼性が低下するからです。<br></p><h2 id="h8eb9c82481">ペルソナはいらない？（おまけ）</h2><p>今回の記事ではペルソナを開設してきましたが、ペルソナに関しては様々な意見があり、ペルソナばかりに頼ることに警鐘を鳴らす人もいます。理由としては、「結局は存在しない架空の人物でありその人を用いてプロダクト開発に活かすのは難しいから」以下引用です。（引用元：<a href="https://note.designing.jp/n/n12ebf3e00d33" target="_blank" rel="noopener noreferrer">https://note.designing.jp/n/n12ebf3e00d33</a>）</p><blockquote>私たちはペルソナに家族や職業、持ち家、車、ペットの有無などの特徴を与える。名前を、仮にテッドとしよう。プロダクト開発ではこのようなディスカッションが行われる。「テッドはこのプロダクトの機能を使うだろうか、気に入ってくれるかな？」「テッドのプロフィールから推測するに、これはテッド向きじゃないかもしれませんね」…テッドってそもそも誰だ？結局のところ、誰もテッドが何を気に入るか知らない。そもそもテッドは存在していないのだから。そんなことは当然だと思うだろう。しかし、理解しつつも、テッドが存在しないことを忘れてしまうケースは多い。<strong>細かい設定を加え、テッドを人間らしくするにつれ、私たちはテッドが実在しないという前提を忘れてしまう。無意識にテッドをステレオタイプに当てはめていることにも気づかない。</strong></blockquote><p>どれだけユーザー調査に基づいて作ったとしても、自分たちの都合のいいように設定をしてしまう危険性があるということです。そんな事態を避けるためペルソナ・スペクトラムという方法を提唱しいている方もいらっしゃいます。詳しくは上記の文章を引用元であるこちらの記事をご覧ください。<br><br></p>

なぜペルソナを作成するの？

<p>ピンボケしていた。<br>何故か襟元にピントが合っている。<br><img src="https://images.microcms-assets.io/assets/d9db883bc929477a9cbafcb351fa25df/9a6629ce4a8241c0ae7c77bd8dbb80bc/1664152039140-5cXu5OXZXI.webp" alt=""><br>でも被写体さんの表情や角度が素敵だし、玉ボケもバランスいいし、ボツ<br>にするのはあまりにも勿体ない。<br>なんならこれは夜ポトレなので、オールドレンズ風の柔らかいレタッチも上手くいかなさそう。<br>被写体さんを活かし、暗さを活かし、納得いくレタッチを探しているとたどり着きました。<br><img src="https://images.microcms-assets.io/assets/d9db883bc929477a9cbafcb351fa25df/b088936e9a9e4c938463d253bcc8af3c/1664152521259-SrzZkhiO0Y.webp" alt=""><br><strong>必殺・モノクロ</strong><br>やり方は簡単。調整レイヤーで<strong>白黒</strong>を選択します。<br><img src="https://images.microcms-assets.io/assets/d9db883bc929477a9cbafcb351fa25df/6bbc37a95e404f4aa4a8cdd632cc8a17/monochrome_1.png" alt=""><br>その時点で白黒に変わるので、あとはプリセットより、好きな濃度を選ぶだけ。<br><img src="https://images.microcms-assets.io/assets/d9db883bc929477a9cbafcb351fa25df/bdfeeb569de54d98aa02e5aa20c822ef/monochrome_2.png" alt=""><br>都会的でかっこいいポートレートに仕上がりました！</p>

【Photoshop】ピンボケしちゃった！でもいい感じにしたい時のレタッチ

<p>こんにちは！今回はアニメーションでめちゃくちゃ重宝するバウンズアニメーションを簡単に付ける方法を紹介します。</p><h2 id="h5c3efc7b40">バウンズアニメーションって？</h2><p>バウンズアニメーションは緩急のある動きや跳ね返りなどで使えるアニメーションです。これが無いとかなり不自然なアニメーションになってしまいます。<br><br><img src="https://images.microcms-assets.io/assets/d9db883bc929477a9cbafcb351fa25df/dad3814f09714a9e8d3eeea85fe8dc35/%E3%83%8F%E3%82%99%E3%82%A6%E3%83%B3%E3%82%B9%E3%82%99%E3%82%A2%E3%83%8B%E3%83%A1%E3%83%BC%E3%82%B7%E3%83%A7%E3%83%B3%E3%81%AA%E3%81%97.gif" alt=""><br>バウンズアニメーション無し<br><br><img src="https://images.microcms-assets.io/assets/d9db883bc929477a9cbafcb351fa25df/2be2e89cea7b45f38f6f68e39e2d9fc6/%E3%83%8F%E3%82%99%E3%82%A6%E3%83%B3%E3%82%B9%E3%82%99%E3%82%A2%E3%83%8B%E3%83%A1%E3%83%BC%E3%82%B7%E3%83%A7%E3%83%B3%E3%81%82%E3%82%8A.gif" alt=""><br>バウンズアニメーションあり<br><br>見てもらったらわかる通り、これだけの差が出ます。</p><h2 id="hb3884229f4"><br>適応方法</h2><p>適応方法は簡単でエクスプレッションの機能(位置のプロパティの上でOptionを押しながらクリック)を使い、下のテキストを貼り付けるだけです。</p><blockquote>amp = .1;<br>freq = 2.0;<br>decay = 8.0;<br>n = 0;<br>time_max = 4;<br>if (numKeys &gt; 0){<br>n = nearestKey(time).index;<br>if (key(n).time &gt; time){<br>n--;<br>}}<br>if (n == 0){ t = 0;<br>}else{<br>t = time - key(n).time;<br>}<br>if (n &gt; 0 &amp;&amp; t &lt; time_max){<br>v = velocityAtTime(key(n).time - thisComp.frameDuration/10);<br>value + vampMath.sin(freqt2Math.PI)/Math.exp(decayt);<br>}else{value}</blockquote><p><br>他にもMotion Toolsというプラグインをダウンロード(40$)すればボタン一つで適応することもできるのでもっとアニメーションを追求したいという人は是非！！<br><a style="color:inherit" href="https://motiondesign.school/products/motion-tools/" target="_blank" rel="noopener noreferrer"><strong>Motion Tools - Motion Design School</strong></a><a href="unsafe:[object Object]" target="_blank" rel="noopener noreferrer">Our exclusive After Effects Script contains only the most nec</a><br><a href="https://motiondesign.school/products/motion-tools/" target="_blank" rel="noopener noreferrer">motiondesign.school</a><br></p>

[After Effects]たった5秒でバウンズアニメーションを付ける方法！

<p>こんにちは！岡崎です！<br>今回は実務などで使用するwebアプリ開発者が知るべき最低限のHTMLタグを紹介していきたいと思います！</p><h2 id="h4f1c94b5cd">注意書き</h2><ul><li>記事の内容は記載当時であることに注意してください．</li><li>フロントエンドエンジニアである場合は<code>detailsタグ</code><span style="color:#1b1b1b">や</span><code>dialogタグ</code><span style="color:#1b1b1b">, </span><code>articleタグ</code><span style="color:#1b1b1b">などのタグを理解し，セマンティックWEBを心掛けるべきですので，記事で触れるタグはもちろんですがそれ以外のタグについて知っておく必要があると筆者は考えています．</span></li><li>本記事では，<a href="https://www.w3.org/TR/wai-aria-1.2/" target="_blank" rel="noopener noreferrer">WAI-AREA</a>などについては触れないものとする</li></ul><h2 id="h8ee2171751">重要度（★★★）</h2><h3 id="hbcce64804e">h1 ~ h6タグ</h3><p>見出しに使用します．<br>原則コンテンツ構造的に不自然にならないように使用しましょう．</p><pre><code>h1
├ h2
└ h2
&nbsp; ├ h3
&nbsp; ├ h3
&nbsp; └ h3</code></pre><h4 id="h698f6d872c">h1</h4><p>ロゴやサービス名などに使われることとが多い．<br>ページのタイトルということでブログなどの大見出しにも使用されることがある．<br>※正解はないのでコーディングする人のこだわりや思想によって使用場所が異なります．</p><h4 id="h7eef1ce917">自分の思想</h4><blockquote>h1は原則ヘッダーなどに存在するロゴに使用しています．<br>ブログの記事ページなど，内容がタイトルとして表すことができる場合はブログのタイトルにも使用していたりします．<br>HTMLの使用では複数配置することは可能ですが，原則1ページに1つがベストプラクティスとされています．<br>スクリーンリーダーを使用するユーザーにとって大見出しが複数ある場合混乱を招いてしまう場合があるので事情がない場合は1つにしたほうが良いでしょう．</blockquote><h3 id="heea0674248">pタグ</h3><p>文字を挿入する際に使用します．<br>段落を意味することが多いです．</p><h3 id="hf1a0551da1">aタグ</h3><p>押下するとページ遷移するリンクを生成することができます．<br><code>href属性</code>にURL，<code>target属性</code>を指定することによってタブに暗黙的な名称を付けたり新規タブで開くことができる．</p><pre><code>&lt;a href="https://" target="_blank"&gt;リンク&lt;/a&gt;</code></pre><h4 id="h3304772cd9">aタグを使用するメリット</h4><p>aタグを使用することでスクリーンリーダーを使用しているユーザーに遷移するリンクというのが伝えることができる．<br><code>Tabキー</code>でフォーカスができ，<code>Enterキー</code>で遷移することができるためアクセシビリティを考慮した実装を自前でする必要がなくなる．</p><h3 id="h43708af002">buttonタグ</h3><p>押下すると動作するボタンを生成することができます．<br>ユーザーが押せるボタンは原則<code>buttonタグ</code>で作成してください．（単純にアクセシビリティやユーザービリティが良くなり，ユーザー体験が向上します．）<br>※押せないボタンを実装する場合は<code>disable属性</code>を付与するだけで実装するべきものが減る<br>特定の条件下で<code>type</code>を指定しなかった場合は<code>submit</code>が付与されたりするのでそれを避けるために<code>type属性</code>をつけるのを癖づけましょう．<br><a href="https://github.com/jsx-eslint/eslint-plugin-react/blob/master/docs/rules/button-has-type.md" target="_blank" rel="noopener noreferrer">reactのルールではtype属性を指定しないとエラーが出たりします．</a></p><pre><code>&lt;button type="button"&gt;ボタン&lt;/button&gt;</code></pre><h4 id="h6d3d968be0">aタグを使用せずに全てbuttonタグで実装しても良いのでは？</h4><p>画面遷移を<code>buttonタグ</code>でしてしまうとスクリーンリーダーを使用しているユーザーは想像しづらくなってしまうため使用方法によってタグを考える必要があります．</p><h3 id="h347cfa40ab">imgタグ</h3><p>画像を埋め込むことができるタグです．<br><code>src属性</code>に画像のパス，<code>alt属性</code>には画像が見えない人でもわかる文字を挿入してください．<br>また，ただのアイコンの場合でも<code>alt属性</code>は空文字だけでも指定するようにしてください．</p><pre><code>&lt;img src="画像のパス" alt="画像を説明する文章" /&gt;</code></pre><h4 id="h52bdbbfc31">alt属性の使用上の注意</h4><p>alt属性に文字を指定することで，画像が表示できなかった場合やスクリーンリーダーを使用した場合に画像の代わりに表示することができます．<br>空文字を指定することで画像に意味がないことを明示的に示すことができる．<br>また，スクリーンリーダーを使用した場合に読み上げを飛ばすことができる．</p><h3 id="h374983f2a5">divタグ</h3><p>レイアウトを取るために使用します．</p><h3 id="hb3864da3e2">spanタグ</h3><p>文字列の中で特定の位置にスタイルを当てたい場合に使用します．</p><pre><code>&lt;p&gt;〇〇を導入後、CVRが&lt;span&gt;30%向上&lt;/span&gt;しました！&lt;/p&gt;</code></pre><h2 id="h18f29d2271">重要度（★★）</h2><h3 id="h7ba8a4160a">formタグ</h3><p>小要素に<code>input</code>や<code>textarea</code>などの要素がある場合，submitすることでURL先に情報を送信する．<br><code>Enterキー</code>で送信されたり，<code>button[type=submit]</code>を使用することで<code>action</code>先にページリクエスト（リダイレクト）が行われる．<br>近年のwebアプリではrestful apiを用意しjsonを取得，フロントエンドに反映するパターンが多いため，その場合はeventを取得しpreventDefault()でデフォルトの挙動を無効化することが多いです．<br>※<code>php</code>や<code>rails</code><span style="color:#4d5156">などのviewファイルを</span><code>HTML</code><span style="color:#4d5156">直書きしている場合を除きます</span></p><pre><code>document.querySelector('form').addEventListener('submit', (event) =&gt; {
	event.preventDefault();
})</code></pre><h3 id="hc47193e1ed">inputタグ</h3><p>ユーザーが入力できる要素を生成します．<br>type属性をにinputの種類を指定することで数字だけのキーボードが出るようにしたりできます．<br>required属性を付与することで，入力がされていない場合のバリデーションをブラウザ単位でサポートすることができます．<br>placeholder属性に文字を入れることで入力前に薄く表示される文字を設定することができます．積極的に使用しましょう．</p><pre><code>&lt;input type="range" id="volume" name="volume" min="0" max="11" required /&gt;</code></pre><h3 id="h3a2f2dfffc">textareaタグ</h3><p>ユーザーが複数入力できる要素を生成します．<br>基本的にはinputタグと変わりありません．</p><h2 id="h03561720b8">重要度（★）</h2><h3 id="h75ffbda894">labelタグ</h3><p><code>inputタグ</code>や<code>textareaタグ</code>，<code>selectタグ</code>などの操作対象のタイトル?ラベル?に使用します．<br>pタグではなくlabelタグを使用することで文字をタップした場合のfocusの挙動が操作対象の要素に移るため，単純に使いやすくなり使用を推奨しています．</p><pre><code>&lt;label htmlfor="inputName"&gt;名前：&lt;/label&gt;
&lt;input id="inputName" /&gt;</code></pre><h3 id="hf18691eb29">brタグ</h3><p>改行することができます．</p><pre><code>初めまして，&lt;br /&gt;〇〇です．</code></pre><h2 id="hfa6daccb2d">セマンティックwebを意識する場合に知っておいたほうが良いタグ</h2><h3 id="h3be89268d1">セマンティックwebとは</h3><blockquote><span style="color:#000000">Webページに記述された内容について、それが何を意味するかを表す「情報についての情報」（</span><a style="color:#3344ff;background-color:#fcfcfa" href="https://e-words.jp/w/%E3%83%A1%E3%82%BF%E3%83%87%E3%83%BC%E3%82%BF.html" target="_blank" rel="noopener noreferrer"><strong>メタデータ</strong></a><span style="color:#000000">）を一定の規則に従って付加し、コンピュータシステムによる自律的な情報の収集や加工を可能にする構想。</span><br>セマンティックWebとは - 意味をわかりやすく - IT用語辞典 e-Words ( https://e-words.jp/w/セマンティックWeb.html )</blockquote><p>e-Wordsさんから引用しました．<br>要は単にHTMLを書くだけではなく，意味付けを意識したコーディングを意識することで<a href="https://gmotech.jp/semlabo/seo/blog/crawler_measures/" target="_blank" rel="noopener noreferrer">クローラー</a>にも認識されやすいことからSEO的にも良く，スクリーンリーダーの読み上げが変わる場合があるのでアクセシビリティ的にもより良い実装をすることができます．</p><h3 id="hdf68ac8090">headerタグ, mainタグ, footerタグ</h3><p><img src="https://images.microcms-assets.io/assets/d9db883bc929477a9cbafcb351fa25df/95428dec5b6547248a64003da3cd1240/image.png" alt=""></p><h3 id="h9cc1cae3d7">navタグ</h3><p>ナビゲーションに使います．<br>例：ヘッダーのナビゲーションリンクやパンクズリストに使用します．</p><pre><code>&lt;nav class="crumbs"&gt;
&nbsp; &nbsp; &lt;ol&gt;
&nbsp; &nbsp; &nbsp; &nbsp; &lt;li class="crumb"&gt;&lt;a href="#"&gt;Bikes&lt;/a&gt;&lt;/li&gt;
&nbsp; &nbsp; &nbsp; &nbsp; &lt;li class="crumb"&gt;&lt;a href="#"&gt;BMX&lt;/a&gt;&lt;/li&gt;
&nbsp; &nbsp; &nbsp; &nbsp; &lt;li class="crumb"&gt;Jump Bike 3000&lt;/li&gt;
&nbsp; &nbsp; &lt;/ol&gt;
&lt;/nav&gt;</code></pre><h3 id="h614ce0e5a1">sectionタグ</h3><p>文章の見出しと本文を囲うタグとして使用します．</p><h3 id="hb6dddde4c7"><span style="color:#1b1b1b">detailsタグ</span></h3><p><code>detailsタグ</code>は<code>summaryタグ</code>と合わせて使用します．<br>アコーディオンメニューを作成する際にjavascriptを使用し作成することが多いですが，javascriptで作成してしまうとスクリーンリーダーの挙動が実装頼りになってしまいますがdetailsタグを使用することで正しく読み上げが行われます．<br><img src="https://images.microcms-assets.io/assets/d9db883bc929477a9cbafcb351fa25df/07b822e89e36432396562383b4e22981/image.png" alt=""></p><h2 id="ha214098e44">まとめ</h2><p>以上よく使う / 知っておいたほうが良いタグを紹介しました！<br>他にも<code>articleタグ</code>や<code>figureタグ</code>，<code>tableタグ</code>などさまざまなタグがありますが必要に応じて調べて使用するくらいの認識で大丈夫だと思います！<br>また，フロントエンドエンジニアとして仕事をしていく場合は一度<a href="https://developer.mozilla.org/ja/docs/Web/HTML/Element" target="_blank" rel="noopener noreferrer">HTMLのタグ一覧</a>を確認してみてもいいかもしれません！<br>読んでいただきありがとうございました！</p>

WEB開発者が知るべき最低限のHTMLタグ一覧

<p>長いことブログをやっていたのでRSSの存在は5億年前から認知していましたが、やっとのことで手をつける気になりました。遅い。</p><h2 id="h55b62d5072">RSSのURLを取得</h2><p>まずはRSSのURLを取得します。PCだとここ。<br><img src="https://images.microcms-assets.io/assets/d9db883bc929477a9cbafcb351fa25df/86db7eee0e9346d4a6690a9b7a1ab88e/picture_pc_cb121d2c067b44c3a76718f43e16f1a2.webp" alt=""><br>「RSS」をクリック<br>以下のURLがもらえます。</p><pre><code>https://note.com/{ユーザーID}/rss.xml</code></pre><h2 id="h99b702cc26">PHPを書く</h2><p>XML形式をJSONに変換する&amp;CORSを突破するために以下のPHPを書きました。</p><pre><code>&lt;?php
  $api = "https://note.com/3go_moon/rss.xml";
  $options = array("http" =&gt; array(
    "header" =&gt; "Content-type: application/json",
  ));
  $xml = file_get_contents($api, false, stream_context_create($options));
  $json = simplexml_load_string($xml);
  header( "Access-Control-Allow-Origin:*" );
  echo json_encode($json);</code></pre><h2 id="hed15d9d0c8">fetchして情報を取得する</h2><p>noteのRSSからは、記事ごとに</p><ul><li>URL</li><li>タイトル</li><li>投稿日</li></ul><p>の3つを取得することができます。<br>加えて、note自体のタイトルやURLももらえます。</p><pre><code>// src/types/note.ts

export type Note = {
  description: any[];
  guid: string;
  link: string;
  pubDate: string;
  title: string;
};

// src/components/Note.tsx  

const Note: FC = () =&gt; {
  const { data, error } = useSWR('PHPのURL', fetcher);

  let item: Note[] = [];
  let noteUrl = '';

  if (data) {
    item =  data.channel.item;
    noteUrl = data.channel.link;
  }

  return (
    ...
  );
};

export default Note;</code></pre><p>カバー画像などは取得できないようで、それぞれOGPから引っ張ってくる処理をmapで回すやり方を模索中です。。</p>

【初めてのポートフォリオ】RSSを取得してnoteを埋め込んだ【PHP/Next.js】

<p><br>専門学校の卒業が近づく中で、いい加減にPHPを学校のサーバーから脱出させないとなと思っていました。<br>試行錯誤の上やっとHerokuでデプロイすることができたので備忘録として残しておきます。<br>今回はGitHubと連携させ、コミット&amp;プッシュすることで自動的にHerokuにもデプロイされるようにします。</p><h2 id="h4cc94ef7e8"><strong>Herokuの環境をセットする</strong></h2><p>アカウントを作り、heroku CLIをインストールします。<br>公式が一番わかりやすいです。<br><a href="https://devcenter.heroku.com/ja/articles/getting-started-with-rails5#local-setup" target="_blank" rel="noopener noreferrer"><em>devcenter.heroku.com</em></a></p><h2 id="h6dce4e8353"><strong>GitHubでリポジトリを作る</strong></h2><p>GitHubへの登録に関してはスキップします。<br>いつも通りにリポジトリを作成しましょう。<br><img src="https://images.microcms-assets.io/assets/d9db883bc929477a9cbafcb351fa25df/6cbfb3a77b7b45d9b09298bd0c0d4582/1661510642824-9SKV2wXA2l.png" alt=""><br>この画面で待ちます。</p><h2 id="h0c89ceb05c"><strong>PHPファイルを作る</strong></h2><pre><code>hoge
└ index.php</code></pre><p>ファイル構造は以上のように、index.phpというタイトルのものを<strong>必ず</strong>含ませないといけないようです。</p><h2 id="hdd8f8d76b2"><strong>PHPファイルとGitHubを連携させる</strong></h2><pre><code>$ git init
$ git remote add origin {.gitで終わる該当リポジトリのURL}
$ git add .
$ git commit -m "プッシュ時のコメント"
$ git push origin master</code></pre><p>ターミナルに打ち込んで、リポジトリにプッシュします。</p><h2 id="hfd96d5573a"><strong>Herokuで作成したAppとGitHubリポジトリを連携させる</strong></h2><ul><li>Herokuのダッシュボード（<a style="color:inherit" href="https://dashboard.heroku.com/apps" target="_blank" rel="noopener noreferrer">https://dashboard.heroku.com/apps</a>）に行く</li><li>Create new appを選択する</li><li>App nameを入力／Choose a regionは<strong>触らずに</strong>Create Appを選択する</li></ul><p><img src="https://images.microcms-assets.io/assets/d9db883bc929477a9cbafcb351fa25df/c470eea0d6da46648081b82bbaab63a3/1661510962872-uJq7AHbfnm.webp" alt=""></p><ul><li>https://dashboard.heroku.com/apps/{入力したApp&nbsp;name} &gt; Deploy &gt; Deployment methodでGitHubを選択する</li><li>Connect to GitHubで、先ほど作ったGitHubのリポジトリを検索する</li></ul><p><img src="https://images.microcms-assets.io/assets/d9db883bc929477a9cbafcb351fa25df/96c1b014e3784d1dba465ec2fa0ef588/%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%BC%E3%83%B3%E3%82%B7%E3%83%A7%E3%83%83%E3%83%88%202022-08-26%2019.55.png" alt=""></p><ul><li>リポジトリ名の右側にあるConnectを選択する</li><li><strong>Enable Automatic Deploys</strong>というボタンが出るので、選択する</li><li><strong>Disable Automatic Deploys</strong>という表示になればOK</li></ul><p>Herokuの設定は一旦終わりです。</p><h2 id="ha2d132c6ae"><strong>PHPファイルとHerokuを連携させる</strong></h2><pre><code>$ heroku git:remote -a {Herokuで入力したApp&nbsp;name}
$ git push heroku master</code></pre><p>以上で設定は完了です。<br>Heroku &gt; dashboard &gt; Appを選択 &gt; 右上の<strong>Open app</strong>でデプロイできていることを確認してください。<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br></p>

MacBook に入れた方が良いアプリ 23選

色はなぜ見えるのか?

[メンバー紹介]うぇぶスタのネコの紹介！

[メンバー紹介]うぇぶスタのシバイヌの紹介！

WEB開発者が知るべき最低限のHTMLタグ一覧

なぜペルソナを作成するの？

【Photoshop】ピンボケしちゃった！でもいい感じにしたい時のレタッチ

[After Effects]たった5秒でバウンズアニメーションを付ける方法！

WEB開発者が知るべき最低限のHTMLタグ一覧

【初めてのポートフォリオ】RSSを取得してnoteを埋め込んだ【PHP/Next.js】

【PHP初学者】Herokuでdeployしてみる

[メンバー紹介]うぇぶスタのネコの紹介！

[メンバー紹介]うぇぶスタのシバイヌの紹介！

[メンバー紹介]うぇぶスタのダルメシアンの紹介！