What's New Qiita

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

  • 投稿日：2020-04-21T17:12:56+09:00

1分でわかるBootstrap4の書き方

Bootstrap4を実際に書き始めるまでの基礎をまとめました。

CDN
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">

<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>

　
前提として、Bootstrapの要素はbody直下にcontainerクラスのdivで囲います。

marginとpadding

Bootstrapでは、クラスを用いてmarginとpaddingを表し、プロパティ 上下左右-サイズの型で記述します。(例: mt-4 , p-auto)

プロパティ 内容 上下左右 内容 サイズ 内容
m margin t top 0 0
p padding b bottom 1 *0.25
l left 2 *0.5
r right 3 *1
x left,right 4 *1.5
y top,bottom 5 *3
top,bottom,left,right auto auto

グリッドシステム

Bootstrapでは、要素の横1行をrowクラスのdivタグで区切り、12等分した1列をカラムと呼びます。
無題 (2).png
カラムは、クラス名にcol-画面サイズ-サイズの型で記述します。(例: col-md－6 , col-10)

画面サイズ 内容 サイズ 内容
<540px 1 1/12rem
sm 540px 2 2/12rem
md 720px 3 3/12rem
lg 960px 4 4/12rem
xl 1140px ...
offset 余白 12 1rem

参考文献

詳しい内容やコンポーネントは公式ドキュメントが参考になります↓ ↓
公式ドキュメント

  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む
  • 投稿日：2020-04-21T12:07:14+09:00

【ReactNative】WebViewを使って既存資産を使い回す

はじめに

ReactNativeを使って既存Webサービスのアプリ版を開発している場合、一部のアプリ独自の機能(例えばプッシュ通知やカメラ)を除いては既存ソースを流用できる場合があります。
例でいうと、ユーザ情報画面は既存のWebのマイページをそのまま表示するとかです。
その場合、WebViewを使うことになると思います。
ReactNativeでいうところのWebViewはreact-native-webviewを使うことになりますが、ここで問題になってくるのがReactNative側のコードとWebView側のコードの連携処理です。
先のマイページの例でいうと、WebView側のマイページ画面のソースコードにReactNative側からユーザ情報を渡してあげなければ成立しません。
今回はreact-native-webviewを導入した上で、WebViewとの値の受け渡し方法について調べました。

環境情報

"react-native": "0.61.5",
"react-native-webview": "^9.2.1",

インストール

react-native-webviewをインストールしていない場合はインストール。

yarn add  react-native-webview

WebViewに値を渡す

WebViewに値を渡す場合はinjectedJavaScriptを使います。
injectedJavaScriptには文字列型でJavascriptのコードを渡せます。

WebViewComponent.tsx
import React from 'react';
import { WebView } from 'react-native-webview';

// WebViewに渡すコード
const injectedCode : string = `
    function fireInjectedJavaScript(){
        alert('ReactNativeから渡されたコードを実行しました!');
    }
`;

// WebViewで表示させるHTML
const html : string = `
      <html>
      <head>
      </head>
      <body>
        <h1>Title</h1>
        <form name="test">
            <input type="button" value="injectedJavaScript" onClick="fireInjectedJavaScript()">
        </form>
      </body>
      </html>
`;

// ...割愛

render(
    <WebView source={{html : html}} injectedJavaScript={injectedCode} />
);

html中のボタンでfireInjectedJavascript()を実行していますが、これはReactNative側から渡された関数です。
よって、アプリで表示された場合のみ特定の処理を行うような作りにすることもできます。

渡したコードはWebViewが描画された後に実行されるため、jQueryやdocument.getElementByIdなんかを使ってWebView側の特定のフォームの値や表示をいじることもできます(上記のマイページの例ではこの方法を使ってユーザ情報を渡す)。

WebViewから値を貰う

逆にWebView側から何らかのデータを受け取りたい場合はonMessageを使います。

WebViewComponent2.tsx
import React from 'react';
import { WebView, WebViewMessageEvent } from 'react-native-webview';

// WebViewで表示させるHTML
const html : string = `
      <html>
      <head>
        <script>
            // WebViewが読み込まれた時にデータを送信
            window.onload = function() {
                window.ReactNativeWebView.postMessage("onload")
            };

            // 定期的に実行(ポーリングなんかに使える？？)
            setInterval(function () {
                window.ReactNativeWebView.postMessage({hoge : "setInterval"})
            }, 2000)

            // 特定の処理実行時にデータを送信
            function firePostMessage(){
                window.ReactNativeWebView.postMessage("button click")
            }
        </script>
      </head>
      <body>
        <h1>Title</h1>

        <form name="test">
            <input type="button" value="postMessage" onClick="firePostMessage()">
        </form>
      </body>
      </html>
`;

// ...割愛

// onMessage発火時処理
public onMessageFromHtml(event : WebViewMessageEvent) {
    console.log(event.nativeEvent.data);
}

render(
    <WebView source={{html : html}} onMessage={onMessageFromHtml} />
);

上記の例ではWebView読み込み時に実行と、定期的に実行、ボタンを押した時に実行、と３パターンを盛り込んでいます。
いずれの場合もwindow.ReactNativeWebView.postMessageを実行しており、ReactNative側ではWebViewMessageEvent型で受け取ります。
渡された値自体はWebViewMessageEventのnativeEvent.dataの中に格納されています。
nativeEvent.dataはreactのBaseSyntheticEventのジェネリクスとなっているため型は自由です(setIntervalのようにオブジェクトを渡すこともできます)。

おわりに

今回はreact-natiev-webviewをインストールし、ReactNativeとWebView間でのデータの受け渡し方法を紹介しました。
既存のソースを使いまわせるので非常に有効な手ではないかと思います。

  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む
  • 投稿日：2020-04-21T09:06:48+09:00

HTMLとブロガー

WordPress以降は誰もがWEB運営者になれます。ブログとサイトの区別がつかない。それはWEBの中では差別化が難しいものでした。

ブログは個人であり、1次情報を取り扱う。1次情報が大事なところ、検索クエリでは重要視されることもあります。アフィリエイト稼げない理由のようにブログに情報価値はあるわけです。

ブログを書いていくということはサイトを運営すると同じ。だからニュースを見ていて気になったことを雑記で書いても意味はあります。無価値だとする根拠がどこにあるのか。2次情報と1次情報。1次情報はいらないとする意見もありますがときに必要とされることもあります。

  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む
  • 投稿日：2020-04-21T05:20:57+09:00

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

100日チャレンジの295日目

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

  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む

日付別

タグ一覧