20200920のHTMLに関する記事は4件です。

投稿日：2020-09-20T20:57:47+09:00

【Hello Heroku】HerokuでWebアプリ(HTML)を紹介しよう

0.この記事を書いた経緯

　会社の勉強会でWebアプリを作って紹介しよう！となりました。
　しかし会社のセキュリティの都合上、
　自宅で作成したアプリを紹介する手段が乏しいことに気づきました。
　そこで公開方法を調べていくうちにHerokuにたどり着きました。

1.Herokuって何？

　作成したWebアプリを簡単に公開できるサイトです。
　Herokuを理解する上でこの記事がすごく役立ちました！
　ありがとうございます！
　※Herokuは無料版と有料版があります。今回はHerokuの無料版を利用しています。

2.環境

OS windows10 64bit

PHP 7.4.9

Composer version 1.10.10

Heroku

3.前提

　※以下既に用意されている場合は手順を飛ばしてください。

公開したいhtmlファイルの作成

Herokuアカウントの作成

Heroku CLI ツールのインストール

PHPのインストール

Composerのインストール

4.Heroku側でappを作成する

　herokuのアカウントを作成できたらログインします。
　ログインしたら以下の画面が出るので赤枠で囲まれた「Create new app」を押します。

　「App name」には任意の名前を入力します。ただし英数字小文字でないと怒られます。
　今回は「rensyuwebclc」という名前にします。
　名前を入力したら赤枠で囲まれた「Create app」を押します。

　ここで設定したアプリ名が「 https://<アプリ名>.herokuapp.com 」になるので注意です。
　ダッシュボードに戻ると入力した名前のAppができています。

5.公開するファイルをローカルフォルダに置く

　任意の名前のフォルダを用意します。
　そのフォルダ内に以下4つのファイルを置きます。

composer.json

index.html

index.php

Procfile

　以下各ファイルの説明をします。

composer.json

The Heroku PHP Support will be applied to applications only when the application has >a file named in the root directory. Even if an application has no Composer >dependencies, it must include at least an empty () in order to be recognized as a PHP >application.composer.json{}composer.json』

(Heroku Dev Centerから引用)

　要するに「composer.json」がないとHeroku PHPにサポートされないということです。
　実際このファイル無しでアプリをアップロードすると警告が出ます。
　指示に従い「composer.json」という名前でファイルを作成し、中身には「{}」と記述します。
composer.json
{}
index.html
　今回アプリとして公開するhtmlファイルです。

index.php
　今回の肝となるファイルです。
　中身は以下にしてください。
index.php
<?php include_once("htmlファイル名"); ?>
Procfile
　Procfileは起動時にアプリによって実行されるコマンドを指定するファイルです。
　詳しくはこのサイトとこのサイトを参考してください。　　　　　　
　名前は「Procfile」にして下さい。Pは大文字で「.txt」等、拡張子はつけてはいけません。
　中身は以下にしてください。
Procfile
web: vendor/bin/heroku-php-apache2
6.ファイルをHerokuにアップする

　Herokuを再度開き作成したappを開きます。

　タブの「Deploy」を押します。

　「Deployment method」の「Heroku Git」を押します。
　オレンジ枠で囲った手順に従ってお使いのPCのコマンドプロンプトにコマンドを入力します。
　緑枠の部分は作成したappの名前によってHerokuが自動的に表示します。
　青枠の部分は””で囲って入力してしてください。
コマンドプロンプト
   heroku login
　 cd 作成したファイルまでのPath
　 git init
   heroku git:remote -a 作成した任意のapp名(今回はrensyuwebclc)
   git add .
   git commit -am “何かしらのコメント”
　 git push heroku master
　これは初めてアプリを作成する場合です。

　アプリ作成後は更新した内容を反映させる用にherokuの記述が変わります。
コマンドプロンプト
   heroku login
　 heroku git:clone -a 作成した任意のapp名(今回はrensyuwebclc)
   git add .
   git commit -am “何かしらのコメント”
　 git push heroku master
　「git add .」の「.」はよく忘れるので忘れないようにします。

　URLが作られるのでコピーしてブラウザで開きます。
　以下はこの記事の著者がherokuを使って公開したアプリのURLです。
　https://rensyuwebclc.herokuapp.com/

　人によって作成したURLは異なるので注意して下さい。あくまで例です。

7.アプリが表示されない場合

　サイトを開き以下の画面が出たら、phpファイル、htmlファイル名が
　両方とも上記で述べた名前以外になっている可能性があります。

　その場合URLに「/htmlファイルの名前」を付け足します。

これはherokuのデフォルトドキュメントの設定が以下のようになっているためです。
default_include.conf
DirectoryIndex index.php index.html index.htm
phpファイルやhtmlの名前を変えてしまうとデフォルトドキュメントとして呼ばれなくなるので、ファイルが見つからないとして403エラーが出たのです。

8.まとめ

　herokuを使って無事に会社でWebアプリを紹介することができました。
　アップした手順をまとめることで同じような悩みを持つ方の参考になればと思い
　記事を作成しました。
　ご意見ご感想があれば教えていただけたら幸いです。

引用・参考サイト

Heroku使い方メモ（Java）

Heroku Dev Center

Let’sプログラミング初心者の方でも分かりやすいサイト

WEB ARCH LABO

heroku-buildpack-php

　 Tweet
Qiitaで続きを読む

投稿日：2020-09-20T17:01:11+09:00

【初心者でもわかる】ラジオボタンのデザインを変更して、好きなケーキにしてしまう

どうも、7noteです。ラジオボタンのデザインを変更して、オシャレなケーキに変えてしまう方法を紹介

ラジオボタンのあの「〇」って、好きなデザインに変更する方法があるってご存知でしたか？
通常のラジオボタンは機種やブラウザによってちがいますが、こんな感じのシンプルなものが多いですが・・・

普通のラジオボタン

これを好きなデザインに変えてしまいましょう。
せっかくなので美味しそうなものに変えてみましょう。

label要素を使うので、label要素って何？という方は前回の記事をご覧ください。
【初心者でもわかる】フォーム作りに必須！inputとlabelを紐づける方法

材料はこちら(1人前)

ファイル CSSプロパティ意味

index.html inputタグ
labelタグボタンやフォームなどを書く時に使うもの
inputと紐づけて使うもの

style.css ~~::before~~
::after 疑似要素っていいます。今回は両方使います。

cake01.png ショートケーキの画像

cake02.png チョコケーキの画像

cake03.png カップケーキの画像

作り方

index.htmlにラジオボタンを用意。

style.cssで、inputを見えなくして、beforeにお皿を用意。

チェックされた時、afterにそれぞれのケーキを用意して完成。

1.index.htmlにラジオボタンを用意。
index.html
<ul class="select">
  <li><input type="radio" name="cake" id="cake01"><label for="cake01">ショートケーキ</label></li>
  <li><input type="radio" name="cake" id="cake02"><label for="cake02">チョコケーキ</label></li>
  <li><input type="radio" name="cake" id="cake03"><label for="cake03">カップケーキ</label></li>
</ul>
2.style.cssで、inputを見えなくして、beforeにお皿を用意。
style.css
ul li {
  padding-left: 20px;
}

input {
  display: none;
}

label::before {
  content: "";
  width: 20px;
  height: 20px;
  display: inline-block;
  background: url(dish.png) no-repeat;
}
3. クリックされた時、afterにそれぞれのケーキを用意して完成。
style.css
label {
  position: relative;
}

input:checked + label::after {
  content: "";
  width: 20px;
  height: 20px;
  display: inline-block;
  position: absolute;
  top: 0;
  left: 0;
}

input#cake01:checked + label::after { background: url(cake01.png) no-repeat; }
input#cake02:checked +label::after { background: url(cake02.png) no-repeat; }input#cake03:checked + label::after { background: url(cake03.png) no-repeat; } 
＼完成／

解説・作り方のコツ

inputは、labelタグの前に書きます。そうすることで、:checkedでチェックの判定ができるのでその結果を次のlabel要素に反映することができます。

反映させるには隣接セレクタ（+）を使い、:checkedがある時のみ:afterを表示するように作っています。

まとめ

一番好きなケーキはいちごのショートケーキ。

素材データ配布

真似して作りたい人はこの画像をダウンロードして使ってください！

おそまつ！

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

ファイル	CSSプロパティ	意味
index.html	inputタグ labelタグ	ボタンやフォームなどを書く時に使うもの inputと紐づけて使うもの
style.css	~~::before~~ ::after	疑似要素っていいます。今回は両方使います。
cake01.png		ショートケーキの画像
cake02.png		チョコケーキの画像
cake03.png		カップケーキの画像

　 Tweet
Qiitaで続きを読む

投稿日：2020-09-20T09:50:23+09:00

Bootstrapで五十音表

はじめに

bootstrap4で五十音表の索引を作成しました。
再利用するかもしれないので、記事として残しておきます。

完成品

コード

<div class="d-table text-nowrap" style="border-collapse: separate; border-spacing: 2pt;">
        <div class="d-table-row">
            <div class="d-table-cell border"><button class="btn btn-link btn-block" type="button">その他</button></div>
            <div class="d-table-cell border"><button class="btn btn-link btn-block" type="button">わ</button></div>
            <div class="d-table-cell border"><button class="btn btn-link btn-block" type="button">ら</button></div>
            <div class="d-table-cell border"><button class="btn btn-link btn-block" type="button">や</button></div>
            <div class="d-table-cell border"><button class="btn btn-link btn-block" type="button">ま</button></div>
            <div class="d-table-cell border"><button class="btn btn-link btn-block" type="button">は</button></div>
            <div class="d-table-cell border"><button class="btn btn-link btn-block" type="button">な</button></div>
            <div class="d-table-cell border"><button class="btn btn-link btn-block" type="button">た</button></div>
            <div class="d-table-cell border"><button class="btn btn-link btn-block" type="button">さ</button></div>
            <div class="d-table-cell border"><button class="btn btn-link btn-block" type="button">か</button></div>
            <div class="d-table-cell border"><button class="btn btn-link btn-block" type="button">あ</button></div>
        </div>
        <div class="d-table-row">
            <div class="d-table-cell"></div>
            <div class="d-table-cell"></div>
            <div class="d-table-cell border"><button class="btn btn-link btn-block" type="button">り</button></div>
            <div class="d-table-cell"></div>
            <div class="d-table-cell border"><button class="btn btn-link btn-block" type="button">み</button></div>
            <div class="d-table-cell border"><button class="btn btn-link btn-block" type="button">ひ</button></div>
            <div class="d-table-cell border"><button class="btn btn-link btn-block" type="button">に</button></div>
            <div class="d-table-cell border"><button class="btn btn-link btn-block" type="button">ち</button></div>
            <div class="d-table-cell border"><button class="btn btn-link btn-block" type="button">し</button></div>
            <div class="d-table-cell border"><button class="btn btn-link btn-block" type="button">き</button></div>
            <div class="d-table-cell border"><button class="btn btn-link btn-block" type="button">い</button></div>
        </div>
        <div class="d-table-row">
            <div class="d-table-cell"></div>
            <div class="d-table-cell border"><button class="btn btn-link btn-block" type="button" disabled>を</button></div>
            <div class="d-table-cell border"><button class="btn btn-link btn-block" type="button">る</button></div>
            <div class="d-table-cell border"><button class="btn btn-link btn-block" type="button">ゆ</button></div>
            <div class="d-table-cell border"><button class="btn btn-link btn-block" type="button">む</button></div>
            <div class="d-table-cell border"><button class="btn btn-link btn-block" type="button">ふ</button></div>
            <div class="d-table-cell border"><button class="btn btn-link btn-block" type="button">ぬ</button></div>
            <div class="d-table-cell border"><button class="btn btn-link btn-block" type="button">つ</button></div>
            <div class="d-table-cell border"><button class="btn btn-link btn-block" type="button">す</button></div>
            <div class="d-table-cell border"><button class="btn btn-link btn-block" type="button">く</button></div>
            <div class="d-table-cell border"><button class="btn btn-link btn-block" type="button">う</button></div>
        </div>
        <div class="d-table-row">
            <div class="d-table-cell"></div>
            <div class="d-table-cell"></div>
            <div class="d-table-cell border"><button class="btn btn-link btn-block" type="button">れ</button></div>
            <div class="d-table-cell"></div>
            <div class="d-table-cell border"><button class="btn btn-link btn-block" type="button">め</button></div>
            <div class="d-table-cell border"><button class="btn btn-link btn-block" type="button">へ</button></div>
            <div class="d-table-cell border"><button class="btn btn-link btn-block" type="button">ね</button></div>
            <div class="d-table-cell border"><button class="btn btn-link btn-block" type="button">て</button></div>
            <div class="d-table-cell border"><button class="btn btn-link btn-block" type="button">せ</button></div>
            <div class="d-table-cell border"><button class="btn btn-link btn-block" type="button">け</button></div>
            <div class="d-table-cell border"><button class="btn btn-link btn-block" type="button">え</button></div>
        </div>
        <div class="d-table-row">
            <div class="d-table-cell"></div>
            <div class="d-table-cell border"><button class="btn btn-link btn-block" type="button">ん</button></div>
            <div class="d-table-cell border"><button class="btn btn-link btn-block" type="button">ろ</button></div>
            <div class="d-table-cell border"><button class="btn btn-link btn-block" type="button">よ</button></div>
            <div class="d-table-cell border"><button class="btn btn-link btn-block" type="button">も</button></div>
            <div class="d-table-cell border"><button class="btn btn-link btn-block" type="button">ほ</button></div>
            <div class="d-table-cell border"><button class="btn btn-link btn-block" type="button">の</button></div>
            <div class="d-table-cell border"><button class="btn btn-link btn-block" type="button">と</button></div>
            <div class="d-table-cell border"><button class="btn btn-link btn-block" type="button">そ</button></div>
            <div class="d-table-cell border"><button class="btn btn-link btn-block" type="button">こ</button></div>
            <div class="d-table-cell border"><button class="btn btn-link btn-block" type="button">お</button></div>
        </div>
    </div>

上のコードでは省きましたが、
実際に使用するときは、各ボタンにidを設定するなどして、
jsから操作できるようにします。

最初のdivに.containerを追加するとレスポンシブになります。
でも大きい画面で見ると五十音表が広がりすぎて、むしろ押しにくい気がするので悩みどころ。

解説

解説というより、
なるべくbootstrap4を使ってラクするためのメモです。

display: table

div要素などをテーブルのように扱うためのスタイルです。
bootstrap4ではclassに.d-table, .d-table-row, .d-table-cellを設定します。
cssだけで実装する場合はdisplay: table, display: table-row, display: table-cellがそれぞれ対応します。

セルのマージン

display: tableは、そのままではセル間にマージンがないため、
border-collapse: separate;
border-spacing: 2pt;
で、2ptのマージンを入れています。

セル

<div class="d-table-cell border">
    <button class="btn btn-link btn-block" type="button">あ</button>
</div>

セルにはオンマウスで下線がつく.btn-linkを指定したボタン要素を使いました。
paddingやhoverなどをcssで自分で設定する手間が省けます。
ただ、btn-linkにはボーダーがないため、親のdiv要素に.borderでボーターをいれています。

<button class="btn btn-link btn-block" type="button" disabled>を</button>

「を」などの該当する検索対象がないものは、disabledにしています。

折り返し設定

最初のdiv要素に.text-nowrapを設定することで、セル内で文字が折り返さないようにしています。
ブラウザのサイズが小さいときに下図のように「その他」が折り返してしまうの防いでいます。
ただし表が画面に収まらなくなってしまいます。

おわりに

紆余曲折したせいで
divタグのdisplayをtableにしたものを使っているけど、
普通にtableタグを使えばよかったかも＞＜

　 Tweet
Qiitaで続きを読む

投稿日：2020-09-20T04:32:14+09:00

【連載】へっぽこエンジニアが「Webを支える技術」を要約してみた（第2章）

はじめに

自分はWebの基礎を固めないままエンジニアとして過ごしていました。
そのことに焦燥感を感じることが多いため、今回技術評論社から出版されている Webを支える技術 -HTTP、URI、HTML、そしてREST (WEB+DB PRESS plus) を要約する連載することにしました。

今回は第2章の要約となります。

前回 - 【連載】へっぽこエンジニアが「Webを支える技術」を要約してみた（第1章）

対象読者

「はじめに」を読んで心当たりのあるエンジニアの方。

第2章 Webの歴史

2.1 Web以前のインターネット

インターネットの起源は1969年に構築された全米をつなぐネットワークのARPANET

全ての文字が英数字だった

TCP/IPによる転送だけでなくバケツリレー式のUUCPによる転送も存在したため遅延があった

2.2 Web以前のハイパーメディア

Memex - ハイパーメディアの起源

1945年に構想された情報システム (構築はされていない)

現在のWebの考え方に近く、電気的に接続した本やフィルムを相互リンクさせる

Xanadu - ハイパーメディアという言葉の誕生

1965年に「ハイパーテキスト」と「ハイパーメディア」という言葉が考案された

ハイパーテキスト

文字情報中心の文書を相互リンクさせる概念

ハイパーメディア

音声や動画など多様なメディアを相互リンクさせる概念

HyperCard - 初の実用的なハイパーメディア

1987年にAppleが開発した

「カード」と呼ばれる文書を単位として相互リンクさせ、
HyperTalkという言語で実行できるスタンドアロンなWebサービス

Web以前のハイパーメディアの問題点

単方向リンクしかサポートしていない

リンクが切れる可能性がある

バージョン管理や情報引用の機能がない

しかし、必要最低限のリンク機能だけというシンプルさがWebを成功に導いた

2.3 Web以前の分散システム

集中システムと分散システム

1970年代以降コンピュータの小型化と性能向上が顕著になり、
複数のコンピュータを組み合わせて処理分散し、
全体の性能向上を図る手法が登場した

RPC - 他のコンピュータの機能を利用

RPC = Remote Procedure Call

分散システムを実現するための技術の1つで、
リモートサーバで実行しているプログラムをクライアントから呼び出すことができる

CORBA、DCOM - 分散オブジェクトへの進化

CORBA = Common Object Request Broker Architecture

DCOM = Distributed Component Object Model

オブジェクト指向の考えを基に、関数呼び出しだけでなくオブジェクト自体をリモートに配置する「分散オブジェクト」という技術が考案された

非常に複雑な仕様で互換性がなかった

Web以前の分散システムの問題点

RPCベースのシステムの問題点は以下の通り

性能劣化の問題

ネットワーク越しの関数呼び出しは時間がかかる

関数の粒度が小さいので呼び出しの回数分さらに時間がかかる

データ型変換の問題

プログラミング言語ごとにサポートするデータ型が異なる

インタフェースバージョンアップ時の互換性の問題

機能追加に伴ってサーバのインタフェースを更新すると、
古いクライアントに対して買い互換性を保てない

負荷分散の問題

サーバ上にクライアントのアプリケーション状態を保存するため、サーバ間にその情報を共有する必要がありそれぞれのサーバに負荷がかかってしまう

2.4 Webの誕生

1990年にハイパーメディアを用いたインターネットベースの分散情報管理システムとしてWebの提案書が書かれた

1993年に公開されたMosaicというブラウザがWebの普及を一気に加速させた
文字だけでなく画像も情報として追加できた

ハイパーメディアとしてのWeb

不特定多数の情報をリンクさせ合うことでシステムを大規模化させやすいという利点

リンク切れをおこしやすいという欠点

分散システムとしてのWeb

クローズドなネットワーク環境ではRPCが優れていたが、
オープンなネットワーク環境ではWebが優れていた

クライアントとサーバ間のインタフェースをシンプルなHTTPで固定したことで、
様々なデバイスやブラウザでWebサービスへアクセスできた

2.5 Webの標準化

Webの仕様策定

クライアントとサーバ間の相互運用性を求められたため、
HTTP、URI、HTMLの標準化が求められるようになった

Web以前のインターネット標準はIETFのRFCと呼ばれる技術仕様だったが、 Webがあまりにも急速に普及したためIETFの仕様策定が追いつかなくなった

そこでW3Cが設立され、 HTTP、URI、HTML、CSSなどの標準化が行われた

RESTの誕生

REST = Representational State Transfer

2000年に命名されたアーキテクチャスタイル

HTTPはハイパーテキスト以外に「リソースの状態(State)」の「表現(Representation)」を転送しているという考え

2.6 Web APIをめぐる議論

SOAPという分散オブジェクト寄りの考えが生み出されたが、
実装の複雑さと運用面に難があることからシンプルなRESTの方が広まっていった

2.7 すべてがWebへ

RESTの普及とともに、UIはWebで統一され始めた

エンドユーザーはWebだけを意識するようになった

今回のうろ覚えワード

TCP/IP
TCP = Transmission Control Protocol
IP = Internet Protocol
安全性重視でインターネットっぽいやり取りするときに使用される通信手順や規約のこと

UUCP
UUCP = UNIX to UNIX copy
UNIXマシン間で情報をやり取りするときに使用されるプログラムのこと

スタンドアロン
ネットワークから切り離されているコンピュータのこと

IETF
インターネット関連の標準化を行なっている団体のこと

感想

インターネットとWebの違いを意識したことがなかった

インターネット
世界中のコンピュータをつなげている大規模な通信網のこと

Web
インターネットを介して情報を公開閲覧する仕組みのこと

参考

TCP/IPとは｜「分かりそう」で「分からない」でも「分かった」気になれるIT用語辞典

UUCPとは｜「分かりそう」で「分からない」でも「分かった」気になれるIT用語辞典

スタンドアロン (standalone)とは｜「分かりそう」で「分からない」でも「分かった」気になれるIT用語辞典

IETFとは｜「分かりそう」で「分からない」でも「分かった」気になれるIT用語辞典

Webとは何なの？インターネットとの違いとは？意味をザクッと簡単説明！ | 拝啓、覆面のパンダ夫婦です

　 Tweet
Qiitaで続きを読む

20200920のHTMLに関する記事は4件です。

【Hello Heroku】HerokuでWebアプリ(HTML)を紹介しよう

0.この記事を書いた経緯

1.Herokuって何？

2.環境

3.前提

4.Heroku側でappを作成する

5.公開するファイルをローカルフォルダに置く

6.ファイルをHerokuにアップする

7.アプリが表示されない場合

8.まとめ

引用・参考サイト

【初心者でもわかる】ラジオボタンのデザインを変更して、好きなケーキにしてしまう

どうも、7noteです。ラジオボタンのデザインを変更して、オシャレなケーキに変えてしまう方法を紹介

普通のラジオボタン

材料はこちら(1人前)

作り方

1.index.htmlにラジオボタンを用意。

2.style.cssで、inputを見えなくして、beforeにお皿を用意。

3. クリックされた時、afterにそれぞれのケーキを用意して完成。

＼完成／

解説・作り方のコツ

まとめ

素材データ配布

おそまつ！

Bootstrapで五十音表

はじめに

完成品

コード

解説

display: table

セルのマージン

セル

折り返し設定

おわりに

【連載】へっぽこエンジニアが「Webを支える技術」を要約してみた（第2章）

はじめに

対象読者

第2章 Webの歴史

2.1 Web以前のインターネット

2.2 Web以前のハイパーメディア

Memex - ハイパーメディアの起源

Xanadu - ハイパーメディアという言葉の誕生

ハイパーテキスト

ハイパーメディア

HyperCard - 初の実用的なハイパーメディア

Web以前のハイパーメディアの問題点

2.3 Web以前の分散システム

集中システムと分散システム

RPC - 他のコンピュータの機能を利用

CORBA、DCOM - 分散オブジェクトへの進化

Web以前の分散システムの問題点

性能劣化の問題

データ型変換の問題

インタフェースバージョンアップ時の互換性の問題

負荷分散の問題

2.4 Webの誕生

ハイパーメディアとしてのWeb

分散システムとしてのWeb

2.5 Webの標準化

Webの仕様策定

RESTの誕生

2.6 Web APIをめぐる議論

2.7 すべてがWebへ

今回のうろ覚えワード

感想

参考

日付別

タグ一覧