コンテンツへスキップ

Blumaという使いやすいCSSワークフレームがあると聞いて使ってみました。

Webアプリを作るには画面表示も必要。使いやすいCSSワークフレームがあると聞いて使ってみました。

目次

  • 目的
  • bluma
  • 作ったもの(例)
  • おまけEmmet
  • 参考

目的

Railsでwebアプリを作ろうと思っているんですが、その後のビューを作成することが目的です。グラフを表示するのが機能のメインなんですが、使いやすいCSSワークフレームがあると聞いたので周りのデザインを先に作ってしまおうと思います。 構成は以下のようになっています。

構成

  • top画面
  • アプリ紹介画面
  • 詳細ページ1
  • 詳細ページ2
  • 詳細ページ3

Bluma

Bluamaは、FlexboxをベースにしたフリーのCSSフレームワークです。下の公式ページからダウンロード出来ますが、CDNから利用すればダウンロードする必要がありません。 CDNとは、デジタルコンテンツをネットで大量に配信するためのネットワークの事です。これを利用するとURLを貼ることでダウンロードしなくてもBlumaを利用できます

BLUMA

ビューをHTMLとCSSで書いていきます(おまけも参照)。 Blumaを使用する準備は、該当のURLを貼るだけです。

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.1.2/css/bulma.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css">
<a href="#" >HELLO!</a>
<a href="#" class="button">HELLO!</a>
<a href="#" class="button is-primary is-large">HELLO!</a>
<a href="#" class="button is-primary is-medium">HELLO!</a>
<a href="#" class="button is-primary is-small">HELLO!</a>
<a href="#" class="button is-info is-small">HELLO!</a>
<a href="#" class="button is-success is-small">HELLO!</a>
<a href="#" class="button is-warning is-small">HELLO!</a>
<a href="#" class="button is-danger is-small">HELLO!</a>
<a href="#" class="button is-white is-small">HELLO!</a>
<a href="#" class="button is-black is-small">HELLO!</a>

Bluma test: button color size

classを割り当てることで、ボタンなどを表示できます。色や大きさはis-large,is-primaryなどで指定できます。

   <div class="columns">
        <div class="column">
            <div style="background-color: #42afe3">
            左サイド
            </div>
        </div>
        <div class="column">
            <div style="background-color: #f68b39">
            まんなか
            </div>
        </div>
        <div class="column">
            <div style="background-color: #fce473">
            右サイド
            </div>
        </div>
        <div class="column">
            <div style="background-color: #fce473">
            追加
            </div>
        </div>
    </div>

Bluma test: column

columsで囲ったcolumnは均等に並べられます。

    <div class="columns">
      <div class="column is-2">
        <div style="background-color: #f68b39">
          ウィンドウ幅1/12サイズの要素
        </div>
      </div>
      <div class="column is-4">
        <div style="background-color: #fce473">
          ウィンドウ幅2/12サイズの要素
        </div>
      </div>
    </div>
    <div class="columns">
      <div class="column is-6">
        <div style="background-color: #42afe3">
          ウィンドウ幅6/12サイズの要素
        </div>
      </div>
    </div>

    <div class="columns">
      <div class="column is-4">
        <div style="background-color: #f68b39">
          ウィンドウ幅4/12サイズの要素
        </div>
      </div>
      <div class="column is-4">
        <div style="background-color: #fce473">
          ウィンドウ幅4/12サイズの要素
        </div>
      </div>
    </div>
    <div class="columns">
      <div class="column is-4">
        <div style="background-color: #42afe3">
          ウィンドウ幅4/12サイズの要素
        </div>
      </div>
    </div>

Bluma test: column x/12

columnに大きさの指定をしてみます。この場合、左から12に対していくつの割合なのかを指定できます。うまく並ばなかったので端までは並ばないかもしれません。下のように分数で与えるとより細かく指定できます。

   <div class="columns">
      <div class="column is-two-thirds">
        <div style="background-color: #f68b39">
          ウィンドウ幅2/3サイズの要素
        </div>
      </div>
      <div class="column is-one-thirds">
        <div style="background-color: #fce473">
          ウィンドウ幅1/3サイズの要素
        </div>
      </div>
    </div>
    <div class="columns">
      <div class="column is-one-quarter">
        <div style="background-color: #42afe3">
          ウィンドウ幅1/4サイズの要素
        </div>
      </div>
      <div class="column is-half">
        <div style="background-color: #f68b39">
          ウィンドウ幅1/2サイズの要素
        </div>
      </div>
    </div>

Bluma test: column x/y

作った物(例)

bluma以外のCSSの色はこちらを見ました。=> HTML,CSS ホームページの背景色や文字色 (フォントカラー) -ホームページ 作成、運営管理ガイド

全体的にダサいのはフレームワークが悪いのではなくて(略)


例 アプリ紹介画面

例 詳細画面

グラフはcanvas.jsで書きました。今回はメインと離れるので割愛します。

<header class="nav">
      <div class="nav-left">
          <span class="nav-item">
              <i class="fas fa-bolt"></i>APP NAME
          </span>
      </div>
      <section class="level">
            <div class="level-left">
            </div>
            <div class="level-right">
                <div class="level-item tabs">
                <ul>
                    <li><a>TOP</a></li>
                    <li  class="is-active"><a>About</a></li>
                    <li><a>Daily</a></li>
                    <li><a>Weekly</a></li>
                    <li><a>Mounthly</a></li>
                    </ul>
                </div>
            </div>
            
        </section>
  </header>

navコンポーネントでナビゲーションとして仕様したい要素を囲う事でnavとして使用可能になります。 は実際に表示されるものをしていするときに使用すると、上下方向をちょうど良くしてくれます。

levelは水平に並べるコンポーネントで、tabに内包されたlistがタブとして表示されます。例の右上の部分になります。 is-activeは現在表示しているものの色を変えるなどするためのものです。JavaScriptは使っていないため、動くわけではありません。

<span class="nav-item">
            <p>ログイン</p>
            </span>

control has-addonsは調節機能であり、今回は隣のボタンと連なって見えるように調節してくれます。 場所はleft、rightなどで調節できます。
"fa fa-〜"はアイコンを表示してくれます。Font Awesome に一覧がのっています。 これもheadでURLを指定すればすぐに使えます。

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css">

main

HEROエリアには最も目立たせたいものを配置します。

    <div class="hero is-success is-small">
        <div class="hero-body">
            <div class="container">
                <h1 class="title"> About</h1>
                <h2 class="subtitle"> </h2>
            </div>
        </div>
    </div>

"hero-head"はヒーローエリアのトップに、 "hero-body"はヒーローエリアの中心に、 "hero-foot"はヒーローエリアの底部に表示されるエリアです。"hero-body"の主コンテンツは垂直方向にセンタリングされます。

"is-bold"モディファイアーはヒーローエリアの背景色をグラデーションにします。"container"モディファイアーは内包するコンテンツを水平方向にセンタリングします。 heroを変な場所に置くと、clumonに組み込まれつつ大きく表示したりするのでレイアウトがおかしくなります。

<main class="columns">
    <div class="submenu column is-2 is-large">
              
    </div>

    <div class="column is-8"> 
          <div class="box media">
            <figure class="media-left">
                <i class="fab fa-earlybirds"></i>
            </figure>
            <div class="media-content">
                <div class="content">
                    <p><strong>24時間監視</strong><br>
                      サーバーが24時間常に監視し続けます。
                    </p>
                </div>
            </div>
          </div>  

          <div class="box media">
            <!--同様-->
          </div>  

          <div class="box media">
             <!--同様-->       
          </div>   
                  
        </div>      
    </div>        
  </main>

boxは四角で囲うためのものです。clumns内部のclass="submenu column is-2 is-large",class="column is-8"がそれぞれ指定した大きさで並んでいます。class="column is-8"内部でmediaが縦に並んでいます。

<figure class="media-left">
      <p class="image is-64x64">
         <img src="http://placehold.it/128x128">
      </p>
</figure>

mediaはtwitterのようなメディアをイメージしたものです。アイコンに画像を入れるとそれっぽくなりますが、使いませんでした。

<main class="columns">
         <div class="submenu column is-2">
            
            <aside class="box">
                <p class="menu-label">
                    datas(average)
                </p>
                <ul class="menu-list">
                    <li>monday</li>
                    <li>Tuesday</li>
                    <li>Wednesday</li>
                    <li>Thursday</li>
                    <li>Friday</li>
                    <li>Saturday</li>
                    <li>Sunday</li>   
                </ul>
            </aside>
        </div>
        
        <div class="submenu column is-8">
          <aside class="box">
              graph             
              <canvas id="canvas2" height="300" width="300"></canvas>
          </aside>
        </div>

    </main>

menuは縦に並べる要素で、menu-listのlistが並びます。labelはキーワードなど、分類を書く部分です。

    <footer class="footer">
        <div class="container">
            <div class="content has-text-centered">
            <i class="far fa-copyright"></i> Copyright 2019 Inc.Monsters
            </div>
        </div>
    </footer>

footerは画面下部にかかれる要素です。特に書くことがありませんが、一応copyrightを書いておきます。「著作権はこちら、使うときはここに言って」という事です。

おまけ Emmet

HTMLをまずは書くわけですが、便利な機能を見つけたので使います。 VScodeで拡張機能のEmmetをインストールし、左下の歯車をクリックして設定を開きます。ここで、 下記を追加します。

"emmet.triggerExpansionOnTab": true,
    "emmet.variables":{
        "lang": "ja"
    }

設定した後で、HTMLファイルを作成して!でTabを押すと

<!DOCTYPE html>
<html lang="ja">
<head>
    <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>
</head>
<body>

これが一気に表示されます。素晴らしい。

コマンド一覧 =>Emmet Documentation

参考

CDNについて

Bumaについて

Emmetについて

アフィリエイトをしばらくやっているけど、広告を改良しようと思っても毎回忘れている。個人的メモを兼ねたまとめ。 なお、このブログはwordpressで実践したことをまとめています。一部無料ブログでは貼り付けられませんのでご注意ください。
追記(2019/3/18) ドメインについて書くのを忘れていました。アフィリエイトをやるなら独自ドメインがあったほうがいいと思います。私はレンタルサーバ+独自ドメインでやっています。サーバというのはざっくりいうとPCで、ドメインというのはサイトの住所で、ユーザー目線ではURLの一部です (inopage.comというやつです) 。どちらも有料なので気を付けてください。

目次

  • アフィリエイトとは
  • Google Adsense
  • Google Adsense を登録する
  • Google Adsense を貼り付ける
  • AMPについて
  • Amazon アソシエイト
  • Amazon アソシエイトを利用する
  • 参考

アフィリエイトとは

アフィリエイトとは成功報酬型のインターネット広告です。

アフィリエイト商品を売る人をアフィリエイター、アフィリエイターと広告主を仲介する企業をASP(Affiliate Service Provider)と呼びます。 アフィリエイターは企業の広告をし、商品を売ることで報酬が得られます

このブログは部品等の資金稼ぎのために導入していますが、対策してないのでかなり雑です。文章間に広告が無理矢理入っている始末。

Google Adsense

Google AdSenseとは、Googleの提供しているコンテンツ連動型広告配信サービスです。ブログ記事でよく見かける広告はGoogle Adsenseです(多分)。

PPC(Pay Per Click)広告という方式で、クリック数で報酬が入るようになっています。Google Adsenseではクローラーが巡回し、内容に合った広告が表示されるようになっています。この報酬のメリットは初期コストが低いことデメリットはクリックして貰えないと報酬が貰えないことです。

このブログでは電気製品、ブログ、ゲームなどが出ているみたいです。「みたいです」というのも、管理者(私)が口出しできるのは広告の場所や大きさ、分野までなので出た広告を見てみないとわらないからです。

Google Adsenseには基本的な広告の他に、自動広告があります。自動広告はgoogleがページをスキャンして自動で広告を選んで貼ってくれます。

自動広告のメリット

  • かなり楽! 掲載したい各ページに同じコードを 1 つずつ設置するだけで、自動広告を表示できます。 広告の掲載と最適化が自動的に行われますので、手作業にかかる時間を節約できます.
  • 増収が見込める レイアウト、コンテンツ、既存の Google 広告に基づいてページを分析してくれます

自動広告のデメリット

  • 予期しない位置に広告が出る 段落に注意しないと広告によって読みづらくなります。スキャンを意識した構成にしなければなりません。

詳細は公式を参照してください。 自動広告について -AdSenseヘルプ

Google Adsenseを登録する

このサイトで登録して、アドセンスアカウントを取得しましょう。このあたりは何もスクショ取ってませんので丸投げです。 Gogle Adsense

このあと、審査がはいります。長い人は1ヶ月以上掛かります。このブログに導入した2019/2ごろに調べたところによると、審査が厳しくなったとのことです。内容や記事数などが基準になるという噂。以下参考までに当時のことを書いておきます。

  • 1度目落ちたとき
  • この記事は10記事くらい。多くは1記事2000文字行かないくらいでした。

  • 受かったとき
  • オリジナル文章の文字数が重要なのではと考え、以降6000文字程度の記事を1つ書きました。この時点で11記事くらいでした。このときの投稿はこれです。

Google Adsense を貼り付ける

受かったら広告を貼っていきます。基本的にHTMLを書き加えるので、wordpress内部にカスタムHTMLとして挿入すれば表示はさせるはず、ですが正直毎回入れるのは面倒。なので、一括で全体に表示できる方法をやります。プラグインWordPress Ad Manager & AdSense Ads – Ad Inserterというのを使っています。

広告に限らず、PHPやHTMLをいじらないといけないことがよくあると思いますが、元コードに直接やって居るときに操作をミスすると突然全く動かなくなる、表示すらされなくなる事故が起きる危険がありますので、直接手を加えるのはおすすめしません。そこで登場するのがプラグインです。この Ad Inserter は、対応するタブにコードを書き加えるだけでheaderやfooterを編集できるので便利です。画像のプラグインをインストールして有効化します。

次にGoogle AdSenseのページからコードを取得します。

  • 自動広告

Google AdSenseの「自動広告を設定」を押すとコードが出てくるので、それをコピーします。

次にwordpressの設定/Ad Inserterを開き、設定(歯車マーク)をクリックしてheaderを開きます。コードをコピペしてsave settingで終了です。

これによってすべてのページのheaderに自動広告のタグが貼り付けられました。しばらく待つと広告がでます。私はsaveし忘れて表示されずに慌ててたので、時間は全然計ってません。たぶん30分くらいじゃないかと。

  • その他の広告

広告ユニットを開きます。今回は「テキスト広告とディスプレイ表示」で作ってみます。「テキスト広告とディスプレイ表示」を選択 わかりやすい名前をつけます。広告サイズは推奨のままで行きます。広告のスタイルはサイトのデザインも考慮しつつテキトーにきめます。 最後に保存すると、コードが出てきます。これをコピーします。

次にwordpressの設定/Ad Inserterを開き、bookにコピペして保存します。このとき、コードの一番下に<p>スポンサーリンク</p>と書くことをおすすめします。

自分のページを別なタブでひらいて上のAdInserterを開くと、ページ内のどこがどういう名前か確かめることができます。

外観/ウィジェットから、Ad Inserterでメインサイドバーを選択します。すると右側のメインサイドバーの一番下にAd Inserterと言うのができますので、先ほどコピペした先のbook(私はbook5)を選択します。わかりやすいようなtitleを記入。

すると、自分のページのメインサイドバーに表示されるであろう枠が表示されています。

しばらく待つと表示されると思います。お姉さんの笑顔がまぶしいですね。

AMPについて

自動広告のページにAMP自動広告というのがあります。AMP(Accelerated Mobile Pages)とはGoogleとTwitterで共同開発されている、モバイル端末でウェブページを高速表示するためのプロジェクト、またはそのためのフレームワーク(AMP HTML)のことです。

公式Accelerated Mobile Pages Project – AMP

これはGoogleが推奨しているもので、SEOも表示速度を判断材料の1つにしているといううわさもあります。このブログは大学生を対象にしているので、スマホに特化させようと思い、AMP化しようとしてみました。そのときのことについて書き残しておきます。

これはネタバレなんですが、AMP化しないことにしました。AMPとはざっくり言うと、サイトを読み込むときに不要なものを読み込まないような作りみたいです。それで、このブログは数式も表示しているんですが、AMP化HTMLを読み込むときに、数式を綺麗に表示するためのプラグインが読み込まれないらしいんです。それに画像も表示されませんでした。数式を表示するにはMathMLというHTMLの数式版に書き換えたりしないといけないんですが、それをする労力とAMPのメリットが釣り合うかと考え、断念することにしました。

Amazon アソシエイト

このAmazonアソシエイトはamazonが提供するアソシエイトプログラムで、商品が売れたとき、自分が紹介した商品の値段の何割かが報酬として受け取れます。何を隠そうこのページの収入の本命はAmazonさんです。以下が紹介料率です。


Amazonアソシエイト・プログラム紹介料率表から転載。

以下のリンクからサインインしてください。申込画面はこれまたスクショしてなかったので丸投げです。頑張ってください。

amazon アソシエイト

Amazon アソシエイトはちまたの噂ではgoogle Adsenseよりも審査基準が厳しいみたいです。合格時のこのブログについて参考までに書き残しておきます。なお私はamazon prime 会員です。

  • 2度落ちたとき 10記事くらい。多くは1記事2000文字行かないくらいでした。1記事増やして再度申し込み、落ちました。
  • 合格したとき オリジナル文章の文字数が重要なのではと考え、以降6000文字くらいしたところ、受かりました。このときのサイトはこれです。(確かjupyter)。Google Adsenseとほぼ同時期に受かってます。二日後くらいに合格のメールが来ました。

Amazon アソシエイトを利用する

アソシエイトのページからやる場合と、ツールバーからやる場合が有ります。いずれにせよHTMLコードが表示され、wordpressのカスタムHTMLとして貼り付けるようになります。商品リンクの表示は「テキスト」、「画像」、「テキストと画像」の3つから選べますが、「テキストと画像」はなぜか画像が表示されないので使わない方がいいかも知れません。 プラグインもありますが、HTMLを貼り付けするだけなので全く問題なく使えてます。私は部品や参考本の紹介として使っているので今のところ「テキスト」を使うことが多いです。

商品リンク/商品リンクから商品検索をします。 出てきた商品の横のリンク作成を押すと、作成画面へ移動します。

テキストでリンクを作成する場合、テキストのみのタブを選択し、各種項目を適宜変更します。リンクテキストは表示される文字で、リンク先ページは商品紹介ページか出品一覧ページから選べます。 最後に、HTMLを取得します。

HTMLはテキスト+リンク+文字の大きさなどその他情報がすでに入力されていて、URL、短縮URLはリンク先の情報しかありません。特に目的がないときはHTMLをそのままコピーします。wordpressにもどり、カスタムHTMLとしてコピペします。プレビューはこんな感じ。

  • ツールバーから

自分のamazonアカウントでログインすると一番上にツールバーが表示されています。表示されていない場合は先ほどのアソシエイトのページから、ツール/アソシエイト・ツールバーでアソシエイト・ツールバーの設定はこちらから表示をオンにします。

以降は ページから と同様です。

amazonにログインして商品を検索染します。ツールバーの「テキスト」、「画像」、「テキストと画像」のうちテキストを選びます。出てくるURLをwordpressでいつものようにクリップのようなマークでリンクにすればOKです。

「画像」、「テキストと画像」を選んだ場合はHTMLがそのまま出てくるので、ページからで紹介した方法と同じようにカスタムHTML表示にしてコピペすればOKです。

追記(2019/3/18) 新しく投稿したら、Google consoleでインデックス登録とサイトマップの更新を忘れずに。

雑記

なんでも世の中の1/3のサイトはwordpressで作られているとのことです。もしwordpressに重大なエラーがあったり攻撃されたりした場合、世界中のサイトの1/3が動かなくなるというわけですね。あるいは、wordpressの学習だけに力を入れて脆弱性を調べれば儲かるかもと考えている怖い人が世界中にいると考えられます。セキュリティについても無関心ではいられませんね。

参考 WordPress(ワードプレス)とは? -wordpress超初心者講座
追記(2019/3/18) ドメイン、Google consoleでの更新について追記しました。

参考

ジャンル:IoT 前回 =>Web × IoT メイカーズチャレンジに参加-前編

概要

今回web IoT メイカーズチャレンジのハッカソンに参加し、結果ありがたいことに最優秀賞をいただくことができました。作ったのは動く植木鉢「uekibati 2.5 動く苔」です。

web IoT メイカーズチャレンジとは

前回のをコピペ

Web×IoT メイカーズチャレンジでは、こうした「フルスタックなスキル」やアイデアを素早く形にできる「プロトタイピング力」を身につける機会としていただけるよう、実際にモノづくりを体験する 2 つのプロセスでイベントを構成 下記HPより引用

https://webiotmakers.github.io/

ラズパイとjavascritを使ったIoTをやってみような総務省主催のイベントです。日本各地でやっているらしいですが、俺は前橋でやりました。 12/15,16,1/19,20で開催されます。

HP=> https://webiotmakers.github.io/

作ったもの

動く植木鉢「uekibati 2.5 動く苔」です。下に簡単に機能を説明します。

生育環境情報の取得

気温、湿度、気圧、土壌の湿り気を取得します。CHIRIMENを使用してセンサから情報を取得しています。

動く

窓辺などで使用していると、洗濯物などによって植木鉢がある場所が暗くなると日陰から移動します。

光センサから取得する情報が一定値を下回ると移動を開始、一定値を上回ると停止します。光センサのライントレースで移動します。ラズパイでやるのは大変なのでarduinoでやってます。

取得情報の通知

IFTTTを使用してuekibatiが移動を開始した時に光度や湿度などを通知します。

顔の表示

湿り気などが規定値を超えるとLEDの顔が^v^から泣き顔に変化します。

喋る

移動を開始するときに「暗いので移動するよ」「明るいので止まるよ」など言う。このあたりのことは全く分かりません。

特典について

raspberry pi 3 model B+ をいただきました。また、東京で3月に行われるスマートIoT推進フォーラム総会に招待していただき展示させていただけるそうです。

雑談

通知が私の役割だったんですが、全然ダメでした。マジ悔しい。javascriptの構文すらいまいちわかってなかったのは完全に準備不足でした。 3月までに通知機能のみではなく、擬似的に会話できていると感じられるようにしたいです。

追記(2019/3/11):最優秀賞の特典として、スマートIoT推進フォーラムにお招き頂き、3/8にパネルで作品を紹介させて頂きました。全国の代表のアイデアや技術を学ぶことができました。さまざまな方と繋がることができる良い機会となりました。ありがとうございました。

追記(2019/3/18) 段落構成を変更しました。内容は変更ありません。