投稿日：2020-06-04T23:56:36+09:00

ローカルの画像をCSSで適用する方法

プログラミングの勉強日記

2020年6月4日　Progate Lv.83
ウェブページ制作中
CSS(back-ground-image)で背景画像が表示されなかった。

background-imageの使い方

　background-image: url( 画像ファイルのURL );
　background-image: url("画像ファイルへのパス");

urlと半角括弧の間にはスペースを入れない
index.html
<style>
  body{
    background-image:url(photo/S__520912916.jpg);
  } 
</style>
このようにindex.htmlファイルと同じフォルダ内にphotoフォルダがあり、その中の画像ファイルS_520912916.jpgを背景として設定する場合、url()のファイルパス「photo/S_520912916.jpg」となる。
stylesheet.css
/* スタイルシートと同じディレクトリ */
background-image: url("image.png");  

/* スタイルシートから１つ上の階層 */
background-image: url("../image.png"); 

/* スタイルシートから１つ下の階層（今回の場合） */
background-image: url("./photo/S__520912907.jpg");

　 Tweet
Qiitaで続きを読む

投稿日：2020-06-04T22:48:20+09:00

TechAcademyが無料公開している「HTML・CSS入門講座」を受講する～HTML第1-1回～

アジェンダ

HTMLとは

HTMLファイルを作るためのルール

HTMLファイルを作る

HTMLとは

HTMLとは、Webブラウザに文字を表示させるための言語。

HTMLファイルを作るためのルール

HTMLで書くこと
すなわち、意図通りに表示されていない場合、HTMLの文法に違反しているということになる。

ファイル名の最後に.htmlをつけること
.htmlをつけないと、WebブラウザがHTMLファイルとして認識してくれない。

テキストエディタで書く
例えば、Wordは文字色やフォントなどの情報が含まれてしまうためNG。

HTMLファイルを作る

テキストエディタで「Hello,World!」と打ち込み、index.html と名前を付けて保存する。
index.html
Hello, World!
このindex.htmlをWebブラウザで開くとこんな感じ。

Webブラウザに文字が表示されている。

おわりに

今回はお決まりごとを確認する内容だった。
過不足なく、必要な情報のみを教えてくれている。さすがTechAcademy。

次回 >> ここ

参考

1-1 HTMLとは何か？（はじめてのHTML）

　 Tweet
Qiitaで続きを読む

投稿日：2020-06-04T22:38:24+09:00

本当に0からVue.js環境構築

Homebrewインストール

1. インストールされているか確認
brew -v
バージョンが返ってくればインストールされている。(node.jsインストールへ)

2. brewインストール

ターミナルに以下のスクリプトを実行
/bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install.sh)"
パスワードを入力

Installation Success! と表示されたらインストール完了。

node.jsインストール

1. インストールされているか確認
node -v
バージョンが返ってくればインストールされている。(yarnインストールへ)

返ってこなかった場合はnode.jsインストールへ

2. node.jsインストール

ターミナルに以下のコマンドを入力
brew install nodebrew
nodebrewのバージョンを確認してバージョンが返ってくればインストールされている
nodebrew -v
node.jsインストール準備
nodebrew ls-remote
バージョン番号がいっぱい出てきたら成功

こんな感じのエラーが出てきたら↓
Fetching: https://nodejs.org/dist/v7.10.0/node-v7.10.0-darwin-x64.tar.gz
Warning: Failed to create the file 
Warning: /Users/whoami/.nodebrew/src/v7.10.0/node-v7.10.0-darwin-x64.ta
Warning: r.gz: No such file or directory

curl: (23) Failed writing body (0 != 941)
download failed: https://nodejs.org/dist/v7.10.0/node-v7.10.0-darwin-x64.tar.gz
以下のコマンドでディレクトリ作成
mkdir -p ~/.nodebrew/src
node.jsインストール
nodebrew install-binary stable
バージョン確認
nodebrew ls
以下のように表示されたら
v7.1.0

current: none
表示されているバージョンを有効化する
nodebrew use v7.1.0
もう１度nodebrew lsを入力するとこんな感じになっているはず
v7.1.0

current: v7.1.0
環境パスを通す
echo 'export PATH=$HOME/.nodebrew/current/bin:$PATH' >> ~/.zprofile
ここでターミナルを再起動する or 以下のコマンドを入力
source ~/.bash_profile
最後にnodeのバージョンを確認
node -v
yarnインストール
brew install yarn
バージョンを確認する
yarn -v
バージョンが返ってくれば成功

Vueインストール(本題)
yarn global add @vue/cli
yarn global add @vue/cli-init
これでVueがインストールされるのでバージョン確認
vue --version
バージョンが返ってくれば成功

Vueプロジェクトを作成する
vue init webpack vue-app
質問がいっぱいくるので選択していく。基本的には全てpackage.jsonで変更できるのであまり気にする必要はない
? Project name (vue-app) //Enterを押す
? Project description (A Vue.js project) //Enterを押す
? Author (名前 <メアド>) //Enterを押す
  Runtime + Compiler: recommended for most users 
  Runtime-only: about 6KB lighter min+gzip, but templates (or any Vue-specific HTML) are ONLY allowed in .vue files - render functions are required elsewhere //Runtime+Compilerの方を選択してEnterを押す
? Install vue-router? (Y/n) //nを押してEnterを押す
? Use ESLint to lint your code? (Y/n) //nを押してEnterを押す
? Set up unit tests (Y/n) //nを押してEnterを押す
? Setup e2e tests with Nightwatch? (Y/n) //nを押してEnterを押す
? Should we run `npm install` for you after the project has been created? (recommended) (Use arrow keys)
❯ Yes, use NPM 
  Yes, use Yarn 
  No, I will handle that myself //Yes, use Yarnを選択してEnterを押す
ダウンロードが完了したらディレクトリができているので移動
cd vue-app
必要なモジュールをインストール
yarn install
ローカルでアプリケーションを起動する
yarn dev
以下のように表示されたら成功。http://localhost:8080 に行くと最初のページが表示されている

最後のlocalhostが起動しなかった場合

エディタでvue-appを開いてconfig/index.jsに行く

17行目のポート番号を8081に変更する

もう一度ターミナルでyarn devを実行

vue環境構築完了!

参考文献

https://qiita.com/white0221/items/d371a19b59af4cba8e8b

https://qiita.com/Mitsuzara/items/4dea8c0aa95d6284980a

https://utano.jp/entry/2018/02/vue-cli-genearte-webpack-project/

https://qiita.com/zaburo/items/29fe23c1ceb6056109fd

https://qiita.com/kyosuke5_20/items/c5f68fc9d89b84c0df09

　 Tweet
Qiitaで続きを読む

投稿日：2020-06-04T18:33:43+09:00

Chart.jsで横スクロール可能なグラフを作る

概要

Chart.jsでは普通にグラフを作ると画面の幅に合わせて１つのデータ当たりのサイズをレスポンシブに調整して表示してくれます．

とても便利ですが，データの量が多いとかなり見づらくなってしまいます．

そこでデータ１つ当たりの横幅を固定して画面に収まりきらない分は横スクロールで見えるようにしようと思いましたが，かなり苦労したのでメモを残します．参考になれば幸いです．

完成図

今回は棒グラフが必要だったので，棒グラフを作成しました．
他の種類のグラフは試していませんが，データ構造が同じようなグラフなら上手くいくと思います．

図の下にスクロールバーが描画され，スクロールバーを動かすとスクロールすることができます．
(右の方はラベルしか描画されていませんが，値を入れなかっただけなので気にしないでください．）

実行環境

ブラウザ: Google Chrome
Chart.js バージョン: 2.9.3
CDNを読み込んで使っています
<head>
  <script src="https://cdn.jsdelivr.net/npm/chart.js@2.9.3/dist/Chart.min.js"></script>
</head>
HTML

まずhtmlがこちらです．
<div class="chartWrapper" style="position: relative; overflow-x: scroll;">
  <div class="chartContainer" style="height:200px;"> //高さは好きに設定
    <canvas id="chart" style="position: absolute; left: 0; top: 0;"></canvas>
  </div>
</div>
canvasを２つのdivで囲っています．

Javascript

続いてJavasciptがこちらです．
var xAxisLabelMinWidth = 15; // データ当たりの幅を設定
var data = [12, 19, 3, 5, 2];
var width = data.length*xAxisLabelMinWidth; // グラフ全体の幅を計算
document.getElementById('chart').style.width = width+"px"; //　グラフの幅を設定
document.getElementById('chart').style.height = "200px"; //htmlと同じ高さを設定

var myChart = new Chart(document.getElementById('chart').getContext('2d'), {
    type: 'bar',
    data: {
      labels: ['a', 'b', 'c', 'd', 'e'],
        datasets: [{
            label: 'sample data',
            data: data,
        }]
    },
    options: {
        responsive: false, //trueにすると画面の幅に合わせて作図してしまう
    }
});
データ当たりの幅をまず設定して，そこからグラフ全体の幅を計算しています．
これによりデータごとの描画サイズを固定することができます．

完成

以上のコードで横スクロール可能な図を作成できると思います．

参考

https://stackoverflow.com/questions/39473991/how-to-make-a-chart-js-bar-chart-scrollable
https://stackoverrun.com/ja/q/10874652

これらを参考にしましたが，自分の環境ではうまくいかなかったので修正しています．

　 Tweet
Qiitaで続きを読む

投稿日：2020-06-04T12:41:58+09:00

【備忘録】ブラウザで音声認識する

ブラウザに内蔵のAPIで音声認識する場合。
パラメータで認識中の途中結果を取得したり、連続で認識するといった変更はあるけど、とりあえず日本語の設定のみ。

検証環境

Google Chrome バージョン: 81.0.4044.138

ソースコード
html
<button id='start'>開始</button>
javascript
const start  = document.getElementById('start');

SpeechRecognition = webkitSpeechRecognition || SpeechRecognition;

const recognition = new SpeechRecognition();
recognition.lang = 'ja-JP';

recognition.onresult = (event) => {
  console.log(event.results[0][0].transcript);
}

start.onclick = (event) => {
  recognition.start();
};
チラシの裏（読まなくてもいい余談）

試してみると、結構正確に認識してくれます。音声の文書起こしをしたいときにわざわざ外部サービスを使わなくていいので便利です。
どちらかといえば、どんな局面で使うのか、を考える方が重要ですね。

　 Tweet
Qiitaで続きを読む

投稿日：2020-06-04T05:27:55+09:00

初心者によるプログラミング学習ログ 334日目

100日チャレンジの334日目

twitterの100日チャレンジ#タグ、#100DaysOfCode実施中です。
すでに100日超えましたが、継続。
100日チャレンジは、ぱぺまぺの中ではプログラミングに限らず継続学習のために使っています。
334日目は、

おはようございます
334日目　1.5h
・ポートフォリオ作成
モーダルウインドウ実装でいろいろ調べているうちに寝落ちしちゃった#早起きチャレンジ #駆け出しエンジニアと繋がりたい #100DaysOfCode
— ぱぺまぺ@webエンジニアを目指したい社畜 (@yudapinokio) June 3, 2020

　 Tweet
Qiitaで続きを読む

投稿日：2020-06-04T03:58:08+09:00

再度プログラミングの復習

作りたい物のラフ画を箇条書きで表してみました。箇条書きなので見にくかったらすみませんf(^ー^;　

ラフ画を元に表のページを
htmlとcssで書いてみようかと思います。

つまずきそうな点
・padding　
・divで書いてる時のコードの配置等度々間違えそうです…

　 Tweet
Qiitaで続きを読む

投稿日：2020-06-04T00:59:55+09:00

obniz を使って A のアイデンティティを見つけるサイトを作った。

手元の様子↓

サイトの様子↓

pic.twitter.com/e2qBzOQtWW
— caz(ドライブ) (@cazu_PR) June 3, 2020

ふー。obniz でサイトのオブジェクトを動かせるのは楽しいですね。
ちなみにサイトのURLは->https://a-identity.ml/ になりますが、html に obniz_id を入力しないと動かせないので、obniz を所持している方のみ遊べます。obniz を持っていない方は、これを機会に購入ましょう。(製品詳細:https://obniz.io/ja/products/obnizboard/)

今回記述した html はこちらです。
Obniz_ID 記述を、自分の所持している Obniz_ID に書き直しましょう。

index.html

| <!DOCTYPE html> |
|:--|
| <html> |
|  |
| <head> |
|   <meta charset="utf-8"> |
|   <title>A←→</title> |
|   <meta name="description" content="Hello, WebVR! • A-Frame"> |
|   <script src="https://aframe.io/releases/1.0.4/aframe.min.js"></script> |
|   <script src="https://unpkg.com/obniz@2.3.0/obniz.js" crossorigin="anonymous"></script> |
| </head> |
|  |
| <body> |
|   <a-scene background="color: #FAFAFA"> |
|     |
|     <a-text id="cylinder" position="0.5 1 -2" color="#000000" value="A"></a-text> |

|     <a-text position="-2 1 -2" color="#000000" value="pple"></a-text> |
|     <a-text position="-5 1 -2" color="#000000" value="ndroid"></a-text> |
|     <a-text position="-8 1 -2" color="#000000" value="ction"></a-text> |
|     <a-text position="-11 1 -2" color="#000000" value="rt"></a-text> |
|      |
|   </a-scene> |
|  |
|   <script> |
|     var sceneEl = document.querySelector('a-scene'); |
|     var cylinder = sceneEl.querySelector('#cylinder'); |
|  |
|     // 初期位置の記録 |
|     let defaultX = cylinder.object3D.position.x; |
|  |
|     var obniz = new Obniz("Obniz_ID");  // 自分のObniz_IDをいれましょう。 |
|  |
|     obniz.onconnect = async function () { |
|       obniz.display.clear(); |
|       obniz.display.print("3D A-Frame"); |
|       obniz.display.print("　↑↓"); |
|       obniz.display.print("obniz"); |
|       obniz.switch.onchange = function (state) { |
|         if (state === "push") { |
|           obniz.display.print("push"); |
|           cylinder.object3D.position.x = defaultX; |
|         } else if (state === "right") { |
|           obniz.display.print("right"); |
|           cylinder.object3D.position.x += 0.3; |
|         } else if (state === "left") { |
|           obniz.display.print("left"); |
|           cylinder.object3D.position.x -= 0.3; |
|         } else { |
|           obniz.display.clear(); |
|         } |
|       } |
|     } |
|  |
|   </script> |
| </body> |
|  |
| </html> |

ローカル環境でも遊べますが、デプロイしたい方は下記サイトを参考にするといいと思います。
https://qiita.com/oganyanATF/items/7fb681e863d8681c9039

最後までご覧いただきありがとうございました。

　 Tweet
Qiitaで続きを読む

投稿日：2020-06-04T00:46:47+09:00

【A-Frame】WebVRを自分のサイトに組み込んでみる

A-Frameを使用してWebVRを自分のサイトに組み込んでみました。短いコードでWebVRが作成できるのがすごいです。

実際の画面がこちらです。

公開サイト

https://3dblock.jp

以下の「ブロックを作成」メニューから飛べます。

今回追加した機能

視点を合わせてクリックをするとブロックを配置

置いたブロックをクリックするとランダムで色変更

十字キーで左右上下の移動

テキスト表示(英語)

今回追加しなかった機能

今後は置いたブロックをクリックしたら色を指定できるようにしたい

テキスト表示(日本語)　ここで出来そうです

空間(sky)と地面(ground)は最初はテクスチャを張っていたが、雰囲気に合わず一旦削除

コード
<!DOCTYPE html>
<html>

<head>
    <script src="https://aframe.io/releases/0.5.0/aframe.min.js"></script>
    <script src="https://unpkg.com/aframe-teleport-controls@0.2.x/dist/aframe-teleport-controls.min.js"></script>
    <script src="https://unpkg.com/aframe-controller-cursor-component@0.2.x/dist/aframe-controller-cursor-component.min.js"></script>
    <script src="https://rawgit.com/ngokevin/kframe/csstricks/scenes/aincraft/components/random-color.js"></script>
    <script src="https://rawgit.com/ngokevin/kframe/csstricks/scenes/aincraft/components/snap.js"></script>
    <script src="https://rawgit.com/ngokevin/kframe/csstricks/scenes/aincraft/components/intersection-spawn.js"></script>

    <body>
        <a-scene>
            <a-assets>
                <a-mixin id="voxel" geometry="primitive: box; height: 0.3; width: 0.3; depth: 0.3" material="shader: standard" random-color snap="offset: 0.25 0.25 0.25; snap: 0.3 0.3 0.3 " img id="boxTexture" src="https://i.imgur.com/mYmmbrp.jpg"></a-mixin>
            </a-assets>

            <a-cylinder id="ground" collar="white" radius="30" height="0.1"></a-cylinder>
            <a-sky color="#CCFFFF" radius="900"></a-sky>

            
            <a-entity id="teleHand" hand-controls="left" teleport-controls="type: parabolic; collisionEntities: [mixin='voxel'], #ground"></a-entity>
            <a-entity id="blockHand" hand-controls="right" controller-cursor intersection-spawn="event: click; mixin: voxel"></a-entity>

            
            <a-camera>
                <a-cursor intersection-spawn="event: click; mixin: voxel"></a-cursor>
            </a-camera>

            <a-text position="-3.5 1.25 -3" value="welcome to my website!&#13;&#10;(Move or Click!)" color="#222222" scale="3"></a-text>
        </a-scene>

    </body>

</html>
本当に短いです。。笑

解説

以下の部分でクリックしたらブロックが表示されるようにしています。
ブロックの大きさは、height・width・depthで定義しています。
<a-assets>
<a-mixin id="voxel" geometry="primitive: box; height: 0.3; width: 0.3; depth: 0.3" material="shader: standard" random-color snap="offset: 0.25 0.25 0.25; snap: 0.3 0.3 0.3 ></a-mixin>
</a-assets>

<a-scene>
<a-text position="-3 2.25 -3" value="welcome to my website!&#13;&#10;(Move or Click!)" color="#222222" scale="3"></a-text>
</a-scene>
positionでx軸、y軸、z軸の順で座標を定義しており、半角スペースで区切ります。忘れた時には以下のイラストが役立ちます。

参考にしたサイト

公式ページ
- https://aframe.io/docs/1.0.0

今後の改善点

この状態でデザインがしやすいとは決して言えないため、改良していきたい

objファイルの取込も活用して、もう少し世界観を表現したい

他の技術ももう少し組み合わせたかった

　 Tweet
Qiitaで続きを読む

20200604のHTMLに関する記事は9件です。

ローカルの画像をCSSで適用する方法

プログラミングの勉強日記

background-imageの使い方

TechAcademyが無料公開している「HTML・CSS入門講座」を受講する～HTML第1-1回～

アジェンダ

HTMLとは

HTMLファイルを作るためのルール

HTMLファイルを作る

おわりに

参考

本当に0からVue.js環境構築

Homebrewインストール

1. インストールされているか確認

2. brewインストール

node.jsインストール

1. インストールされているか確認

2. node.jsインストール

node.jsインストール準備

node.jsインストール

環境パスを通す

yarnインストール

Vueインストール(本題)

Vueプロジェクトを作成する

最後のlocalhostが起動しなかった場合

参考文献

Chart.jsで横スクロール可能なグラフを作る

概要

完成図

実行環境

HTML

Javascript

完成

参考

【備忘録】ブラウザで音声認識する

検証環境

ソースコード

チラシの裏（読まなくてもいい余談）

初心者によるプログラミング学習ログ 334日目

100日チャレンジの334日目

再度プログラミングの復習

obniz を使って A のアイデンティティ を見つけるサイトを作った。

【A-Frame】WebVRを自分のサイトに組み込んでみる

公開サイト

今回追加した機能

今回追加しなかった機能

コード

解説

参考にしたサイト

今後の改善点

日付別

タグ一覧

obniz を使って A のアイデンティティを見つけるサイトを作った。