投稿日：2019-07-24T23:34:48+09:00

paddingやmarginの値設定の順番の覚え方

こんにちは、プログラミングスクールのレビューサイト「スクールレポート」を運営しているアカネヤ(@ToshioAkaneya)です。

paddingやmarginの値設定の順番の覚え方

覚え方は時計回りです。
例えばpadding: 1px 2px 3px 4px;とした場合、上右下左の順に、1,2,3,4pxのpaddingが設定されます。

この記事が参考になれば幸いです。

終わりに

Ruby on RailsとVueで作成したプログラミングスクールのレビューサイトを運営しています。良ければご覧ください。https://school-report.com/

　 Tweet
Qiitaで続きを読む

投稿日：2019-07-24T19:39:49+09:00

【Bootstrap】スクロールしてもnavbarを固定して表示する方法と、その際の留意点及び解決法

本記事の内容

・ページ上部に固定されたナビゲーションをBootstrapで実装する方法。
・その際の留意点と解決法

方法

（現在、WEBアプリを作成しているので、そのコードをそのまま例として用いることにします。)
以下のようにclass='fixed-top'とすることで、ナビゲーションをページ上部に固定できます。
これにより、スクロールしてもナビゲーションは上に表示されたままになります。
sample.html
     <div class='fixed-top'>
     <nav class="navbar navbar-expand-lg navbar-light bg-light">
         <a class="navbar-brand" href="#">Mieruka</a>
         <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
             <span class="navbar-toggler-icon"></span>
         </button>
         <div class="collapse navbar-collapse" id="navbarNavAltMarkup">
             <div class="navbar-nav">
                 <a class="nav-item nav-link active" href="#">ユーザ<span class="sr-only">(current)</span></a>
                 <a class="nav-item nav-link" href="#">新規プロジェクト</a>
                 <a class="nav-item nav-link" href="#">モーメント</a>
                 <a class="nav-item nav-link" href="#">アプリ紹介</a>
             </div> 
         </div>
     </nav>
     </div>
留意点

fixed-topで固定することでその他の要素がnavbarに重なって表示されてしまいます。
（navbarがひとつ上のレイヤーに移動して、それ以外の要素はnavbarがいなくなった分、上に詰めるイメージ。）
そのため、その他の要素を下にズラしてあげる必要があります。

解決法

このような場合は、bodyにpadding-topを適用させて、要素を下にズラすことで解決します。
sample.css
          body{ 
              padding-top: 60px; 
          }

　 Tweet
Qiitaで続きを読む

投稿日：2019-07-24T16:06:52+09:00

paddingとmargin (CSS)

未来電子テクノロジーでインターンをしている mrm1027 です。

【プログラミング初心者であるため、内容に誤りがあるかもしれません。
　もし誤りがある場合は、すぐさま修正しますのでどんどん指摘してください。】

はじめに

プログラミングを始めて、1ヶ月が経ちました。
とてつもなく早く感じます。
最近ではプログラミングの進みがあまり良くなく、まとまった時間を確保することに
苦労しているところです。

カリキュラムの進捗としては、ProgateのHTML＆CSSの道場編中級編までようやく修了し、自由課題に入ろうとしているところです。

padding と margin の違い

CSSでpaddingとmarginが個人的に分かりづらかったので、この場を借りて復習させていただきます。

＜CSSの余白の考え方＞

要素の中身（内容）があり、そのまわりの余白がpaddingです。
そのまわりにはborder（線）があり、それより外側の余白がmarginです。
→　「borderを基準に「中」と「外」で考えたらいいのか！！！」

[参考：https://saruwakakun.com/html-css/basic/margin-padding]

なお、要素に対してwidthとheightの値を指定した場合には、要素の中身の部分の大きさが変わります。

[参考：https://saruwakakun.com/html-css/basic/margin-padding]

→　「widthとheightを設定したら、paddingやmarginを含んだ要素の高さや広さを設定できると勘違いしてた！！！」

まとめ

paddingとmarginの違いが体系的に理解できるようになりました。
これからの知識の蓄積を忘れず、学習を進めていきます。

　 Tweet
Qiitaで続きを読む

投稿日：2019-07-24T15:57:00+09:00

PWAのmanifest.jsonを動的に生成する

iOSにおける問題

WebサイトをPWAに対応させる
上記の対応を行ったサイトで実際にホーム画面追加したアプリを起動してみると、Andoroidでは問題なく利用できましたが、iOSではログイン画面が開きました。
セッション情報をLocal Storageに保存していた場合に、AndroidではLocal Storageの情報がブラウザと共有されるのに対し、iOSでは共有されないようです。

再度ログインし直せばそれで済む問題ではありますが、ユーザーにとっては２度手間になってしまいます。

start_urlにパラメータを付加したい

上記の問題を解決するために、ホーム画面にアイコンを追加するタイミングでURLパラメータにセッショントークンを追加してログイン情報を引き継ぐことにしました。
そのために、manifest.jsonの内容を動的に作成し、start_urlにパラメータを付加することを検討しました。

linkタグを書き換えられるようにする

まず、manifest.jsonを読み込むためにhtmlに追加したlinkタグを次のように書き換えます。
index.html
<link rel="manifest" href="/manifest.json" />
↓
index.html
<link rel="manifest" id="my-manifest" />
これで、次のようにしてmanifest.jsonを置き換えられるようになります。
document.querySelector('#my-manifest').setAttribute('href', '/manifest.json');
manifest.jsonを動的に生成する

次のようなfunctionを用意しておき、セッショントークンを生成したタイミングで呼び出すことでセッション情報を付加したURLを作ることができました。
manifest.js
var setManifestURL = function (token = null) {
    var myUrl = window.location.href;
    var startUrl = token ? myUrl + "?token=" + token : myUrl;

    var manifest = {
      "name": "Sample Application",
      "short_name": "SMPL APP",
      "theme_color": "#2196f3",
      "background_color": "#2196f3",
      "display": "standalone",
      "start_url": startUrl,
      "icons": [
        {
          "src": myUrl + "/img/icons/icon-72x72.png",
          "sizes": "72x72",
          "type": "image/png"
        },
        {
          "src": myUrl + "/img/icons/icon-96x96.png",
          "sizes": "96x96",
          "type": "image/png"
        },
        {
          "src": myUrl + "/img/icons/icon-128x128.png",
          "sizes": "128x128",
          "type": "image/png"
        },
        {
          "src": myUrl + "/img/icons/icon-144x144.png",
          "sizes": "144x144",
          "type": "image/png"
        },
        {
          "src": myUrl + "/img/icons/icon-152x152.png",
          "sizes": "152x152",
          "type": "image/png"
        },
        {
          "src": myUrl + "/img/icons/icon-192x192.png",
          "sizes": "192x192",
          "type": "image/png"
        },
        {
          "src": myUrl + "/img/icons/icon-384x384.png",
          "sizes": "384x384",
          "type": "image/png"
        },
        {
          "src": myUrl + "/img/icons/icon-512x512.png",
          "sizes": "512x512",
          "type": "image/png"
        }
      ]
    }

    const stringManifest = JSON.stringify(manifest);
    const blob = new Blob([stringManifest], {type: 'application/json'});
    const manifestURL = URL.createObjectURL(blob);
    document.querySelector('#my-manifest').setAttribute('href', manifestURL);
}
注意点

最初にこの方法を試した時にはURLや画像が無効だというエラーが出続け、解消するのに苦労しました。

原因はURLの指定方法にありました。
通常はstart_urlやアイコンのURLは相対パスでよかったのですが、動的にmanifestを読み込ませる場合はフルパスを指定しないと有効になりませんでした。

参考資料

下記を参考にしました。
How to Setup Your Web App Manifest Dynamically Using Javascript

　 Tweet
Qiitaで続きを読む

投稿日：2019-07-24T10:55:12+09:00

曜日ごとに日替わり画像を表示する

準備

日替わり画像にidを指定する

html

<img id="daily_image" src="dummy.jpg" alt="日替わり画像">

日替わり画像を挿入するjsを作る

js

(function() {
    "use strict";
    var target_id = "daily_image"
      , image_list = ["sun.jpg", "mon.jpg", "tue.jpg", "wed.jpg", "thu.jpg", "fri.jpg", "sat.jpg"]
      , target = document.getElementById(target_id)
      , weekday = new Date().getDay();

    target.src = image_list[weekday];
}());

完成形

weekday_test.html

<!doctype html>
<meta charset="utf-8">
<title>日替わり画像のテスト</title>

<img id="daily_image" src="dummy.jpg" alt="日替わり画像">
<script>
    (function() {
        "use strict";
        var target_id = "daily_image"
          , image_list = ["sun.jpg", "mon.jpg", "tue.jpg", "wed.jpg", "thu.jpg", "fri.jpg", "sat.jpg"]
          , target = document.getElementById(target_id)
          , weekday = new Date().getDay();

        target.src = image_list[weekday];

    }());
</script>

実験

完成形を読み込むと

html

<img id="daily_image" src="dummy.jpg" alt="日替わり画像">

の部分が

html

<img id="daily_image" src="wed.jpg" alt="日替わり画像">

に変換される
※この記事を書いた日が水曜日であるため、wed.jpgとなっております。

　 Tweet
Qiitaで続きを読む

投稿日：2019-07-24T10:21:25+09:00

たった5分で自分だけのFitbit Clock Faceを作る

はじめに

数年位前からFitbitの活動量計を愛用しております。
Fitbit Charge HRからはじまりFitbit Charge 2と買い替え、最近Fitbit Versa（と体重計のAria2）を購入しました。

Charge HR/2は画面のカスタマイズはあまりできなかったのですが、Fitbit VersaはスマートウォッチらしくClock Faceのカスタマイズが結構自由にできます。
開発環境の準備から実機インストールまでがとても楽だったことに感動したのでそのご紹介です。

Fitbitってなぁに？という人は公式サイトへGo
https://www.fitbit.com/jp/home

目的

5分以内で自分だけのFitbit Versa Clock Faceを作成し、実機で確認する。

準備するもの

Fitbit Versa
Wifiの設定はしておいてください。
（Fitbit Versaセットアップ時にやるのでかかる時間は0秒とします）

Fitbitのユーザアカウント
(Fitbitの利用者なら既にあるはずなのでかかる時間は0秒とします）

CSSの知識
（身に着けておいてください。0秒。）

作業開始！

Fitbit Studioへのアクセス（所要時間1分）

https://studio.fitbit.com

右側のStartからFitbitのユーザアカウントでログインしてください

Projectの作成（所要時間30秒）

New Projectを押下し、

Nameに適当な名前をいれて、
TemplateはDigital Clockを選び
Createを押下

こんな画面がでてきたらOK！!

テンプレートとWebのIDEが準備されているのですごく楽ですね

自分だけのClock Faceを作る（所要時間30秒）

時間がないのでresources/styles.cssのbackgroundのviewport-fillを適当に変えましょう！
redからblueに変えてみました。

実機にインストールする(所要時間3分）

Fitbit Versa実機の設定にあるDeveloper Bridgeを押下し、
[Disconnected]から[Connecting to Server]を経て[Connected to Server]になるまで待つ

Connected to Serverになったら、Web IDEの画面上部のデバイス選択部分から[Versa]が選択できるようになるので、
Versaを選択して[Run]を押下！！！！

十数秒かかるので気長に待ちましょう。

完成！

おつかれさまでした。
手元のVersaにはあなたオリジナルのClock Faceが表示されていることでしょう。

（イメージ画像）

まとめ

テンプレートが用意されていて楽！

WebのIDEが用意されていて楽！

実機にインストールするのもボタン2つくらいで楽！

（完成のところでチラッとみせた）Fitbitのシミュレータもあるので検証が楽！

簡単に作れるからキミも作ろう！

To be Continued...?

上記をベースに某ゲームに登場するハンドヘルド端末風なClock Faceを作りました。（著作権とかｺﾞﾆｮｺﾞﾆｮなので非公開）
開発をしていく中でFitbitならではのできること、できないことがわかってきたのでTIPSとしてまとめるかもしれません。

それではよきFitbitライフを