会津ラボ

Illustration of a bird flying.
  • 遅ればせながらAtomからVSCodeに乗り換えました。移行手順について

    遅ればせながらAtomからVSCodeに乗り換えました。移行手順について

    マークアップエンジニアにおいてエディタは、もっとも身近なツールのひとつで、あなたもきっと日頃使い慣れたエディタでコーディングをしていることだろう。わたしはAtom editorが主ツールでいかなるシーンにおいても活用しているが、それと同時に不便さも覚える。 あなたは不便を感じたとき、どうするだろうか?我慢してそのまま使い続ける?拡張機能で解消する?別のエディタを検討する? わたし自身は、しばらくAtomを使い続けて、なかなか手放すことができなかったのだけれど、いよいよ不満に耐えかねてVSCodeへ乗り換えを実施した。その手順を記しておきたい。 なぜVSCodeか? 単純にトレンドだから。安直ではあるが、Atomを使った理由もフロントエンド界隈でトレンドだったから乗り換えたと記憶している。 VSCodeを選択した理由は上述のとおりだが、乗り換えに踏み切った要因は、不便さを覚えた作業をVSCodeで試したところスムーズに動作したことが挙げられる。プロジェクトフォルダを多数表示させなければならないとき、フリーズしたり落ちたりするケースが頻発した。ところがVSCodeだと平然と動作し続けるではないか。これにはとても心を動かされた。 冒頭にも述べたとおり、日頃使い慣れたエディタでコーディングしているわけで、ツールの不良は作業者のストレスとなって、果ては仕事のクオリティに影響するかもしれない。 そう思ったら居ても立ってもいられず乗り換えに踏み切った。そういう次第だ。 設定したこと エディタの乗り換えにおいて重要なのが「操作感」。乗り換えた直後も大体同じように作業できるか否かが重要だ。Atom editorは長年使い続けたことで、いくつかの拡張機能やショートカットキーなど身体が覚えている操作というものなど一緒にしておきたい。それを踏まえて以下のようにした。 「ようこそページ」をOFF 初期インストールしたときには必ず表示されるスクリーンで、ヘルプや設定等へのリンクが示されているが大体不要だろう。「起動時にウェルカムページを表示」のチェックを外すことで今後表示しないようにする。 「Trim Final Newlines」をON 最後の行以降の空白行を削除したい。ツールバーの「Code – 基本設定 – 設定」から設定画面を開く。スクリーン上部の検索フィールドに「Trim Final Newlines」を入力することで対象のものが見つかる。「有効にすると、ファイルの保存時に最終行以降の新しい行をトリミングします。」にチェックを付ける。 「Trim Trailing Whitespace」をON 行末尾の半角を削除したい。ツールバーの「Code – 基本設定 – 設定」から設定画面を開く。スクリーン上部の検索フィールドに「Trim Trailing Whitespace」を入力することで対象のものが見つかる。「有効にすると、ファイルの保存時に末尾の空白をトリミングします。」にチェックを付ける。 タブサイズを変える 1つのタブに相当する半角スペース数を変更したい。デフォルトでは1回のタブキー入力で、4つ半角スペースが挿入される。これを2つ半角スペースにする。ツールバーの「Code – 基本設定 – 設定」から設定画面を開く。スクリーン上部の検索フィールドに「Tab Size」を入力することで対象のものが見つかる。「4 → 2」にする。 フォントサイズを変える フォントサイズを変更したい。デフォルト値は12pxだ。これを13pxにする。ツールバーの「Code – 基本設定 – 設定」からVSCodeの定画面を開く。スクリーン上部の検索フィールドに「Font Size」を入力することで対象のものが見つかる。「12 → 13」にする。 空白文字を表示する 空白を視覚化したい。ドットになるあれだ。ツールバーの「Code –…

    December 24, 2019
  • map,areaタグのイメージマップを生成するWebツール

    map,areaタグのイメージマップを生成するWebツール

    ごく稀に画像の特定エリアにリンク領域を設定しなければならない要件に遭遇する。いわゆるイメージマップのことで、単純な領域ならばデザインソフトで調べることもできるが、多角形ともなると一つひとつ座標を求めなければならず、とてもじゃないがやってられない。 そんなときに役立つのがWebツールだ。このエントリーでは、イメージマップを生成するWebツールを紹介したい。 イメージマップするWebツール HTML Imagemap Generatorは、イメージマップ生成ツールだ。任意の画像ファイルを基準に矩形、円形、多角形を描画する機能を備えている。それら操作に応じてHTMLが編成され、画面に表示される。ユーザーはそれをコピペすれば済む。非常にインタラクティブに優れたWebツールとなっている。 HTML Imagemap Generatorhttp://labs.d-s-b.jp/ImagemapGenerator/ 前述の「HTML Imagemap Generator」とは別のイメージマップ生成ツールも紹介しよう。このImage Map Generatorも同様に、任意の画像ファイルを基準に矩形、円形、多角形を描画する機能を備えている。相違するところは、href属性値とtitle属性値を設定できる程度だ。 Image Map Generatorhttps://imagemap.org/ まとめ イメージマップを生成するWebツールの紹介だった。 その昔、イメージマップの生成は、Adobe Dreamweaverを用いたことがあった。Adobe Dreamweaverでコーディングすることがクールに感じられていたころの話だ。しかし、いまどきAdobe Dreamweaverを使ってコーディングするエンジニアは少ないだろう。リンク領域を求めるためだけにインストールしておく必要が感じられない。たとえそれを許容したところでイメージマップは、忘れたころにやってくるのだから操作が簡単なもののほうが良さそうだ。 このエントリーが、あなたのクリエイティビティを刺激するものであると期待したい。

    December 19, 2019
  • Reactアプリ用に再設計されたUIフレームワーク「react-bootstrap」を紹介

    Reactアプリ用に再設計されたUIフレームワーク「react-bootstrap」を紹介

    UIフレームワークの「Material-UI」は、Material Designを踏襲したReactコンポーネントであるが、Webアプリ全般における「Bootstrap」の知名度や実績には遠く及ばない。github stars数からも認識できることだが、Reactアプリ開発ともなると状況は一変して、やはり「Material-UI」が使われるケースのほうが多いように思う。 とはいえReactアプリ開発にも「Bootstrap」を導入したいケースがあるかもしれない。たとえば既存アプリと整合性を保つためだったり使い慣れていたりで、依然として需要があることだろう。 このエントリーでは、Reactアプリ用に再設計されたUIフレームワーク「react-bootstrap」を紹介したい。 react-bootstrap について react-bootstrapは、言わずと知れたフロントエンドフレームワーク界の雄「Bootstrap」をReactコンポーネントとして再構築したUIフレームワークだ。Reactコンポーネント構築に際して、jQueryを廃すことで純粋なUIフレームワークに昇華している。 特徴 プレーンBootstrapのスタイルシートに完全依存 jQueryなど不要な依存関係を廃している Reactコンポーネント化されている react-bootstrap に触る さっそくreact-bootstrapに触れていこう。 インストール まずモジュールパッケージをインストールする。インストールするものは次の2つ。 react-bootstrap bootstrap CSSを設置 import 前述したとおりプレーンBootstrapのスタイルシートに完全依存したものであるためreact-bootstrapはCSSファイルを含まず、プレーンBootstrapのCSSファイルをimportすることでスタイルを適用する。 このCSSファイルは、Bootstrap全般のスタイルシートを含むため、index.jsやApp.jsなどのルートコンポーネントに読み込ませるとよいだろう。 CDN もし上述のCSS importをしたくないならば、CDNからCSSを読み込む手段がある。これの利点としては、ユーザーが別サイトで当該CDNサービス経由でCSSを読み込んでいた場合に限り、ロード時間が短縮されてユーザビリティに寄与します。 コンポーネントを設置 パッケージモジュールから各種エクスポートコンポーネントをインポートする。対象コンポーネントのディレクトリまで明示する方法と分割代入でインポートする方法がある。およそのケースで分割代入が便利だろうと思う。以下はボタンコンポーネントをインポートしている。 デモンストレーション まとめ Reactアプリ用に再設計されたUIフレームワーク「react-bootstrap」の紹介だった。 プレーンBootstrapを使うときとの相違点として、JSX形式で記述することが挙げられる。本来ならば対象タグにclassを付与することでUIを形成していたが、react-bootstrapはコンポーネントとして読み込み、コンポーネント名のタグを設置する。非常に明快な仕様だと感じた。スタイルテーマにおいても属性(props)で操作が可能だ。Reactアプリ開発でUIフレームワークの導入を求められたならば、検討してみてはいかがだろうか。 このエントリーが、あなたのクリエイティビティを刺激するものであると期待したい。

    December 18, 2019
  • Reactアプリのフォーム実装を楽にするライブラリ「Formik」の使い方

    Reactアプリのフォーム実装を楽にするライブラリ「Formik」の使い方

    Webアプリにおいてフォーム機能は不可欠で、もっとも身近なものにログインフォームやお問い合わせフォームなどがある。これらはユーザインタフェースに該当するもので、Webアプリとユーザー間で情報のやり取りするために用いられるツールだ。 実装の側面では、複数の要件が組み合わさリ形成される。たとえば、フォームに関わる状態管理、バリデーションチェック、エラーメッセージの描画、フォーム操作に関わるハンドラーなどだ。これらを複合的に機能させるのだから小難しい実装であるのは間違いない。 このエントリーでは、Reactアプリのフォーム実装を楽にするライブラリ「Formik」を紹介したい。 Formik について Formikは、Reactアプリのフォーム実装を協力にサポートするライブラリだ。 Formikと対比されるライブラリにRedux-Formがある。Redux-FormはRedux Storeによる状態管理が主で、Reduxのセットアップが求められる反面、Formikならばローカル状態管理で済む。ローカルの一時的な状態ということで、パフォーマンスが良くスケーラブルなところが好まれてフォーム実装で覇権をふるっている。 【Formik】https://jaredpalmer.com/formik/ https://github.com/jaredpalmer/formik 特徴 フォームに関わる状態管理 バリデーションチェック エラーメッセージの描画 フォーム操作に関わるイベントハンドラー React Nativeに対応 Formik を使う それではFormikのインストールとデモンストレーションをご覧いただこう。 インストール インストールは下記コマンドで行う。例のごとく2パターンあるから都合のよい方を実行する。 デモンストレーション 下記ソースコードは、メールアドレス入力フィールドと送信ボタンがあるだけの、もっとも単純なフォーム構成のデモンストレーションだ。 まとめ Reactアプリのフォーム実装を楽にするライブラリ「Formik」の紹介だった。 デモンストレーションではスタイルを適用していない。スタイルを適用する場合は、対象タグにclass属性を付与するなりインラインスタイルを当てるなりしなければならない。たとえば<Field class=”input-email” />という具合だ。もしくは「formik-material-ui」なるラッパーもあるようで、これならばMaterial UIが適用される模様だ。管理画面などで適度な見栄えを求められたならば導入を検討しても良さそうだ。 このエントリーが、あなたのクリエイティビティを刺激するものであると期待したい。

    December 13, 2019
  • Webサイトのコーディングに役立つWebツール8選

    Webサイトのコーディングに役立つWebツール8選

    道具や工具は、なにかの作業をするとき補助的役割をしてくれる。たとえばハンマーであれば、釘を打ったり打ち砕いたりの作業に欠かせない。ノコギリであれば、木材を切断するために活躍する。これらをITの用語ではユーティリティやソフトウェアなどと呼ばれることもあり、Web上で利用できるものをWebツールやWebサービスと呼ぶ。 道具や工具と同様に、欠かせないWebツールは各種ジャンルにあるもので、作業がはかどった経験があるのではないだろうか。 このエントリーでは、サイトコーディングに役立つWebツールをいくつか紹介したい。 Diffchecker https://www.diffchecker.com/ Diffcheckerは、差分をチェックしてくれる。納品後の修正依頼でクライアントによる修正がどの程度及んでいるか確認するために利用することが多い。瑕疵か追加対応かの判断に役立つ。 Postwoman https://postwoman.io/ Postwomanは、APIクライアントだ。公開されているWebAPIやサーバーサイドでこしらえたAPIリクエストを試すことができる。アプリケーションのPostmanのようなものだ。返り値の構造を確認したいときに役立つ。 アスペクト比計算ツール https://aspect.arc-one.jp/ 縦横比を計算してくれる。レスポンシブデザインをコーディングする場合において、youtubeやGoogle mapの埋め込みに用いられるiframeや2Dグラフィック描画に用いるcanvasで縦横比を保持させるためのパーセント値を算出するときに役立つ。 HTML5 子要素・親要素対応 https://yoshikawaweb.com/element/ HTML5 子要素・親要素対応は、HTMLの梱包および内包が許される関係を視覚化したツールだ。記憶してしまえばそれまでの情報なのだが、HTMLタグの親子関係を説明するときに役立つ。 PXtoEM.com http://pxtoem.com/ PXtoEM.comは、CSSのfont-sizeプロパティ単位「em」を算出してくれるツールだ。まずベースのフォントサイズをセットして、ターゲットpx相当のem値を知ることができる。CSSのcalc()関数やSassで計算できる環境ならば不要なのだが、改修案件で既存のソースコードに手を加えるときに役立つ。 Polyfill.io https://cdn.polyfill.io/v3/ Polyfill.ioは、JavaScriptのモダンな機能が未実装なブラウザで、擬似的に動作するスクリプトをセレクトして結合できるツールだ。古いブラウザ対応を含む案件かつbabel等のトランスパイルする環境にいないときに役立つ。 HTML Arrows https://www.toptal.com/designers/htmlarrows/ HTML Arrowsは、HTMLの特殊文字リファレンスだ。HTMLエンティティやCSSコードを一覧できる。HTML特殊文字に関しては、このサイトより充実したところも存在するが、Unicode、HEX code、HTML code、HTML entity、CSS codeを一覧できるのは、あまり知らない。なかでもCSS codeの一覧は役立つ。 Flexbox Playground https://demos.scotch.io/visual-guide-to-css3-flexbox-flexbox-playground/demos/ Flexbox Playgroundは、CSSのFlexboxプロパティ値を操作して体感するデモツールだ。サイト名のとおり遊び場だ。たくさん操作すればFlexboxの特性を理解できると思う。Flexboxの理解に役立つ。 まとめ サイトコーディングに役立つWebツールの紹介だった。 ここで紹介したツール以外にも、きっとたくさんの有用なWebツールが存在するだろうし、わたしの知らないツールをあなたが知っていて日常的に使用しているケースも往々にあるだろう。その逆にわたしが日常的に使用していて、あなたが知らないケースもある。だからこのたび共有することにした次第だ。 このエントリーが、あなたのクリエイティビティを刺激するものであると期待したい。

    December 5, 2019
  • 「指さしナビ」がTVに出ました!

    「指さしナビ」がTVに出ました!

    2019年11月18日に放送されましたTBS様の「 アイアム冒険少年」の番組内で、弊社「指さしナビ」を使用していただきました。 おかげさまで「指さしナビ」配信から9年がたった今 放送直後と言う事もありAppストア「ナビゲーション」カテゴリーで一時的にですが、あの「ヤフー!MAP」を抜き3位となりました!(2019年11月27日時点で129位まで下がりましたが・・・) コレからも地味にアップデートして行きますので「指さしナビ」をよろしくお願い致します!! また、自治体単位での観光地案内に特化した「観光指さしナビ」シリーズもiOS/Android共に配信中です! こちらも是非よろしくお願いします! 【指さしナビとは】 正確な地図を使ったナビゲーションシステムではなく、予め指定した目的地への方向を指で指し示し、アバウトにどちらの方角に行けば良いのかを示すナビアプリです。※Android版は観光指さしナビのみとなります。 ダウンロードはこちら App Store (iPhoneの方はこちら)https://apps.apple.com/jp/app/%E6%8C%87%E3%81%95%E3%81%97%E3%83%8A%E3%83%93/id370890948 Google Play (Androidには通常の指さしナビはございません。)https://play.google.com/store/apps/developer?id=Aizu+Laboratory,+Inc.

    November 27, 2019
  • yeomanとお別れするときがやってきた!静的Webサイトジェネレーター「Spike」入門

    yeomanとお別れするときがやってきた!静的Webサイトジェネレーター「Spike」入門

    わたしはつい今までyeomanのジェネレーターを用いて静的サイトコーディングに取り組んでいた。yeomanは、cliによる操作ひとつでHTML5 Boilerplateをはじめ、Sass、Bootstrap、Modernizrなどトレンドに富んだ導入環境を構築してくれる。そして環境自体はタスクランナーのGulpであるから作業の自動化が特徴だ。 しかしwebpackが台頭したことでGulpによる環境構築するシーンは圧倒的に激減した。SPAライブラリに代表されるReactやVue、Angularもこぞってwebpackである。まずwebpackはバンドラーと呼ばれるもので、ファイルをガッチャンコしてくれる。そしてGulpはタスクランナーと呼ばれるもので前述したとおり作業自動化してくれる。したがってそもそも役割が違うわけだけれども、webpackは作業自動化も担っていて、Gulpを使うメリットが減ってしまったのだろう。 そんなこんなでwebpackの環境構築は常々検討していたのだけれど、自作のwebpack環境はトレンドやバージョンを考えると気が引けてしまい、それに至ることはなかった。やはりyeomanのようにcliで操作できる容易さがほしかったわけで、webpack製のものを探してはいたのだけれど巡り合うことがなかった。 そしてこのたびyeomanに取って代わるツールを発見したかもしれない。 このエントリーでは、webpack製の静的Webサイトジェネレーター「Spike」を紹介したい。 Spikeについて Spikeは、静的Webサイトジェネレーターだ。yeomanを使ったことがあるならば、そのようなものと捉えてもらうとよいだろう。 【Spike】https://spike.js.org/ 特徴 JavaScriptバンドラーにwebpack HTMLパーサーにReshape CSSパーサーにPostCSS JavaScriptトランスパイルにBabel Spikeに触ってみる それでは、Spikeのインストールと使い方について解説しよう。 インストール Spikeをグローバルにインストールする。Macユーザーは先頭にsudoで試してほしい。 さてインストールが成功したか下記コマンドで確認しよう。 $ spike -v バージョン値が表示されればOKだ。 プロジェクト初期化 Spike環境をジェネレートしてみよう。任意のフォルダで下記コマンドを実行する。 上記コマンド末尾の「my-project」は任意だ。プロジェクト名を適用するとよいだろう。 つづいて、ウィザード形式で進めていく。下記内容が問われる。 果たして、プロジェクト雛形をジェネレートできたならば、つづいてプロジェクトに関わるnodeモジュールをインストールする。cdコマンドでプロジェクトディレクトリに移動したのち、npm installかyarnを実行しよう。 開発開始 開発をスタートさせるときは、下記コマンドを実行する。 するとローカルサーバーが起動して、ブラウザタブにhttp://localhost:1111が開く。 まとめ webpack製の静的Webサイトジェネレーター「Spike」の紹介だった。 まだyeoman使っていたのか、という感想は受け止めなければならない。かなり希少種であることは自覚しているのだけれど、静的コンテンツをコーディングする程度なら、まずまずの使い勝手を誇るのがyeomanだった。 もしわたし以外にもyeomanを使っていて、webpackに乗り換えたい意欲があるならば、よい機会なのではないだろうか。 このエントリーが、あなたのクリエイティビティを刺激するものであると期待したい。

    November 22, 2019
  • React Navigationで特定のスクリーンだけモーダルにするルーティング設定

    React Navigationで特定のスクリーンだけモーダルにするルーティング設定

    ルーティングライブラリ「React Navigation」のcreateStackNavigator()の画面遷移は、iOS,Androidともに標準トランジションが発生する。スクリーンが右からスライドして重なる具合のものだ。 スマホアプリの画面遷移といえばスタンダードなものだが、フェードインで現れるモーダルパターンもある。 これを設定するにはcreateStackNavigator(RouteConfigs, StackNavigatorConfig)のStackNavigatorConfigに該当するオプション設定から行う。 このように画面遷移モードの変更はとても容易い。ところが複数のルーティング中にモーダルスクリーンが混じっていると、ややこしくなる。 このエントリーでは、特定のスクリーンだけモーダルにするルーティング設定を紹介したい。 なにがややこしいか? createStackNavigator(RouteConfigs, StackNavigatorConfig)のルーティング設定は、RouteConfigsに該当するところにオブジェクト形式で定義する。下記の具合に記述する。 const App = createStackNavigator({ Home: HomeScreen, List: ListScreen, Detail: DetailScreen, }); ルーティング名(Key)と該当コンポーネント(Value)が紐づく形だ。HomeスクリーンにListスクリーンが重なり、Detailスクリーンが重なり画面遷移する。いずれの画面遷移もスクリーンが右からスライドして重なる具合のものだ。 ここにモーダル用のスクリーンを加えて、遷移モードを変更してみるとどうなるだろうか。下記の具合にしてみる。 想像できただろうか?そう。すべてがモーダル式に画面遷移してしまうわけだ。 解決するには、 モーダル式になるハブの役割をするcreateStackNavigator()を設ければよい。下記の具合に記述する。 RootNavigator AppNavigator ModalNavigator それぞれ定数に定義したのは可読性を懸念してのことだけれど、いっきに記述することもできる。下記の具合だ。 つまりモーダル式のcreateStackNavigator()に、スライド式のcreateStackNavigator()を内包するような装いになる。これによってHome,List,DetailスクリーンのいずれからもModalスクリーンを開くことができるわけだ。 そしてheaderMode: ‘none’,は、タイトルバーを表示しない旨の指定だ。内包した先のcreateStackNavigator()でタイトルバーを設ける都合上、大枠のタイトルバーを非表示にしないと二重にタイトルバーが出現してしまう。 まとめ 特定のスクリーンだけモーダルにするルーティング設定の紹介だった。 モーダルといえば、UIフレームワークに用意されているものもある。<Modal />のようなものを利用するならば遷移モードを変更しなくてよいのだが、そのモーダルはタイトルバーを覆わない。スクリーンコンポーネントがタイトルバーより下層レイヤーに位置するからと想像できる。結局、ルーティングで解決しなければならないのかもしれない。 このエントリーが、あなたのクリエイティビティを刺激するものであると期待したい。

    November 21, 2019
  • React Nativeで要素を上下左右に中央寄せする方法

    React Nativeで要素を上下左右に中央寄せする方法

    React Nativeアプリのマークアップにおいても、要素を上下左右に中央寄せにする場合、もちろんスタイルシートによって配置する。この点はWebアプリと変わらない。 しかしReact Nativeのスタイル適用の特徴は、JavaScript記法であること、および梱包要素のボックスモデルのdisplay値はFlexboxであることだろう。 まず「JavaScript記法であること」においては、CSSプロパティ名の単語の先頭を大文字にしなければならない。font-sizeはfontSizeと書く。いわゆるキャメルケースと呼ばれる記法のことである。 そして「ボックスモデルのdisplay値がFlexboxであること」においては、それほど弊害もなくいつも通りのCSSの知識が役立つことだろう。しかしflex-directionのデフォルト値がcolumnである点がややこしい。 このエントリーでは、React Nativeの記法で要素を上下左右に中央揃えする方法を紹介したい。 テキストを上下左右に中央寄せ ここでは<SafeAreaView />に対して、3つのスタイルを適用している。 まずflex: 1,。これは要素サイズをスクリーン縦横幅いっぱいにしている。この指定がなければ、内包要素の高さを保持することになる。たとえば<SafeAreaView />が空要素であるならば、高さ0pxということだ。 つづいてalignItems: ‘center’,では、横方向に対して中央寄せをしている。そしてjustifyContent: ‘center’,が縦方向だ。 お気づきだろう。Flexboxの主軸の向きが縦軸時の指定であると。そう。WebアプリにおけるCSSだとデフォルトの主軸は、alignItemsは縦方向で、justifyContentは横方向だった。そしてflex-direction: column;として縦軸にするとalignItemsが横方向で、justifyContentが縦方向の指定に変化することを思い出せる。 このようにReact Nativeの梱包要素のボックスモデルのdisplay値はFlexboxであり、デフォルトで縦軸になっているのである。 すこしややこしいが、そのようなものだと覚えてもらえると助かる。 画像を上下左右に中央寄せ 画像を上下左右に中央寄せする程度のことは、前述の「テキストを上下左右中央寄せ」の記述で実現できることだろう。だけれど、もし上記ソースコードの<SafeAreaView />に画像以外の内包要素が存在していて、それらはいずれも左寄せで、画像はかぶさる具合に中央寄せするなんてときは、梱包要素で中央寄せ指定ができない。 そこで画像にのみ中央寄せを施すわけだ。内約はposition: ‘absolute’;で、親要素を基準にしたtop: ‘50%’, left: ‘50%’,の相対位置に配置する。そしてtransformプロパティのtranslateXとtranslateYでネガティブポジションすれば、果たして中央寄せができる。 もし画像の裏にタップしたいコンテンツやスクロールしなければならないような場合は、<Image />のpointerEvents propsにnoneを与えればタッチイベントが透き通るはずだ。 まとめ React Nativeで要素を上下左右に中央寄せする方法の紹介だった。 梱包要素に対して適用する方法と固有要素に対して適用する方法をご覧いただいたが、いずれの方法も親要素ありきであることは覚えておきたい。そもそも親要素に高さがなければ、上下中央にはならない。したがってflex: 1;としてスクリーンサイズに吸着させたり、 としたりする工夫が必要だ。 このエントリーが、あなたのクリエイティビティを刺激するものであると期待したい。

    November 20, 2019
  • React NativeでWebViewを使わずHTMLをレンダリングする「react-native-render-html」の紹介

    React NativeでWebViewを使わずHTMLをレンダリングする「react-native-render-html」の紹介

    React Nativeアプリ開発でinnerHTML風な対応が要求された。APIの返り値にHTMLタグが含まれているデータをレンダリングするというものだ。 賢明なあなたにおかれては、<WebView/>を使えばいいじゃん!と思ったに違いない。 そう。そのとおりでWebViewによってHTMLタグを含んだ値をレンダリングすることが可能だ。しかし何かしらのイベントでHTMLタグに付与された属性値を参照する、という処理に悩まされてしまった次第である。 ひとしきりgithubやjs.coachを回遊して見つけたのが「react-native-render-html」だ。 このエントリーでは、HTMLデータを解釈して適当なネイティブビューにレンダリングする「react-native-render-html」を紹介したい。 react-native-render-htmlについて react-native-render-htmlは、HTMLタグを含む文字列値をWebViewを介さず100%ネイティブビューにレンダリングするReact Nativeコンポーネントだ。ネイティブビュー要素は、それぞれ適当なスタイルが当てられる。Normalize.cssが適用されているような状態を思い出してもらうと相違が少ないはずだ。 【react-native-render-html】https://github.com/archriss/react-native-render-html#creating-custom-renderers 特徴 WebViewじゃない HTMLを100%ネイティブビューにする ネイティブビュー要素はあらかじめスタイルが適用されている スタイルをカスタマイズできる HTMLタグ個別にカスタマイズできる 導入 Expo環境下で開発をしているならば、つぎのコマンドでもよいだろう。expo installならばバージョンが整合しているものをインストールしてくれる。 デモンストレーション それではもっともシンプルな実装例をご覧いただこう。 ファイル冒頭でreact-native-render-htmlのHTMLコンポーネントをインポートしている。そののhtml propsにhtmlContent定数を与えている。定数にはHTMLタグで構成された文字列値が格納されている。これがレンダリングされた状態が下図である。先に述べたとおりNormalize.css適用時の装いをしているのがわかると思う。 HTML属性値を取得する 先ほどのシンプルな例では、Normalize.css適用時の装いをしていたけれども、それだけという要件は少ないだろうと思う。きっと特定タグになにかしらのイベント処理を施す必要に迫られる。以下の実装例は、<span/>に固有のスタイル適用とonPressイベントハンドラを定義している。 まとめ HTMLデータを解釈して適当なネイティブビューにレンダリングする「react-native-render-html」React Nativeコンポーネントの紹介だった。 実際に案件で使ってみて、innerHTML風に扱うことができる印象を受けた。HTML属性値を取得する項目でやったような実装をWebViewでやっていたら、きっと相当に悩まされていたに違いない。とても有用なReact Nativeコンポーネントではないだろうか。 このエントリーが、あなたのクリエイティビティを刺激するものであると期待したい。

    November 19, 2019
←Previous Page
1 … 3 4 5 6 7 … 14
Next Page→

会津ラボ

Proudly powered by WordPress