What's New Qiita

20191002のHTMLに関する記事は10件です。

  • 投稿日：2019-10-02T21:49:45+09:00

Javascriptでスライドショー作ってみたぉ。

..html

<!DOCTYPE html>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<meta http-equiv="X-UA-Compatible" content="ie=edge">

<title>Document</title>

<link rel="stylesheet" href="css/styles.css">


<div class="container">

    <main>
        <img>
    </main>

    <nav>
        <ul>
            <li id="play">PLAY</li>
            <li id="prev">&lt;</li>
            <li id="next">&gt;</li>
        </ul>
    </nav>

    <ul class="thumbnails">
    </ul>
</div>


..javascript

'use strict';

{

const images = [
    'img/pic00.png',
    'img/pic01.png',
    'img/pic02.png',
    'img/pic03.png',
    'img/pic04.png',
    'img/pic05.png',
    'img/pic06.png',
    'img/pic07.png',
];

//今何番目の画像を表示しているかという変数
let currentNum = 0; 

// サムネイル画像をクリックしたときの関数処理
function setMainImage(value){
    document.querySelector('main img').src = value;
}

// メインのイメージのソースをimages配列のcurrentNum番目とする
// document.querySelector('main img').src = images[currentNum];
setMainImage(images[currentNum]);


// currentクラスを外す独自の関数
function removeCurrentClass(){
    document.querySelectorAll('.thumbnails li')[currentNum].classList.remove('current');
}

function addCurrentClass(){
    document.querySelectorAll('.thumbnails li')[currentNum].classList.add('current');
}



// thumbnailsクラスの取得
const thumbnails = document.querySelector('.thumbnails');

// サムネイル画像たちの生成
images.forEach((value, index) => {
    const li = document.createElement('li');

    if(index === currentNum){
        li.classList.add('current');
    }

    li.addEventListener('click', () => {
        setMainImage(value);
        removeCurrentClass();
        currentNum = index;
        addCurrentClass();
    });

    const img = document.createElement('img');
    img.src = value;
    li.appendChild(img);
    thumbnails.appendChild(li);
});


const next = document.getElementById('next');
next.addEventListener('click', () => {
    removeCurrentClass();
    currentNum++;

    if(currentNum === images.length){
        currentNum = 0;
    }

    addCurrentClass();
    setMainImage(images[currentNum]);
});
const prev = document.getElementById('prev');
prev.addEventListener('click', () => {
    removeCurrentClass();
    currentNum--;

    if(currentNum < 0){
        currentNum = images.length - 1;
    }

    addCurrentClass();
    setMainImage(images[currentNum]);
});

}

..css

.container{
width: 300px;
margin: 0 auto;
user-select: none;
}

ul{
list-style: none;
padding: 0;
margin: 0;
}

main{
margin-bottom: 8px;
}
main img{
width: 300px;
height: 200px;
vertical-align: bottom;
}
nav{
margin-bottom: 8px;
}
nav ul{
display: flex;
justify-content: space-between;
}
nav li {
width: 60px;
border: 1px solid #dedede;
border-radius: 4px;
font-size: 12px;
padding: 4px;
text-align: center;
cursor: pointer;
user-select: none;
}
nav li:hover{
background: #f8f8f8;
}

play{

width: 140px;

}
.thumbnails{
display: grid;
grid-template-columns: repeat(5, 56px);
gap: 5px;
}
.thumbnails li {
cursor: pointer;
opacity: 0.4;
}
.thumbnails li:hover{
opacity: 1;
}
.thumbnails li.current{
opacity: 1;
}
.thumbnails img{
width: 56px;
vertical-align: bottom;
}

  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む
  • 投稿日：2019-10-02T17:45:08+09:00

フィリピンIT Coding Boot Camp ６ヶ月コースの4ヶ月目で思うこと

現在、フィリピンのセブでもないマニラでもないどこかの涼しい雨ばかりの街でIT Boot Camp(6ヶ月)に参加した僕が感じていることやIT勉強したい、身に付けたいけど最善の方法って結局学校？それとも働いた方がいい？などの答えのヒントに少しでもなればなぁと思います。（あくまで全て一個人の僕の感想です）

そもそもIT Boot Campて何？

これは、知らない方もいると思いますが、このIT Boot Campはビリーズブートキャンプの仲間ではなく、アメリカやイギリスなどでも開催されているITの知識を詰め込む集中講座のようなものです！

IT Boot Campの特徴
-超短期集中
-勉強する範囲が6ヶ月コースなどになってくると結構広い。
-授業は全て英語
-毎日コード書く生活漬け
-（他は知りませんが）インターンシップ先を用意してくれる
...こんなところですかね。
とりあえずまとめると、6ヶ月と言う期間でコードを書きWebsiteを作れるように学習し、そしてクライアントを獲得できるまでに成長させよう！
みたいなノリのコースですね。

実際、仕事を自分で得れるほどまでに成長するの？

ここが全員気なっているところですよね〜。
結論から言います。（これもただの僕の意見です）
ただ言われてるだけのことをこなして学校が終わり次第家に帰っていたら絶対無理です。
ただ誤解して欲しくないのは、別にコースを否定している訳ではなく、ただお金をいただいてオンライン上でクライアント様の希望を目に見える形にすると言うのはとても大変と言うことです。6ヶ月のコースでそれが完璧に身につくはずはありません。いくら学校に高い授業料を払っていても、自分で主体的に動かなければ生き残ってはいけません。

それならいかない方がいい？

そう思いがちですが、ちょっと待ってください。
だからこそIT Boot Campでは、エンジニアとして一番大事なスキルである自分をアップデートする方法を学べるんです。
これは本当に日常生活でも役に立つんですが、まず知らない事をすぐに調べると言う情報の収集の癖がつきますし、
その情報収集の仕方やcオーディングでバグが出た際の解き方など応用がきくテクニックもひたすら教えてくれます。

でも授業では、実際そのやり方を教えてくれるだけで自分のスキルとして落とし込むまでの時間は取ってくれないんですよ。
なので、終わった〜って家に帰ってしますと綺麗さっぱり忘れてまたぐるぐる同じことを学んで時間だけ過ぎて言ってしまいます。
要は、自分で学んだことをしっかりと整理しアウトプットできればそれなりに成果の上がるコースだと言うことです。

自分なりのメリットとデメリット

メリット
・コーディングの基礎は身につく（HTML、CSS、JavaScriptなど）。
・マネタイズやクライアントの獲得の仕方まで一応体系的に教えてくれる。
・やる気がある人にとってはいいスピード感でどんどん新しい分野や言語を教えてくれる
・仕事上だと何回もきくことに抵抗があるが生徒の立場なら何回も納得がいくまで聞ける。
・授業はほぼどこでも英語なので英語が上達する
・エンジニアになりたいけど、何をどうやって始めたらいいの？って言う方には唯一お勧め！
デメリット
・アカデミックな内容も多いので実践で活かせないこともある。
・前回の記事でも書きましたが、やっぱり実際に企業に入ろうとすると現実的にたかだか数ヶ月しかコーディングかじってないと言う現実を痛感するので自分でアンテナをしっかりはってどの言語やどんなスキルが生きるかを模索し続けながら勉強していく必要がある事。
（これに関してはいいきっかけにもなるので、メリットでもありますね！）
・日本の案件は全くカリキュラム内では取ろうとしないので海外案件を狙うというハードルの高さが少しある。
・カルチャーギャップで苦しむ時がある（来てみて感じてみてください笑）

最後に

未経験で企業に入っていきなりコーディングを詰め込まれても正直限界がありますが、そのあとの仕事は自分で取らなくても用意されていると言うことになります。
一方、こういったコースを受講しいいご縁にも恵まれ、フリーランスとして活躍できれば自分の仕事を選ベルし嫌なら断れます。
値段だって交渉できます。とにかく規制がありません。自由です。

これは勧誘でもないし、IT Coding Boot Campというシステムへの悪口でもありません。
ただ、実際に足を踏み入れたことがない方や、少しでも興味がある方達がこの記事をみて『やっぱやーめた』とかなったり『背中を押せたり』できればなと思い本音で全て書いてあリます。
なので、なんか言っていることが矛盾していればこのコースのいい側面もあるけど嫌なところや不満も抱えながらコーディングに励んでいたということです笑

以上、僕の体験談でした。
何かありましたらコメントください。
読んでいただきありがとうございました。

  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む
  • 投稿日：2019-10-02T17:43:40+09:00

TECH::EXPERT_基礎メンター試験①

a

  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む
  • 投稿日：2019-10-02T17:18:26+09:00

WEBの知識0の私がURLを贈る

動機

誕生日に手紙を贈るのは普通すぎると思って, ちょっと勉強中のHTMLやらを使ってURLを贈ることにしました.
なんかまずい部分あれば教えていただけると幸いです...

あまりにも酷いコード全貌 : github

どんなものを作ったのか

生年月日いれて, 当人の誕生日に合致していたら次のページ
→ドット絵のGIFがお祝いする

52thとかいう書き方あってるんかな...

※iphone向けでしか作っていません.

開発環境

・sublime
・xampp 7.3.9

web上に公開する

progateというサイトのこちら(自分で作ったWebページをインターネット上に公開しよう！)を参考にgithubを用いてHPをweb上に公開しました.

スマホでの画面を確認する

xamppを用いてlocalhostで作成したHPを確認しながら作成しました.
絶対もっと楽な方法ある...

どのHPでも[F12]キーを押せば,そのHPのソース等が表示される開発者向けページになってくれます.
今すぐ[F12]キーを押せば下画像のような画面が表示されると思います.
このページではスマホで表示した場合の画面を確認することもできます.
しかもiphone6/7/8,Galaxy S5,ipadとか色々選べます(画像左上).

キャプチャ.PNG

ドット絵

piskelというサイトでドット絵作成.ドット絵描くのが非常に楽しかった.

スマホ用に

やさしいWebアプリ
を参考にしました.

    <meta name="viewport" content="initial-scale=1.0">

でスマホ向け画面になってくれるみたいです.

画像の表示を横幅に合わせるために CSSで調整.

.gif img{
    width:100%;
}

誕生日を入力してもらうフォーム

誕生月・日のセレクトボタンを作成.

    <form>

        <select name="sel2">
            <option value="#"></option>
            <script type="text/javascript">
            for(var i=1;i<13;i++){
                document.writeln("<option>" +i + "月</option>");
            }
            </script>
        </select>

        <select name="sel3">
            <option value="#"></option>
            <script type="text/javascript">
            for(var i=1;i<32;i++){
                document.writeln("<option>" +i + "日</option>");
            }
            </script>

        </select>
    <input type=button value="決定" onClick="return check(sel2.value,sel3.value)">

    </form>

function check()では当人の誕生日が入力されたら次のページへ
という感じ.
違えばalertでます.

スマホでの音声出力

audioタグでは, safariやChromeで音楽の自動演奏ができないと知った時にはびっくりしました.
こちらのサイトを参考に, 画面タップで音楽が流れるような仕様に.

    <audio autoplay loop id="audio">
    <source src="happy_birthday_to_you_unpluged.mp3">
    </audio>

    <script type="text/javascript"> 
    document.addEventListener('click', audioPlay);
    function audioPlay() {
        document.getElementById('audio').play();
        document.removeEventListener('click', audioPlay);
    }   
    </script>

おわり

こんな初歩的なものでも知識が0からだったので2~3日程度かかったきがする.
(他のこともしていたから,と言い訳.)

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

stylesheetで外部ファイルを読み込む方法がわかりません。

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css"
このような記述方法がわかりません。。。

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

株式会社セレスさんの3daysインターンシップに参加した話

株式会社セレス3daysインターンシップ

IMG_8170.JPG

【インターンシップの概要】

Day1：アイディアソン
テーマに沿って新しいメディアを自分達で考えてみましょう！ とはいえ、アイディア出しって何からするの？という方もいるかもしれませんが、心配いりません。 しっかりとアイディア出しのノウハウや企画のコツをお教えします！

Day2：ハッカソン
1日目のアイディアソンで出たアイディアを、実際にカタチにしてみましょう！ チームで開発を行うので、自分の知らない技術や得意な技術を教え合う事もあります。

Day3：ハッカソン＆成果発表
最終日は成果発表を行ってもらいます。開発と同時進行で自分たちの成果をまとめたプレゼンの準備も進めていきましょう。 発表後はプロのエンジニアからフィードバックを行うので、今後の開発に役立ててください！

※サポーターズ引用

1日目は色々なアイデア出しの手法を教えてもらった。

Break the bias

否定、逆説からアイデア出しをする手法。
調べすぎないのも重要

シナリオグラフ

いつ、誰が、どこで、何した、という４点から選択肢をピックアップして物語にすることでアイデアを生み出すフレームワーク

ブレスト

  1. 批判しない
  2. 自由発言
  3. 質より量
  4. アイデアのシナジー　

などなど...

【実際に製作したサービス】

ライブ後の感動をファン同士で共有できるサービス「Yo-in」

好きなアーティストのライブに参戦した後って、なんだか悲しい気分になりませんか？虚無感というか...（特にぼっち参戦だったら）そんな人たちのためにライブ後にファン同士で交流できるサイトを作りました！
ライブ映像というのは全てが映像化されて永遠に保存できるものではなく、「あのとき〇〇が手振ってくれた！」などのその時のその場でしか味わえない感動があると思います。そういった「鮮度の高い感動をその場で共有できるお友達ができたら嬉しい」という方のためのアプリです。自分の参戦するライブが決まったらこのサイトを通じてファンの交流会に参加して仲間を見つけてみませんか？ぜひ「余韻」に浸ってみってください！

【エンジニアの方々のフィードバック】

・今はツイッターで行われている気がする。そっからデータ取ってきたりすればいいかも？
・「発狂」にフォーカス当ててるところ評価する
・最近だとマップアプリで検索するとすぐ出てきそう…
・どういう風な提案かと思いきや二次会提案サービスでちょっと残念。
・ライブ本体にどうやって寄生するのかが難しそうに感じました
・ライブに限らなくてもいいんじゃないじゃなあ。
・いいね！
・作り込まれていてよかったです。
・ライブの後はカラオケや食事に行きたくラリますよね！駅も混んでますし…。
・お疲れ様です。プレゼンがすごく上手でした！ライブの後に飲み会行きたいのは分かります！ただLIVEならではの工夫が欲しいです。今回のデモストーリーだと、普通の飲み屋予約サービスとの違いがわかりませんでした。
・プレゼン資料が見やすく、説明も聞きやすくて良かった
・twiplaなんかで募集してたりするので、専門のサービスを作るのもアリだなと思いました。
・感動を共有したい、帰るまで→ライブ後の居酒屋探し・・・？
・3日間お疲れ様でした！サービスもデザイン含め凄くよくまとまっていました！ライブとかの後に余韻を共有したいというのは非常にニーズがありそうだと思いました。
・発想も面白いと感じ、ライブ会場やレストランとの場所の連携もとれていて機能性も良いと思った。空席が分かるのも、ユーザー・レストランニーズ満たせて良いと感じました。
・マネタイズが少し弱い気がしました。サイトの作りはきれいな感じにまとまっていたと思います。
・デザインがきれいで良かったです。
・余韻で乗っかる系のサービスは良さそうですね。集客は何もしなくてもできそう。
・ライブに限らず色んな余韻を共有しあえるといいのかなとも思ったり

【インターン終えての感想と反省】

・Twig,slim,PHP, Bootstrapなど知らない技術ばかりだったけれどフレームワークやチートシーををとても丁寧に用意してくれていたのでそれなりに形にして実装することができた。
・チームの中でタスクと進捗を共有する時間を十分に取ったことで、時間内に作り上げることができた。
・枝葉末節にとらわれず、とりあえず「最低限動くものを作る」という感覚を養うことができた。
・既存のソーシャルアプリ（twitterなど）との違い、「なぜこのアプリでなければいけないのか？」をうまく伝えられなかった。
・他にも実装したい機能はたくさんあった。

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

ローディング画面を作ったら自信作になった件

今日、teratailの回答でローディング画面を作ったらなかなかうまくできたので記事にします。
以下コードとCodePenです。

<body>
  <div id="loading">
    LOADING
  </div>
  <main>
    <div class=menu>
      MeNu
    </div>
    <img id=topimage src=https://4k-wallpaper.com/3840x2160/4k-Ultra-HD_00348.jpg>
  </main>
</body>

* {
  margin: 0;
  padding: 0
}
main {
  display:none
}
#topimage {
  width: 100%
}
.menu {
  height:2em;
  line-height: 2em;
  position: absolute;
  top: -2em
}

window.onload = function () {
  $("#loading").delay(1000).fadeOut();
  $("main").delay(2000).fadeIn();
  $("#topimage").delay(3000).animate({width:"90%",marginLeft:"5%",marginTop:"2em",height:"auto"},"slow", "swing");
$(".menu").delay(3000).animate({top:"0"},"slow", "swing");
}

See the Pen PoYMbNp by asuchi0819 (@asuchi0819) on CodePen.

頑張った〜

  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む
  • 投稿日：2019-10-02T10:53:58+09:00

【IE】selectboxをaタグで囲うとEnterで選択できない

スクリーンショット 2019-10-02 10.57.48.png
Enterで決定できない！！

解決方法は？

  1. aタグで囲うのをやめる。
  2. そもそもIEだけだし致命的ではないので無視。

とはいえ、IEユーザーの利用が多い箇所では少し不便です。
selectboxをaタグで囲うパターンはあまり無いですが、心当たりがある場合は直しときましょう！

【追記】
@rryu さんに教えてもらい、そもそもaタグの中にselect要素を入れることは不適切だということが分かりました。不適切な構造且つバグも発生するので今後は見つけ次第修正します！
参考：https://developer.mozilla.org/ja/docs/Web/HTML/Element/a#Properties

  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む
  • 投稿日：2019-10-02T10:53:58+09:00

【IE】selectboxをaタグで囲うとなぜかEnterで選択できない

スクリーンショット 2019-10-02 10.57.48.png
Enterで決定できない！！

解決方法は？

  1. aタグで囲うのをやめる。
  2. そもそもIEだけだし致命的ではないので無視。

とはいえ、IEユーザーの利用が多い箇所では少し不便です。
selectboxをaタグで囲うパターンはあまり無いですが、心当たりがある場合は直しときましょう！

参考サイト

IEさんはまだまだ現役です。。
https://www.atmarkit.co.jp/ait/articles/1503/11/news134.html

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

【Blob・File・Base64・データURL・FileReader】 それぞれの特徴とブラウザへの表示について

はじめに

この記事では、ファイルを受け取ってからブラウザ上に表示するまでに登場する、インターフェースやオブジェクトの特徴を調べ、みなさんが要件に適したファイル操作を選択できるよう祈りながら書きました。

それぞれの特徴

Blob

  • HTML5のFile APIで定義されたインターフェースである
  • バイナリ・ラージ・オブジェクトの略である
  • Blobオブジェクトには、生のバイナリデータが格納されている
  • プロパティはsizeとtypeのみで、中のデータに直接アクセスすることはできない
  • Blobオブジェクトはimmutable(不変)であり、を直接編集することはできない
  • が、sliceメソッドによる分割や、コンストラクタによる結合を行うことができる

https://developer.mozilla.org/ja/docs/Web/API/Blob
https://ja.javascript.info/blob

File

  • HTML5のFile APIで定義されたインターフェースである
  • Blobインターフェースを継承しているため、Blobを引数に取るメソッドに渡すことができる
  • 異なるのは、よりファイルを扱いやすくするために、name,lastModifiedプロパティが追加されている点
  • 　<input type="file">にローカルファイルを与えると、files属性か、onchangeイベント経由で、 FileListオブジェクトが得られる。FileListオブジェクトに対してインデックスを渡すことでFileオブジェクトを取得することができる

https://developer.mozilla.org/ja/docs/Web/API/File
https://ja.javascript.info/file

FileReader

  • FileReaderは、Blob（File）オブジェクト内のバイナリデータを読み込むためのオブジェクト
  • FileReaderオブジェクトには、下記のようなメソッドがあり（非推奨のものは除く）、Blobオブジェクトを様々な形式で読み取ることができる
    • readAsArrayBuffer() →ArrayBuffer
    • readAsDataURL() →DataURL
    • readAsText() →ArrayBuffer
    • abort() →読み取り中断

https://developer.mozilla.org/ja/docs/Web/API/FileReader
https://ja.javascript.info/file

Base64

  • Base64というクラスやインターフェースは存在せず、バイナリデータをStringに変換するためのエンコード方式である
  • エンコード前のバイナリデータと比べて約33~37%データサイズが増加する

データURL

  • data:[<mediatype>][;base64],<data>という形式で記述されたURLである
  • 例えばテキストデータでは、data:text/plain;base64,dGVzdA==のような感じのURLで、これをアドレスバーに入力するとtestと表示される
  • jpeg画像ファイルを示すデータURLはdata:image/jpeg;base64,という文言から始まる
  • URL内にテキストや画像データが埋め込まれているため、URL自体が比較的大きいサイズになる

BlobやFileに格納されているファイルをブラウザ上に表示する方法

以下、画像ファイルの表示を例にして説明する。
画像ファイルをブラウザ上に表示するためには、imgタグのsrc属性にURL（データURLを含む）を与える必要がある。

URLを取得するには２つの方法がある
- Blob(File)をデータURLとして読み取る
- Blobを参照するURLを生成する

以下、方法とメリット・デメリットを記述する

BlobをデータURLとして読み取る

const reader = new FileReader();
reader.onload = function(e) {
  console.log(e.target.result) //データURLがコンソールに表示される
}
reader.readAsDataURL(blob) //ここでBlobオブジェクトを読み込み、読み込みが完了したタイミングでreader.onloadに定義した関数が実行される

メリット

  • ファイルの読み込みを非同期で行うことができる。
  • URLそのものにデータが埋め込まれているため、URLを直接サーバーに渡すことが可能。

デメリット

  • Base64エンコードの仕様に則り、データサイズが１３３％ほどに増える
  • メモリ上にファイルを展開するため、メモリを圧迫する

Blobを参照するURLを生成する

const imageUrl = window.URL.createObjectURL(blob) //URL生成
console.log(imageUrl) //データURLがコンソールに表示される
window.URL.revokeObjectURL(imageUrl) //URL破棄

メリット

  • URLの生成が即時完了する

デメリットあるため、

  • 一時的なURLであり、ブラウザを開き直したり、他端末や他ブラウザに渡してもアクセスできない
  • window.URL.revokeObjectURL()によってURLを破棄しないと、ブラウザを閉じるまでメモリ上にURLが残ってしまう
  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む

日付別

タグ一覧