What's New Qiita

20200912のHTMLに関する記事は13件です。

  • 投稿日：2020-09-12T21:16:16+09:00

【初心者でもわかる】画像の上に半透明の背景と文字を乗せる方法

どうも7noteです。画像の上に文字を表示させたい時の方法

こんな感じに写真の上に文字が乗ったデザインを作ります。

sample.png

作り方

作り方は、画像と文字をくくる親要素を作り、position指定で好きな位置に文字をもってきます。

index.html
<div class="onimg">
  <img src="sample.jpg" alt="画像名">
  <p>画像の名前が入るよ</p>
</div>
style.css
.onimg {
  width: 300px;        /* 画像の横幅（自由に指定） */
  position: relative;  /* 帯の表示位置の基準とする */
}

.onimg img {
  width: 100%;
}

.onimg p {
  color: #fff;
  text-align: center;
  width: 100%;         /* 画像の幅に合わせるため */
  padding: 10px 0;
  position: absolute;  /* relativeの要素を基準にする */
  left: 0;             /* 基準からみて左寄せ */
  bottom: 0;           /* 基準からみて下寄せ */
  background: rgba(0,0,0,0.5);  /* 半透明の背景。 */
}

解説

親要素の.onimgに対してposition: relative;を指定します。
そのうえで子要素のpに対してposition: absolute;を指定することで、画像の上に半透明の背景付きで文字を表示することができます。

また、半透明にする時にopacityを使ってしまうと文字も半透明になってしまうので、rgba()で半透明の背景を指定します。
rgba()は左からrgba(赤色,緑色,青色,透明度)の順番で指定します。今回は黒の透明度50%にしたのでrgba(0,0,0,0.5)となります。

おそまつ！

~ Qiitaで毎日投稿中!! ~
【初心者向け】HTML・CSSのちょいテク詰め合わせ

  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む
  • 投稿日：2020-09-12T18:50:18+09:00

【初学者向け】TECH:CAMPに通って、WEBアプリ制作までの記録

自己紹介

私は、平日は会社に勤務している２３歳のサラリーマンです。
自動車のエンジン関係の仕事に従事しており、
仕事では、会社既存のソフトを扱ったりエクセルで資料作ったりする程度。
当時、キーボードは人差し指と中指のみで入力していたくらいで
パソコンはあまり得意ではありませんでした。

そんな男性のWEBアプリ制作までの記録です。

.
当記事は、WEBアプリを初めて作成される方に向けて参考になればと思い書きました。
技術的なことは、ほとんど載せていません。
「へー、こんな感じで取り組んだんだー」　程度に見ていただければ幸いです。

なんでTECH:CAMPに入ったの？

１度、プログラミングの独学に挑戦したのですが、１週間で挫折してしまったからです。

2019年の8月に、あるプログラミングに関する動画を何気なく見たときに、
「あれ、これ俺にも出来そうじゃね」
とか動画を見ただけで「できそう」と勝手に思ったのが始まりです。

書店にあったJavaScriptの参考書を購入し、
最初のページからちまちまと取り組んでいきました。
学習1、2日目は、今までで知らなかったことを手を動かしながらできる感覚が
面白いと感じていたのですが、3、４日目からだんだんとやる気がなくなっていきます。

結局、人生初のプログラミング独学は、１週間で幕を閉じてしまいました。

.
それから2020年3月、マコなり社長の動画を何本か見た時に
「プログラミング学習、再開してみようかな」と思っていたのですが、
なかなか思い切ってやってみよう！と言う気にはなれませんでした。

しかし、この動画が決め手となり、入会を決意します。
:point_right:人生おもしろくない人が「今すぐ」やるべきこと

動画の中で「ポチる」と言う言葉の矢が胸に刺さり、
刺さった勢いでTECH:CAMPのスクールまで飛んで行きました。

.
ちなみに私が入会したのは
プログラミング教養コース です。
エンジニア転職コース とは別なので
ガチで転職を考えている方は下記の記事を参考にしていただければと思います。

:point_right:テックキャンプに通ってエンジニア転職した人の感想

WEBアプリ制作までにやったこと（基礎〜応用）

基礎カリキュラム

TECH:CAMPのWEBコースにあるカリキュラムを順番に取り組んでいきました。
やってきた言語は大きく以下の３つです。

  • HTML
  • CSS
  • Ruby(Ruby on Rails)

これらをカリキュラムの順番通りに進めていきました。

TECH:CAMPでは「学習進捗表」という、
1日の学習時間の記録やカリキュラムの進捗を「見える化」したシートが用意されています。
大体どのくらい取り組んだか振り返ってみると以下の通りです。

  • HTML/CSS 　　　　:15+10　=　25時間
  • Ruby(Ruby on Rails) :28+49　=　77時間

足算になっているのは、カリキュラムを２周したからです。

１周目は「プログラミングはこんな感じなんだー」
という感じで、さらっと流す程度に取り組んでいきました。

と、言いたかったのですが、これは１周目 後半の話し。
実は、１周目の前半は一言一句覚えようとなかなかクレイジーなことをしていました。

何をしていたかというと、
「これは覚えられそうにないな…」と思ったことをメモ帳に書き込んでいたのです。
スクリーンショット 0002-09-11 午後7.49.57.png

画像をよくみると、左上のスクロールバーが豆粒になるくらい
書き込んでいました。

「え、別に何の問題もないんじゃ・・・」
.

断言します。
ダウンロード.jpeg

『メモ、ちょーいらん』

メモと言うより、「覚え書き」と言う方が適切ですかね。
義務教育でやってきた、先生が黒板に書いたことを
そのまま書き写すような行為は、無駄だと言うことに気付きました。
考えてみれば、昔書いたノートを見返すのは、テスト前くらいで
毎回、見返すことって全くなかったです。
このメモは５ヶ月ぶりに開きました。（ﾅﾝﾃｺｯﾀー）

書いてあることを写すやり方は、
「あー勉強したー」と学習の充実感を味わえるのですが、
記憶の定着が少ししかできないことに加え、
見返さないので、意味がない行動だったと言えます。

.
では、どのようにして覚えていたか？

私の場合は、コードを書きながら覚えていきました。
例えばこんな感じです。

「スクレイピング」を覚えようとした時…
（ウェブサイトから情報を取得し、その情報を加工して新たな情報を生成すること）

ダウンロード (1).gif

このように、ある機能や仕組みについて覚えようとするときは、
実際にやってみて、それがどういうものなのか「やりながら、覚える」ようにしてきました。
実装して「できた」という感覚に、できたことの概要をリンクさせるイメージです。
スライド1.jpeg

１周目の後半からは、カリキュラムに書いてあることを２〜３割程度わかればいいや　
と言う感覚で進めました。

.
２周目は、
１周目で理解できていなかったところを復習していきました。
２周目はざっくりとしたことは覚えているから、スムーズにいけるだろう
と思っていたのですが、そうはいきませんでした。

「わからないところありすぎて、全然理解できでないじゃん…」

前、覚えたところを、もう忘れてる。
そんな自分を情けなく思う時がありました。

このようにネガティブに思っていた時は、
学習の意欲が沸きにくくなり、思うように進まない日も…

TECH:CAMPには、メンターと呼ばれる、学習のコーチが学習のサポートだけでなく、
進捗のサポートや学習の悩みを解決する手助けをしていただけます。

そのメンターに相談をして、自分なりに導き出した解決策は、

「わからないところ多くてもいいじゃん、人間だもの」
と考えることです。

わからない「もやもや感」から生まれるストレスは、これもまた義務教育でやってきた
「テスト対策の暗記学習」が根付いていたからです。
覚えていないと点数が取れない　のと似たように、
覚えていないと学習が進まない　と思っていたことが原因でした。

プログラミングはわからないことがあっても
「カンニングOK」なのです。

わからないことは頭を抱えてうーんって悩むよりも
Googleでカンニングをして解決する方が時間の効率化と悩む時間の削減に繋がります。

もっと気楽に学習してもいいと言うことを学びました。

応用カリキュラム

ここでは、カリキュラムで用意されたWEBアプリのお手本を参考にしながら
なるべく自分の力で実装する学習をやってきました。
スクリーンショット 0002-09-12 午前8.59.13.png

学習時間は、復習も兼ねて約１３５時間かけてカリキュラムを終えました。
応用という言葉通り、基礎よりも内容が難しくなり、
出来た時の嬉しさ２倍に対して、悩む時間２倍といった感覚です。

悩む時間が２倍と言うことは、メンターに質問することも２倍になった？
かと言うと、逆に1/2に減りました。

応用カリキュラムに入ってからは、エラーの原因が大体これかなーと
「仮説」をたてて解決できるようになるからです。

エラーの解決をどのようにしてきたか　に関しては、
この後のWEBアプリ制作過程の中でお伝えします。

基礎、応用学習を終えて

ここから、いつか実現させたかったWEBアプリの制作に取り組みました。

私が制作したオリジナルWEBアプリはコチラです。
:point_right: Unsung:hero
image.png
image.png
image.png

どんなWEBアプリかというと、「企業を簡単に紹介する」WEBアプリです。
Wikipediaのページから指定した物だけをスクレイピングしてデータベース（以下DBと省略）
に保存、一覧に表示させたり、編集、検索したりできます。

WEBアプリを作る前に

WEBアプリをつくる前に、
そもそもの目標（この学習を通してどうなりたいか）を振り返ってみます。

私の目標は２つありました。

1つは、「自分の手でプログラミングをして何か作ってみたい。」
もう1つは、「学んだスキルを仕事に活かしたい。」

この2つの目標が、プログラミングに取り組む「原動力」でもありました。
パソコンに向かった時にいつも「目標」を思い出していました。

私の場合、
「このスクレイピングってやつを使いこなしたら、めっちゃいいもの出来そう！」
「このアプリ制作で学んだスキルが、きっと誰かの役に立つアプリやツールが作れる！」
と言った感じですかね。

実を言うと、目標ではないのですが、
目的に「モテたい」という思いがちょっとあったのも事実です。（←おい）

（心の声）
.
「プログラミングできる俺、超イケてる。」
「スタバでMac広げて、ブラインドタッチしてる俺、まじかっこうぃぃ」

thmb-0l.png

あれ、なんでWEBアプリなんか作っているんだっけ？
とやっていることの目的を見失ってしまうことがあります。
主に解決できないエラーにつまづいたり、明確なビジョンが浮かばなかったり
した時がそうだと思います。

私は、行き詰まったとき、自分のなりたい姿を思いだしていました。

目標のイメージは、創作活動の「原動力」に繋がります。

どんなWEBアプリを作るか

ここからは、どのような制作過程で取り組んだかまとめました。
.

最初から、これを作りたい！とアイデアがあればこのステップは問題ないですが、
０から作ろうとするといろいろなことを考えてしまいます。

「途中で挫折しないように、自分が製作できる程度のWEBアプリにしよう！」
「でも、自分ができる程度ってどんな程度？　これなら？　あれなら？」

頭がガッチガチに固まってたので、メンターに助けを求めた時に
このような回答が返ってきました。

『作りたいもののアイデアがない時は、身近な問題解決に着目するのがよいと思います。』

例えば、
「近くのキャンプ場は行きつくしたから、穴場のキャンプ場とかないかな…」
→と思っている方向けに、キャンパー同士で情報交換ができる掲示板のサービス

「明日は彼女とドライブデート！　でも、俺って流行りの音楽とか良くわからないからな…
流石に俺の好きなオペラとか流したら引かれるよな…　どうしよう…」
→と困っている方には、Youtubeから流行りの音楽を自動で取り込み、
　シャッフルして再生するサービス

と、日常の中で起こりうる問題や困りごとを解決するものに着目します。　

.
.
なるほど…

私の場合は、「あれ、この企業って何してる会社だっけ？　知りたーい」
と思うことがあったので、簡単に企業を紹介、閲覧できるWEBアプリの制作に着手しました。

もし、アイデア出しの段階で躓いている方は、
『困っている人の役に立ちそうなもの』を作ってみてはいかがでしょうか？

私の作ったWEBアプリは正直、人の役には立っていません。
ですが、もしこれを使ってくれる人がいて、何かの役に立っているところを想像しながら
取り組むことで、モチベーションの維持、向上に繋げてきました。
picture_pc_1654cd691caca499314fe530f62c98b7.jpg

設計

どのようなアプリにするか考えがまとまったら、画面の設計に移りました。

まずは、お手本を探す

「画面の設計かー。とりあえず、雰囲気を掴むためにいろんなウェブサイト見て回ろう！」

…うん
.
.
…なるほど、

スクリーンショット 0002-09-06 午後3.45.10.png
「たくさんアリスギィ！！」

初心者だった私には、参考にするものが多過ぎて
何を参考にしたらいいかわかりませんでした。

ここで、問題だったのが『複雑なサイト』ばかりを参考にしていたことです。
取りあえず、超シンプルなサイトを参考にすることにしました。

ちなみに、私が参考にしたサイトはコチラです:point_down:

.
私は、設計のお手本探しの段階では、

  • 自分が制作できそうなシンプルなサイトを調べまくる。
  • 作れそうなのレイアウトのイメージが決まったら、参考にするサイトを１個に絞る。

という流れで取り組みました。

参考にするサイトを１個に絞った理由としては、
「あ、このサイトお洒落だしここを取り入れたいな！」
「うわ、この写真が動くやつかっこいいやん！　これもいいなー」

とお手本にする候補が定まらなくて、めちゃくちゃ時間が掛かったからです。
決めるのはあくまで「大まかなレイアウト」です。

…細かい機能は後から追加できることに、途中で気づきました。

レイアウトを紙に書き出す

レイアウトのイメージが思い浮かんだら、整理しやすくするためにアウトプットが重要です。
デザインツールやワイヤフレームを作るアプリを活用してみようと思ったのですが、
すぐに取り掛かりたかったので、紙に書き出すことにしました。
78F6AB65-B5ED-4979-A6B6-6FE7CBFDD7A4.png
IMG_0527.jpg

写真のように、紙1枚につき、1つの画面を書いて整理していきました。

データベースの設計

まず、アプリを制作する前にどんなデータが必要か整理しました。
image.png
:point_up:1度廃案にしたWEBアプリのデータベース設計時につくった
　必要になりそうな情報リストです。
（紹介したWEBアプリの設計図はほとんど描いていなかったので、これで勘弁してください）

これは、キャンプ道具のレビューアプリの構想なのですが、
どんな情報が必要になるかまとめると以下の通りです。

  • アプリに登録したユーザーの情報
  • キャンプ道具の情報
  • キャンプ道具に対する各ユーザーからのレビュー（評価☆）情報
  • キャンプ道具に対する各ユーザーからのコメント情報

このように、どんな情報が必要になってくるか、どんな情報があったらユーザーは嬉しいか
紙やPCのメモ帳になどに「言語化」して書き出していきました。

必要な情報を整理

ここでは、グループ分けをして

例のキャンプ道具レビューアプリには大きく「キャンプ道具」「ユーザー」「レビュー」
でまとめられます。
スライド1.jpeg
それぞれのテーブルにどんなカラムが必要になるか考えていきました。
スライド2.jpeg
スライド3.jpeg
今まで上げてきた情報の関係性を紐付けしていきます。
スライド1.jpeg

テーブル同士の関係性をまとめて、テーブル設計を完成させました。

プログラミング（HTML、Ruby篇）

いよいよ、ぽちぽちタイムがやってきました。
振り返ってみれば一番問題に遭遇したのはこの時だったと思います。

「これはうまくいったな」と実装、テストしては”エラー”
「これで解決したな」と修正しては”エラー”
エラーエラーエラー…

まるで、ジャイアンに殴られるかのように「ボッコボコ」にされました。
image.png

綺麗なジャイアンが言っている通り、エラーの連発で辛かった日は指の数じゃ収まりきらず、
心が折れかけることがありました。

そんな中でどのようにエラーの解決に立ち向かったか、
.

いろいろやった結果、大きくこの3つの方法で解決していきました。
やっていった手順は以下の順番通りです。

１、エラーメッセージの解読、検索方法を工夫し原因を探る
２、teratail、Twitterを活用して助けを求める
３、直接人に会って助けを求める

１、エラーメッセージの解読、検索方法を工夫し原因を探る

エラーメッセージに遭遇した時は、ラッキーです！
なぜなら、どこが間違っているのか、ちゃんとヒントを教えてくれるからです。

でも、エラーメッセージさんが「この列のここが間違っているよ」と教えてくれても、
「こんなに英語いっぱい表示されても、悪いかわからんわい！！」と最初はよく思っていました。
EefyEpUUwAcJiYm.png

まあまあ、落ち着いて。
まずは、エラーの読み解き方や接し方に関する情報を参考にして向き合うことにしました。

下記のリンクに参考にさせていただいた、エラーの解決に役立つ記事を載せておきます。

エラーの対処のほとんどは、これで解決していきました。

最初は、エラーに苦手意識があったのですが、
日々、原因探しをこなす内に、ある変化が起きてきます。

ある日、エラーが発生しました。
.

「よっしゃ！エラーが来たぜ！　今日はどんな子が悪さをしてるんだ〜？　うへへへぇ…」
「おらあああああああ！！　貴様だな！！　俺は見逃さないぞ！！　ううぃいいいいっ！！」

そうです。

エラーを見つけると興奮する変態になりました。
DMvsI3QW0AYq3Yj.jpeg

２、teratailを活用して助けを求める

しかし、自分の力ではどうしても解決できなかったこともありました。

何かいい解決方法がないか探していた時に、teratailに出会います。

.
teratailは本当に凄いんです！
脳味噌が沸騰するくらい考えて調べていたことを
1日も掛からない内に、的確な回答と問題解決方法が返ってくるのです。

人生で初めての投稿で緊張しながら、投稿内容に不備がないか何度も何度も確認し
1日分のエネルギーを込めて押した「投稿ボタン」

数時間後、teratailから通知が来て、回答欄のコメントが目に入った時、
「こんなに優しい世界があったんだな…」
と天にも昇る気持ちになったのを今でも覚えています。
25240286-天国の門のイラスト.jpg

この経験から、「自分で解決できないことは人に頼ってもいい」
と言うことを学びました。

正直、投稿する前は恥ずかしい、怖いと言う気持ちがあり、投稿をためらっていました。
過去に投稿されていた、ある質問の回答を目にした時、
「調べてください。」「理解していますか？」という回答もあったからです。

私は、思い切って投稿することを決心をしました。
解決しなければ、前進しないと思いました。

.
(心の声)
「ああ　神よ、この無知なわたくしに御慈悲を…」
「ggrksとか　どんな冷たい言葉もご褒美として受け止めます。」
（↑ちょっとこれは考えすぎ）

実際に、質問をしてみると指摘を受けることもありましたが、
問題の解決に必要な情報を、もう少し詳しく教えてほしいということがほとんどでした。

質問に答える側の立場になって
「こんな質問だったらスムーズに回答できそうかな」と
考えて質問することを、普段の仕事でもこの気持ちは常に持っておこうと思いました。

もし、悩み事があったら１度teratailを使ってみてください。

私は人に何かを伝えることは得意な方ではありませんが、
参考に私の投稿一覧を載せておきます。
goffee555

３、直接人に会って助けを求める

この解決方法は、本当にいきづまった時の最終手段としていました。
私の人脈だと、プログラミングをやっている友人や先輩が近くに居なかったため、
メンターに頼るしかありませんでした。

初めから、メンターに質問することも最初の頃は考えていましたが、
「相手の立場になってこんな質問だったら回答しやすくなるかな」と一度思考します。

思考する際にも、紙に書き出して考えをまとめていきました。
IMG_0532.jpg
紙に書き出すことは、以下のようなことです。

  • 何をやっていた時にエラーが出たか
  • どんなエラーコードが出力されていたか
  • エラーの内容に基づき、どんなことを調べたか
  • 調べたことを実施した結果
  • 「もしかしたらAを操作したから、影響をうけるBが問題なのでは」というような仮説

このように、とりあえず考えつくことを言語化することで、思考を整理させていきました。

思考の整理ができたら、メンターに質問をしていきます。
私はこのような流れで質問をしていきました。

▷ホニャララさん、今〇〇を実装しているところでエラーが発生して困っています。
（やっていることの認識を一致させる）

▷××をインストールした後に、サーバーを起動をしました。
（エラーが起きる前と後の状態を伝える）

▷そしたら、このようなエラー文が出力しました。
（エラー文の内容を認識してもらう）

▷エラー文から〇〇を検索して、〇〇を操作しましたが解決できませんでした。
（やったことを報告する）

▷今日1日中、解決できずに困ってて、辛いです。どうか、みてもらえないでしょうか？
（本当に困っている顔で伝えると効果抜群！）

この質問の仕方だと、まだまだ甘いところもあると思いますが、
「相手の理解が追いつかない状態をつくらない」
ことを質問する前に意識していました。

これを意識するのには、
物覚えが良くなく、人の話を最後まで理解できない私だからこそ、
「理解に徹してもらえるコミュニケーション」をしないといけないと思っていたからです。

例えば、Siriに
「ヘイ、Siri！　天気。」と聞いたら、
「キョウノテンキハ、ハレ　トキドキクモリ。サイコウキオン２８ド…」と返ってきますが、

人に聞く場合は
「太郎！　天気。」と聞いたら、
「は？」って返ってくること間違い無いですよね。

今日の天気という質問の中に、いつの？　どこの？　なんで？と
いろいろ情報が不足していていることが問題ですよね。
または、天気を聞き間違えて　元気？　と聞きとれられて
「うん、元気！」と返ってくることもあると思います。（Siriも例外でない）

このような日常的なコミュニケーションでも認識のズレを少しでも減らすためにも
「理解に徹してもらえるコミュニケーション」は今後も続けていきます。

プログラミング（CSS篇）

CSSの実装に関しては、モヤモヤを乗り越えるまでが結構大変でした。
そのモヤモヤというのは、
「正しい実装の方法がわからない」ことです。

例えば、usersテーブルにskillという名前のカラムを追加する場合は、

$ rails g migration AddSkiliToUsers skili:データ型（stringやtextなど）
$ rails db:migrate

というように、決まったやり方があるので、なんとかできるのですが、

CSSは「これが正解」というものがないので最初はあたまピヨピヨ状態でした。
例えば、要素を横並びにさせたい時の例です。
image.png

下記の方法で実現できます。

  • float
  • inline-block
  • table-cell
  • flexbox

「いや、どれ使ったらいいんですか！？」
とにかく、やってみないことには進まないので、適当にやってみました。

.
.
.

ダウンロード (2).gif

すごい、嫌がらせをするメニューバーができました。

試行錯誤しているうちに、CSSの実装は何とか完成させることはできたのですが、
「この実装が正解」と言うものは今でもわかりません。

この、わからないだらけの状況のなかを　どのように乗り越えたのか？

それは、
「レイアウト崩れてもいいから、とにかく完成させよう」
という気持ちでやり切りました。

そうです。問題は解決していないのです。（なんてこった）

作ったWEBアプリはブラウザの画面を全部広げて、かつズームが100％の状態でなければ
成立しない仕様になっているのです。
拡大（ズーム100％以上）、縮小（100％以下）にするとレイアウトが崩れてしまします。

でも、よいのです。
このWEBアプリ制作は収入をもらって、完璧なものを納品しているわけではなく、
自分の目標の達成に向けた１手段だからです。

もし、CSSの実装で、
「ブラウザの表示範囲によってレイアウトが切り替わるレスポンシブなのを作りたい」
「でも、難しくてうまくできない…」
と2つの理想と現実に板挟みになることがあれば、

「とりあえずできる所からやっちゃえ」

と気楽にやっていきましょう。

デプロイ、修正

ローカルで開発したWEBアプリを完成させたあとは、全世界に公開します。
アプリの公開はHerokuという無料で使えるクラウドサーバーを使用しました。
カリキュラム内で、デプロイ（作ったプログラムを使える状態にする）の方法が
載っているので、手順通りにやっていきました。

デプロイが完了した後、バグの修正や検索機能の追加など
しこしこやって、なんとか完成させることができました。

いやー、アプリが完成した時の達成感はもちろんあったのですが、
それ以上に、使ってくれた人がいたことが何よりもうれしかったです。

ここまでたどり着くのに、支えて下さったメンターの方々、teratailの回答者、
同じスクールの受講生に助けられたからだと思っています。

本当にありがとうございました。

今後どうするか

私は、「プログラミング講師になる」という夢ができました。
新しい技術を学び、活かしていくことも楽しいのですが、
多くの人に、「できた」という成功体験を味わって欲しいからです。

私の欠点は、「物覚えが良くなく、人の話を最後まで理解できない」ことですが、
この欠点は最大の武器だと思っています。

「物覚えが良くなく、人の話を最後まで理解できない」からこそ
理解できるまで、相手の困っていることに耳を傾けることができる、
理解できるまで、深く調べ解決することができる自信があります。

現在、転職活動に向けて活動をしていくところです。

WEBアプリ制作完了というゴールを迎え、新たなスタートラインに立ちます。
次回は、転職活動の記録を載せていこうと思います。

それでは、私の夢が叶う日まで…

.
.
P.S.　約9400文字書きました。疲れたー

  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む
  • 投稿日：2020-09-12T16:34:43+09:00

PHP の閉じタグは書かないらしい

PHPのみのファイルを書く場合は、閉じタグは書かない方がバグが起きにくいらしいです。
参考→https://www.php.net/manual/ja/language.basic-syntax.phptags.php

htmlに挿入する場合は必要になります。

また、echoの場合も省略する書き方があるようです。

example.php
<?php echo 'text'; ?>
<?= 'text'; ?>
//どちらも同じ動きをする
  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む
  • 投稿日：2020-09-12T16:29:25+09:00

見出し要素（h1~h6）とセクショニングコンテンツの関係

概要

見出し要素とセクショニングコンテンツについて細かい部分を毎回忘れるので記憶定着のためにまとめる。
それとまた忘れても大丈夫なように標準へのリンク集の役割も兼ねて。

「セクショニングコンテンツとセクショニングルートの要素どれがどれだっけ」
「h1ってどこで使って良いんだっけ？」
「h1って一つのHTML文書の中に複数存在してても良いの？」
「h1がないのにh2使って良いの？」

みたいに思ったら読む文章です。
ただし、再確認の趣旨が強いため、わかる人にしかわからない文章になってるかも。

参考

参考にするのはもちろんこちらのHTML5 Living Standard。
英語：HTML Standard - WhatWG
日本語：HTML Standard 日本語訳

ありがたいことに日本語訳をされてる方がいるので利用させていただきます:pray:
この記事執筆時点（2020/09/12）で（英語/日本語共に）最終更新日は2020/09/10。

HTML標準に関してはこちらを読むとわかりやすい。
WHATWG HTML日本語訳Wiki - momdo/momdo.github.io Wiki

この記事内では何も注釈が無い場合は、引用元は上記HTML Standard 日本語訳です。

セクションとは何か

見出しとセクション - HTML Standard 日本語訳

HTML文書の中で、見出しとアウトラインを持つ特定の構造的な範囲のことをセクションと呼ぶ。
セクションは特定のタグによって明示的に作成されるか、もしくはそれら特定のタグに囲まれていないヘディングコンテンツによって暗黙的に作成される。

アウトラインとは、そのセクションの中の、階層的な意味を持つ文書構造のこと。

セクションを明示的に作る要素

セクションを明示的に作る要素には、セクショニングコンテンツとセクショニングルートの2種類が存在する。

セクショニングコンテンツ

セクショニングコンテンツ - HTML Standard 日本語訳

  • article
  • aside
  • nav
  • section

セクショニングルート

セクショニングルート - HTML Standard 日本語訳

  • blockquote
  • body
  • details
  • dialog
  • fieldset
  • figure
  • td

ここにbodyが含まれていることからも分かる通り、body配下でマークアップされた文書は何もしなくてもそのものが一つのセクションとなる。

Documentのbody要素に対して作成されるアウトラインは、文書全体のアウトラインである。

セクションの特徴

  • セクションはセクションをネストして持つことができる。
  • セクションの中のセクションは、親セクションのアウトラインの一部となる。
  • ただし、セクショニングルートによって作成されたセクションは、親セクションのアウトラインからは切り離され、そこがセクションのルートとなる。
  • セクションの特徴は、そのセクションが明示的に作られていても暗黙的に作られていても差分はない。

見出しとは何か

見出しとセクション - HTML Standard 日本語訳

重要なのはセクションで最初に出てくるヘディングコンテンツであるか否か

セクショニングコンテンツの要素においてヘディングコンテンツの最初の要素は、そのセクションの見出しを表す。

どのヘディングコンテンツをそのセクションの見出しを表す要素として判定するかの基準は「そのセクションにおいて最初に登場するヘディングコンテンツであるか否か」であり、ヘディングコンテンツのランク（h1〜h6タグの数字）の大小は関係ない。
つまり、セクションの中には上にh1があろうがなかろうが、h2〜h6タグを突然使用することは何ら問題ない。
また、そのセクションよりも上部でh1が使われていようと、そのセクションでh1を使ってはならない理由はない。

h1、h2、h3、h4、h5、h6要素 - HTML Standard 日本語訳

こちらのh1〜h6の説明にも「h1から使わないといけない」という記述はないし、この項の例ではsectionタグの中で最初にh2タグを使用する例が出ている。
また、全セクションでh1タグを使用する例もある（つまり1つのHTML文書の中でh1タグを複数使うことは問題ない）。

ただし例外として、最初のヘディングコンテンツであってもその手前に別のセクションが存在する場合、そのヘディングコンテンツは2番目以降に出てくるヘディングコンテンツとして扱われる。

2番目以降に出てくるヘディングコンテンツ

同等以上のランクに属する後続の見出しは、新しい（暗黙の）セクションを開始し、低いランクの見出しは、前のセクションの一部である暗黙のサブセクションを開始する。

では、2番目以降に出てきたヘディングコンテンツは何を表すかというと、新しいセクションの開始を表す。つまり、これが上記の「暗黙的なセクションの作成」だ。
そしてその場合、ランクによってセクションの構造上の位置が変わる。

その2番目以降に出てきたヘディングコンテンツのランクが、

  • 一番近い兄要素のヘディングコンテンツのランク以上である場合
    • 兄弟セクション（弟セクション）となる。
  • 一番近い兄要素のヘディングコンテンツのランクより小さい場合
    • 子セクション（＝サブセクション）となる。

つまり、ヘディングコンテンツのランクは大小の差分だけに意味があり、絶対的な数字には大して意味がない（セクションの構造という意味では。人間が見たときのわかりやすさはまた別の話）。

ややこしいケース

これらのランクとセクションの位置の関係は、ヘディングコンテンツとセクショニングコンテンツが混じるとややこしい。

まず、これは簡単な例：

<body>
  <h1>AAA</h1> <!-- [1] -->
  <section>
    <h1>BBB</h1>　<!-- [2] -->
    <p>hogehoge</p>
  </section>
</body>

まず、bodyがセクションを作る。最初に出てくるヘディングコンテンツが[1]なのでbodyセクションの見出しはAAAだ。
次に、sectionタグがくる。セクショニングコンテンツは問答無用でサブセクションになる。
そのサブセクションの最初のヘディングは[2]なので見出しはBBBだ。

- AAA
  - BBB

つまりこう:arrow_up:

じゃあこれは？

<body>
  <section>
    <h1>AAA</h1> <!-- [1] -->
    <h1>BBB</h1> <!-- [2] -->
    <h2>CCC</h2> <!-- [3] -->
    <h1>DDD</h1> <!-- [4] -->
  </section>

  <h2>EEE</h2> <!-- [5] -->
</body>

結論から書くとこうなる

- untitled（bodyが作るセクション）
  - AAA
  - BBB
    - CCC
  - DDD
- EEE

非直感的なのは、sectionタグは一つしかないのに、そのsectionタグの中の記述で結果的にセクションは4つ作られるという点。
また、sectionとh2は同じ階層に並んでいるように見えるのに、実際は兄弟要素ではない点。

AAAは「sectionタグが作るセクション」の見出しで、それ以降の要素（[2], [3], [4]）はその「sectionタグが作るセクション」の配下の要素っぽいのに、「sectionタグが作るセクション」と兄弟要素になる。

[5]に関しては、そのセクションにおける最初のヘディングコンテンツであっても、別のセクションが手前に挟まるとそのセクションの見出しにはならないという点。（さらにここではh1ではなくh2を使っているのでよりややこしい。）

つまりこの文書は下記のマークアップとも構造が等しい:arrow_down:

<body>
  <section>
    <section>
      <h1>AAA</h1> <!-- [1] -->
    </section>
    <section>
      <h1>BBB</h1> <!-- [2] -->
      <section>
        <h2>CCC</h2> <!-- [3] -->
      </section>
    </section>
    <section>
      <h1>DDD</h1> <!-- [4] -->
    </section>
  </section>

  <section>
    <h2>EEE</h2> <!-- [5] -->
  </section>
</body>

この辺の話は、サンプルアウトライン - HTML Standard 日本語訳に色々例が出ているのでここをじっくり眺めながら考えると良い。

人間/botの読みやすさ

人間の読みやすさを意識するなら、この辺の仕様を理解した上で、プロジェクトとしてヘディングコンテンツの使用ルールを決めるのも良いかもしれませんね。
（基本的にユーザーはHTMLタグを意識しながら文章を読むことはないので、開発における保守性の話になると思いますが）

SEO的観点でランクの綺麗さがどこまで見られるのかはGoogleのみぞ知るですが、どんなに人間からの見た目的にランクが綺麗でも、構造が間違ってる方が圧倒的問題なので、どちらかというと構造のルールを理解する方が優先だと思います。

FAQ

「h1ってどこで使って良いんだっけ？」

どこで使っても良いけど、それによって作成されるセクションがどうなるかは前後の要素によって変わります。

「h1って一つのHTML文書の中に複数存在してても良いの？」

HTMLの仕様的には問題なし。

「h1がないのにh2使って良いの？」

HTMLの仕様的には問題なし。

  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む
  • 投稿日：2020-09-12T16:11:27+09:00

ExcelからMarkdownのtableをコピペで変換するWebツール「MarkDown Convert」

Markdownの表を簡単に変換するWebツールをご紹介します。
QiitaでMarkdownの表を作成する場合などに大変便利です。

ツールやエディタなどむずかしい方法を使わずに
コピペするだけの方法です。

Webツール「MarkDown Convert」で変換

Markdown表変換ツール - MarkDown Convert
https://markdown-convert.com/ja/tool/table

Excelで作成したデータを左側に貼り付けて、
メニューのExcelを選択すると右側にMarkdownの表が生成されます。とっても簡単です。

Alt text

メニューを選択すると表のテキストを右寄せ／中央寄せ／左寄せにすることが可能です。

Alt text

Excelからサクッと表を作りたい時に重宝する方法です。
お役に立てたらうれしいです :ok_woman_tone1:

関連記事

ExcelからHTMLのtableをコピペで変換するWebツール「Excel to Table」 - Qiita
https://qiita.com/flatsato/items/fa6e46f645c8a458d4ae
ExcelからHTMLのtableを生成するWebツールの紹介記事を書きました。

  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む
  • 投稿日：2020-09-12T16:08:33+09:00

知らなかった便利そうなショートカットキー

コピー＆ペースト等は使用していたけど…
もっと便利なショートカットキーを利用していくべきだと思い、自分用にまとめておきます。

  • ⌘command + F
    ページ内検索
    ひらいてるページ内に指定のキーワードがあるか簡単に調べられる

  • ⌘command + tab
    起動中アプリケーションの切り替え

  • control + tab
    複数開いているブラウザタブの切り替え

  • ⌘command + W
    開いているウィンドウを閉じる。（現在のタブ）

  • ⌘command + T
    新規タブ作成

テキスト入力系

  • control ＋ K：カーソルの右側の文字を全て削除する

  • control ＋ H：カーソルの左側の文字を削除する

  • control ＋ A：カーソルを行頭（左側）に移動する

  • control ＋ E：カーソルを行末（右側）に移動する

  • control ＋ P：カーソルを一行上に

  • control ＋ N：カーソルを一行下に

  • control ＋ F：カーソルを一行右に

  • control ＋ B：カーソルを一行左に

Cloud9　ショートカットキー

  • option + left ：左の単語に移動
  • option + right：右の単語に移動
  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む
  • 投稿日：2020-09-12T16:01:42+09:00

ExcelからHTMLのtableをコピペで変換するWebツール「Excel to Table」

Excelで作成したデータから
HTMLのtableを生成する方法をご紹介します。

ツールやエディタなどむずかしい方法を使わずに
コピペするだけです。

Excel to Tableにコピペする

Excel to TableというWebツールにExcelデータをコピペするだけ。

Excel to Table | Excel表からHTMLテーブルへ一発変換 | すぐに使える便利なWEBツール | Tech-Unlimited
https://tech-unlimited.com/exceltable.html

Alt text

こちらのツールの素晴らしいところは、1行目のtdをthにしたり、
左から1番目のtdをthに変換できるところです。簡単すぎて感動です。

お役に立てたらうれしいです！

関連記事
ExcelからMarkdownのtableをコピペで変換するWebツール「MarkDown Convert」 - Qiita
https://qiita.com/flatsato/items/64066a7286e7a58eb726
ExcelからMarkdownのtableを生成するWebツールの紹介記事を書きました。

  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む
  • 投稿日：2020-09-12T15:52:29+09:00

idとclassの違い

そもそもid、classとはなにか…

1ページで何度も同じ要素が出てくる際にid・classを用いてピンポイントで個別に要素を指定することができる。

idは#でclassは.で表す

実際の使用例

<h1 id="title>Hello World!</h1>
<p class="description">CSSの入門</p>

というHTMLに対して

#title {
  color: red;
}
.description {
  color: blue;
}

このように指定ができる。

一見、idとclassは同じ役割に見て取れるが、その役割は明確に異なっている。

それぞれの役割

  • class：同じclass名を1ページ内で何度でも使える
    （種別名を割り当てるイメージ）

  • id：同じid名は1ページ内で1度しか使えない。
    （固有の名前を割り当てるイメージ）

CSSの指定は：class
JavaScriptで操作する時には：id
というのが基本となる。

  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む
  • 投稿日：2020-09-12T15:46:33+09:00

packsファイルの.jsに記載したのに反応しない

【概要】

1.結論

2.どのように使うか

3.なぜjsファイルに書き込まなかったのか

4.ここから学んだこと

1.結論

直にhtml.erbファイルで"script"を記述しscript内にjavascript言語を記載する！

2.どのように使うか

任意のhtml.erb内で

****.html.erb
<script>
.
.
.

</script>

と記載してJavascriptを記載するだけです！
注意点としてapplication.html.erbで
<%=yiled%>を使用してヘッダーフッダーを適用している場合は反映させる順番に注意です。
HTMLが読み込まれるよりも前にJavascriptを適用させてしまうとブラウザの検証ツールのconsoleでエラーがでます。


3.なぜjsファイルに書き込まなかったのか

結論からいうと、jsファイルを読み込んでくれなかったり、リロードを一回挟まないと読み込んでくれませんでした。
内容としてはパスワード表示非表示を行っていましたが、検索するとたくさん出てくるのでここでは割愛します。

Rails6.0
Vscode
を使用しています。

app/javascript/packs/application.js
require("@rails/ujs").start()
require("turbolinks").start()
require("@rails/activestorage").start()
require("channels")
require("./security")　#➡︎該当のファイル

と記載し、secrurity.jsにjavascript言語を記載し、

app/layouts/application.html.erb
<%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %>
<%=　javascript_pack_tag 'application', 'data-turbolinks-track': 'reload' %>

と記載してあるのでjsファイルが適用されるはずと思いきや全く反映されませんでした。

また、jsファイルにてパスワードの表示非表示をプログラムしていましたが反応がないのでいろいろ参考にしました。下記のプログラムを最初に記載しました。

app/javascript/packs/security.js
document.addEventListener("DOMContentLoaded", function(){}

パスワードの表示非表示はできましたが、一度リロードを押さないと反映がされませんでした。なのでjsファイル問題は解決していませんが、とりあえずやりたいことはできたのでよしとします。（可読性はよろしくないですが）


4.ここから学んだこと

このエラーの中でhtml/css/javascript/の読み込む順番やDOMがどの段階で形成されていくのかが大変勉強になりました。tutbolinksやdocumentloadedについてはまだまだ勉強が足りていないですが、流れだけでも把握できたのはかなり大きいです。scriptにしたとたんすぐに解決したのも、書く順番を把握していたおかげでした。

参考にしたURL
"DOMContentLoaded周りの処理を詳しく調べてみました"
"【JS】addEventListenerが機能しない理由についてご教示ください"
"DOMContentLoadedイベントとloadイベントの違い[タイミング]"

  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む
  • 投稿日：2020-09-12T14:41:00+09:00

HTML、CSSの実践の書き方

BEMとSMACSSを組み合わせる
※Sassを覚えたらSassも取り入れる

【BEM】

{Block}__{Element}
{Block}-{Modifier}
{Block}__{Element}-{Modifier}

----- 例 -----

.archiveItem {
  margin-bottom: 20px;
}
.archiveItem__inner {
  display: flex;
  padding: 10px;
}
.archiveItem__thumb {
  margin-right: 20px;
}

【SMACSS】

– Base
– Layout
– Module
– State
– Theme

----- 例 -----

body {}
html {}

/*---------- Layout ----------*/

.l-header {}
.l-footer {}
.l-main {}
.l-sidebar {}

/*---------- Module ----------*/

.button {}
.is-button-warning {} 
.label {}
.is-label-hidden {} 
.is-label-error {}
.heading {}

/*---------- Theme ----------*/

.dark-mode {}
.light-mode {}

※BEMが使えるものはレイアウトに入れ、BEMを使わないものはモジュールに入れる

  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む
  • 投稿日：2020-09-12T13:48:58+09:00

日本のエリア・県名 ローマ字表記

Webサイトやプログラムで日本の地名をローマ字表記する場合、
スペルを間違っていると困るのでリファレンスをメモしておきます。

日本のエリア ローマ字表記

番号 地名 ふりがな ローマ字表記
1 北海道 ほっかいどう Hokkaido
2 東北 とうほく Tohoku
3 関東 かんとう Kanto
4 中部 ちゅうぶ Chubu
5 近畿 きんき Kinki
6 中国 ちゅうごく Chugoku
7 四国 しこく Shikoku
8 九州 きゅうしゅう Kyushu
9 沖縄 おきなわ Okinawa

HTML

HTML
<select name="area">
<option value="" selected>選択してください</option>
<option value="北海道">北海道</option>
<option value="東北">東北</option>
<option value="関東">関東</option>
<option value="中部">中部</option>
<option value="近畿">近畿</option>
<option value="中国">中国</option>
<option value="四国">四国</option>
<option value="九州">九州</option>
<option value="沖縄">沖縄</option>
</select>

日本の県名 ローマ字表記

県名の感じ、ふりがな、ローマ字一覧です。

番号 地名 ふりがな ローマ字表記
1 北海道 ほっかいどう hokkaido
2 青森県 あおもりけん aomori
3 岩手県 いわてけん iwate
4 宮城県 みやぎけん miyagi
5 秋田県 あきたけん akita
6 山形県 やまがたけん yamagata
7 福島県 ふくしまけん fukushima
8 茨城県 いばらきけん ibaraki
9 栃木県 とちぎけん tochigi
10 群馬県 ぐんまけん gunma
11 埼玉県 さいたまけん saitama
12 千葉県 ちばけん chiba
13 東京都 とうきょうと tokyo
14 神奈川県 かながわけん kanagawa
15 新潟県 にいがたけん niigata
16 富山県 とやまけん toyama
17 石川県 いしかわけん ishikawa
18 福井県 ふくいけん fukui
19 山梨県 やまなしけん yamanashi
20 長野県 ながのけん nagano
21 岐阜県 ぎふけん gifu
22 静岡県 しずおかけん shizuoka
23 愛知県 あいちけん aichi
24 三重県 みえけん mie
25 滋賀県 しがけん shiga
26 京都府 きょうとふ kyoto
27 大阪府 おおさかふ osaka
28 兵庫県 ひょうごけん hyogo
29 奈良県 ならけん nara
30 和歌山県 わかやまけん wakayama
31 鳥取県 とっとりけん tottori
32 島根県 しまねけん shimane
33 岡山県 おかやまけん okayama
34 広島県 ひろしまけん hiroshima
35 山口県 やまぐちけん yamaguchi
36 徳島県 とくしまけん tokushima
37 香川県 かがわけん kagawa
38 愛媛県 えひめけん ehime
39 高知県 こうちけん kochi
40 福岡県 ふくおかけん fukuoka
41 佐賀県 さがけん saga
42 長崎県 ながさきけん nagasaki
43 熊本県 くまもとけん kumamoto
44 大分県 おおいたけん oita
45 宮崎県 みやざきけん miyazaki
46 鹿児島県 かごしまけん kagoshima
47 沖縄県 おきなわけん okinawa

HTML

HTML
<select name="area">
<option value="" selected>選択してください</option>
<option value="北海道">北海道</option>
<option value="青森県">青森県</option>
<option value="岩手県">岩手県</option>
<option value="宮城県">宮城県</option>
<option value="秋田県">秋田県</option>
<option value="山形県">山形県</option>
<option value="福島県">福島県</option>
<option value="茨城県">茨城県</option>
<option value="栃木県">栃木県</option>
<option value="群馬県">群馬県</option>
<option value="埼玉県">埼玉県</option>
<option value="千葉県">千葉県</option>
<option value="東京都">東京都</option>
<option value="神奈川県">神奈川県</option>
<option value="新潟県">新潟県</option>
<option value="富山県">富山県</option>
<option value="石川県">石川県</option>
<option value="福井県">福井県</option>
<option value="山梨県">山梨県</option>
<option value="長野県">長野県</option>
<option value="岐阜県">岐阜県</option>
<option value="静岡県">静岡県</option>
<option value="愛知県">愛知県</option>
<option value="三重県">三重県</option>
<option value="滋賀県">滋賀県</option>
<option value="京都府">京都府</option>
<option value="大阪府">大阪府</option>
<option value="兵庫県">兵庫県</option>
<option value="奈良県">奈良県</option>
<option value="和歌山県">和歌山県</option>
<option value="鳥取県">鳥取県</option>
<option value="島根県">島根県</option>
<option value="岡山県">岡山県</option>
<option value="広島県">広島県</option>
<option value="山口県">山口県</option>
<option value="徳島県">徳島県</option>
<option value="香川県">香川県</option>
<option value="愛媛県">愛媛県</option>
<option value="高知県">高知県</option>
<option value="福岡県">福岡県</option>
<option value="佐賀県">佐賀県</option>
<option value="長崎県">長崎県</option>
<option value="熊本県">熊本県</option>
<option value="大分県">大分県</option>
<option value="宮崎県">宮崎県</option>
<option value="鹿児島県">鹿児島県</option>
<option value="沖縄県">沖縄県</option>
</select>

それ以外の地名

【みんなの知識 ちょっと便利帳】日本の都道府県の読み方・にほんのとどうふけんのよみかた・漢字・ひらがな・ローマ字表記・英語表記一覧・Nihon no todōfuken・Prefectures of Japan
https://www.benricho.org/chimei/Todofuken-yomikata/

国土地理院の地名ローマ字表記の資料
https://www.gsi.go.jp/kihonjohochousa/gazetteer.html
県名でなく地名が明記されています。

  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む
  • 投稿日：2020-09-12T12:44:59+09:00

jQueryプラグインでオリジナルのダイアログを表示する方法

デフォルトで表示

特にカスタマイズせず、confirm()で表示すると下記のような表示になります。
初期ダイアログ.png
OK/キャンセルの2択だけ選択させたい場合であれば、初期ダイアログで事足りますが、
ボタンや選択肢を追加したい場合、カスタマイズする必要があります。

あと、個人的に初期デフォルトだとIPが表示されてかっこ悪い印象を持ちます:sweat_smile:
このあと、カスタマイズする方法を説明します。

準備

オリジナルのダイアログを表示するにはjQuery UIのDialogプラグインを用います。
jQuery UIに必要なファイルは下記3つになります。

  • jQueryのJavaScriptライブラリ
  • jQuery UIのJavaScriptライブラリ
  • jQuery UI用のCSSテーマファイル
<!-- jQuery -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<!-- jQuery UI -->
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css">

オリジナルのダイアログで表示

今回はダイアログ上に、選択項目を追加していきます。

HTML側の記述

HTML側ではダイアログを呼び出すボタン、ダイアログの内容を記述します。

<!--ダイアログを呼び出すボタン-->
<button id="btn">ダイアログ表示</button>

<!--ダイアログの内容-->
<div id="dialog" title="同意書">
  <!--ラジオボタンを配置-->
  <label><input type="radio" name="test" value="1" checked> 選択肢1</label><br />
  <label><input type="radio" name="test" value="2"> 選択肢2</label><br />
  <!--チェックボックスを配置-->
  <label><input type="checkbox" value="1">上記記載事項に同意します</label>
</div>

Dialogのオプション項目

JavaScriptでダイアログを呼び出す処理について記述していきますが、
呼び出し時には必ずオプション項目を定義する必要があります。

ダイアログのオプション項目は下記の通りです。

オプション 内容
autoOpen 初期表示にダイアログを開くか設定(初期値:true)
Width ダイアログの横幅を指定。単位はピクセル(初期値:300)
modal モーダルダイアログにしたい場合はtrueに設定する(初期値:false)。背景が少し暗くなる。
buttons 記述形式は次の通り。
{text:(ボタン名), click:(処理)}
click以外のイベントも定義可能

JavaScript側の記述

$(function(){
    //ダイアログの初期設定
    $("#dialog").dialog({
        autoOpen: false, //自動で開かないように設定
        width: 500,       // 横幅のサイズを設定
        modal: true,  //モーダルダイアログにする
        buttons: [
            {
                text: "戻る",
                click: function(){
                    // ダイアログを閉じる
                    $(this).dialog("close");
                }
            },
            {
                text: "次へ",
                click: function(){
                    // ページ遷移
                    window.open('https://qiita.com/tamakiiii', '_blank');;
                }
            }
        ]
    });

    $("#btn").click(function(){
        //ダイアログの呼び出し
        $("#dialog").dialog("open");
    })
});

表示したときのダイアログはこんな感じです
オリジナルダイアログ.png

参考

jQuery UI を用いてオリジナルのダイアログを実装する方法！独自のボタンや選択肢も簡単に追加できる！

  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む
  • 投稿日：2020-09-12T09:49:28+09:00

【翻訳】wordpressのプラグインで毎月５万収益を得ている話

この記事はConverting My WordPress Solution into a $500/Month Side ProjectのIgor Benićさんのご本人の許可を得て翻訳をしたものです。

簡単に内容をまとめると

  • wordpressのpluginを開発して毎月5万円弱の収益を得ている。
  • 開発のきっかけはちいさな不満から
  • 低コストでもプロダクトを売り込める方法はたくさんある
  • もしプロダクトを始めたばかりなら、諦めないことが一番重要

自分の小さな不満から始まったプロダクトで、この収益を得るまでに挫折しそうになったことも多々垣間見える内容だったので似たような個人開発者の方（自分含め）だととても共感できるような内容になっているかと思います。
是非最後まで読んでみてください。

(補足)どういうプロダクト？

メールアドレスで応募できるプレゼント企画をwordpress上で簡単に始められるプラグインです。
無料だと複数の景品タイプを選べたり、メール通知やフォームを編集出来たりします。
また有料では、デザインの変更や他サービスとの連携（MailChimpとか）のカスタマイズ要素が多いですね。
screenshot-1.png

はじめに

Simple Giveawaysは、私の最初の取り組みです。これは、メールアドレスを収集しアルゴリズムを使用してプレゼントの勝者を選択するかなりシンプルな製品で幅広く色んなところで使われています。

simple-giveaways__homepage.jpg

またSimple Giveawaysはサイドプロジェクトで、ゆっくりと成長していますが、しっかりと伸びています。

コメント 2020-09-11 014041.png

作ろうと思ったきっかけ

ブログを始めたときに、トラフィックを増やす方法をググりまくっていたら、プレゼントのアイデアについての記事をたくさん見つけました。
しかし、$99でプレゼントのシステムを使えましたがそんな余裕はありませんでした。
なので、自分で作ろうとおもったのが最初のきっかけです。

実際、自分のために開発をしていただけなので、このプラグインが収益化できるとも思っていなかったですし、どちらかといえばwordpressのテーマを販売したかったと思っていたのを覚えています。

初期バージョンはどんなものだったか

最初は本当にシンプルで、メールアドレスを入れたら保存されるくらいでテンプレートも1つだけでした。
開発期間は約1か月くらいで、フルタイムの仕事の合間にやっていました。

技術的にはHTML, PHP, CSS, jQueryのDateTimePickerを使っていました。

初期バージョンができた後、さらに4つのテンプレートや、勝者を自動で選択できるようなオプションを加え、4か月後くらいにプレミアバージョンを公開しました。

どのようにユーザーを集めましたか？

まずは公式のwordpressのプラグインリポジトリに登録をしました。
今でもトラフィックの大部分はここからきます。検索をすると私のプラグインが上位に表示されています。

他に新しいユーザーを引き付ける方法はたくさんありますが、ふつうは予算が必要で、自分はそれがなかったので無料や低コストでできることをしました。

  • プラグインの使用方法を説明する記事を出した
  • 自分のサイトでプラグインを使って、体験させてみる。
  • wordpressのプラグイン紹介をしてくれるpodcastに売り込んだ
  • facebook広告
  • twitter活用
  • 開発者インタビューに答える
  • 活用方法などをまとめた動画のチュートリアルコースを作成した

facebook広告については、1日単位などで固定予算を設定できるので、$5の広告を打ったところCVは低く、18クリックしかされなかったです。しかし表示回数ははるかに多かったためプロダクトを周知できたと思っています。

結局、今でも口コミやtwitterや公式プラグインレポジトリのトラフィックに頼っています。
最近Google analyticsを入れたので、流入経路を探ったりしています。
SEOを伸ばしてみようと考えたりもしています。

どのように収益化しているのか

ビジネスモデルは、複数種類のサブスクプランを作っています。

  • 1つのウェブサイトで使用可能:
    • 年間$49
    • 永久$149
  • 2つのウェブサイトで使用可能
    • 年間$59、
    • 永久$179
  • 無制限のウェブサイトで使用可能
    • 年間$99
    • 永久$189

決済はpaypalかStripeで行っているので、ほぼ管理はいりません。

実際の2019年の内訳はこのようになっていました

1月：年間92％、永久8％
2月：年間78％、永久22％
3月：100％年間
4月：年間83％、永久17％
5月：年間72％、永久28％

もし永久プランを用意する場合は、常に新しいユーザーが必要になることを覚えておくのが大切です。

一番難しかったこと

1つはトラクションを集めることで、最初の100インストールを達成するのがとても困難でした。達成してからは緩やかに成長しました。

もしあなたが、プロダクトを作るとき、辛抱強くがんばらないといけません。最初はあなたがそのプロダクトを紹介し、広めていかないとユーザーが勝手に見つけて、使ってくれることはほぼありません。また成長を維持する為に改善を怠らないのが重要です。

2つめに、適切なキャッチーで分かりやすいプロダクト名を付けたほうがいいです。最初の100インストールをもっと早く到達できてたかもしれないです。

個人開発者へのアドバイス

もし始めたばかりなら、諦めないことが一番重要です。
それで稼ごうと思うと1年以上かかるのが普通だと思います。（私は3年以上）

あとは最初からマーケティングに力を入れます。
WEBサイトを構築したり、ビデオを投稿したり、記事を書いたりしてユーザーを様々な方法で集めます。

また、最初のバージョンはユーザーが使い始められる最低限の製品を作成して、フィードバックをもらって改善をすればいいと思います。

良い開発者ライフを！

　最後に

最後までお読みくださりありがとうございました。Twitterでは、Qiitaに書かない海外のマーケティング事例や個人開発のアイデアなどもツイートしているので、よかったらフォローお願いします

きりしま@個人開発

  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む

日付別

タグ一覧