技術情報 の記事一覧

みなさん、こんにちは。GMOインターネット株式会社の斉藤です。本記事では、MetaMaskを使用してブロックチェーンと連携するためのWebページを作成する方法を紹介します。詳細は下記内容をご確認ください。 はじめに さて、いま世間で注目のトレンドと言えばWeb 3.0ですね(いきなり)。 私もトレンドに乗り遅れてはいけないと言うことでいろいろ勉強しているところです。私個人としては特にそのインフラ面での技術スタックに注目してます。Web 1.0/2.0はHTTP、DNS、SMTP、TLS/SSL等のプロトコルに加え、仮想化、コンテナ、Kubernetesのようなリソース集約/分散化が基盤技術でした。そして、Webがリッチになるにつれてそれらの技術も進化し、エンジニアとしてそれを追いかけることで仕事をしてきました。 しかし、もしWeb2.0 → Web 3.0の完全な移行が起きると、これらの基盤技術がブロックチェーン技術に置き換わることを意味します。ブロックチェーンは全く違う技術要素で動くので、今までの技術ナレッジが通用しない可能性があります。せっかくここまで積み上げてきたのに！(笑) もちろん、Web 3.0が今後どの程度支配的になるのかはわかりません。ただWebに関わってきたエンジニアとして、Webの仕事ができなくなるリスクは取れないでしょう。こんな楽しい仕事を手放してしまうなんてもったいですよね 。なのでWeb 3.0についても学習を進めていくべきだと思うのです。 https://twitter.com/hironobu_s/status/1515540135450148875 ということでWeb 3.0と言えばブロックチェーンです。今回は入門編ということで、MetaMaskを使ってブロックチェーンと連携するWebページを作ってみます。 MetaMaskとは MetaMaskはEthereumに対応した暗号資産(仮想通貨)のウォレットです。他のチェーンについても簡単に追加できます。この記事を書いている現在で非常にポピュラーで、多くの利用があります。Webブラウザの拡張機能としての実装と、モバイルアプリ(iOS / Android)の実装があります。 https://metamask.io/ MetaMaskはウォレット機能だけで無く、Webサイトとの連携も考慮されています。公式サイトにも「gateway to blockchain apps」とあり、WebページからMetaMaskのブラウザ拡張を通じて比較的容易にブロックチェーンにアクセスすることができます。 上記は私のウォレットの一つです。0.0096ETH(29.06USD相当)が入っています。 準備 WebページとMetaMaskのブラウザ拡張機能と連携して、ブロックチェーン上の情報にアクセスする実装について解説していきます。また、MetaMaskは複数のアカウントを管理することができるので、アカウントを切り替えたりウォレット間で送金をする実装も行ってみます。 作るものはWebページなのでHTMLとJavaScriptだけで作れますが、ここではReactを使います。 もしMetaMaskを持っていない場合は、公式サイトからインストールしておいてください。 インストールが終わったらアカウントの作成を行っておいてください。チュートリアルを進めるだけです。すでにアカウントを持っている方はそれを使ってもらって構いません。 今回は送金などは行わないので、暗号資産としてのETHを購入する必要はありません。ただ複数のネットワークを試すので、MetaMaskインストール後に設定からテストネットワークを有効にします。右上のアイコンから「設定」「高度な設定」と進んで「テストネットワークを表示」を有効にしてください。 デモ こちらが今回作成するデモページです。 MetaMaskテストページ GetAccountを押すとMetaMaskとの接続が行われて、ウォレットアドレスなどが表示されます。試しにMetaMask上からアカウントや接続先ネットワークを変更してみてください。Webページ側も追従して内容が変わるはずです。 ウォレットアプリをWebサイトと接続するというと、何が起きているのか分からないし不安だと言う方もいると思います。そういう方は、ぜひ以下の実装方法をご覧頂ければと思います。 実装 実装に当たってMetaMaskのドキュメントに目を通しておくと良いです。 Getting Started | MetaMask Docs window.ethereumオブジェクト WebサイトからMetaMaskを通じてブロックチェーンにアクセスするには、window.ethereumオブジェクトを使います。このオブジェクトの存在確認をして、MetaMaskがインストールされている/いないを判断します。 if (typeof window.ethereum !== 'undefined') { console.log('MetaMask is installed!'); } ethereumオブジェクトには多くのメソッドがあります。このあたりにリファレンスがありますが、見ておいていただきたいのは request メソッドです。requestはMetaMaskを通じてEthereumブロックチェーンへRCPでメソッドコールを行います。要はブロックチェーン側の機能を呼び出すものです。 MetaMaskとの接続 次にWebサイトとMetaMaskを「接続」させます。接続というのは、現在Webブラウザで見ているページからMetaMaskアカウントへのアクセスを許可している状態だと思ってもらうとわかりやすいです。当然、初回の接続時にはMetaMaskからユーザーに接続許可を尋ねる画面が表示されるので、ユーザーはそれを元に許可/不許可を行います。 接続するにはrequestでeth_requestAccountsを呼び出します。以下は実装例です。 try { const acccounts = await window.ethereum.request({ method: 'eth_requestAccounts' }); if (acccounts.length > 0) { console.log(acccounts[0]); } } catch (err) { if (err.code === 4001) { // EIP-1193 userRejectedRequest error // ユーザーが接続を拒否するとここに来ます console.log('Please connect to MetaMask.'); } else { console.error(err); } } accountsには接続に成功したアカウントの一覧が返ってきますが、現在は必ず1つですが、将来的な拡張のために配列になっているとドキュメントにはありました。そしてaccounts[0]は接続したEthereumのウォレットアドレスが文字列で格納されています。 ネットワークの取得 接続に成功するとethereumオブジェクトを通じて利用可能なメソッドが増えます。eth_chainIdは現在ウォレットが接続しているネットワークのChain IDが取得できます。 const Chains = { 1: "Mainnet", 3: "Ropsten", 4: "Rinkeby", 42: "Kovan", 1337: "Geth private chain(default )", 61: "Ethereum Classic Mainnet", 62: "Morden", } const hexChainId = await window.ethereum.request({ method: 'eth_chainId' }); const chainId = parseInt(hexChainId); const name = Chains[chainId]; Chain IDはchainlist.orgなどで確認するとよいでしょう。 ネットワークの変更を検知する ユーザーがMetaMaskのウインドウからアカウントやネットワークの接続先を変更するケースを考えてみましょう。変更に合わせてWebページ上の表示とMetaMaskの整合性を取る必要があります。 window.ethereumオブジェクトはNode.jsのEventEmitterを実装しているため、以下のようにイベントを監視できます。以下が実装例です。 window.ethereum.on("accountsChanged", (accountNo) => { // ここでアカウントの変更をハンドルします }); window.ethereum.on("chainChanged", (accountNo) => { // こちらも同様です }); それでは、実際にWebページを作ってみましょう。まず適当な名前でReactアプリを作成します。 npx create-react-app metamask-testapp cd metamask-testapp 今回はWebページ上のボタンを押してMetaMaskへの接続を行い、接続が成功した場合はウォレットアドレスと接続先ネットワークを表示するようにしてみます。 実装はsrc/App.jsに書いていきます。 import './App.css'; import { useEffect, useState } from 'react'; const Wei = 1000000000000000000; const Chains = { 1: "Mainnet", 3: "Ropsten", 4: "Rinkeby", 42: "Kovan", 1337: "Geth private chain(default )", 61: "Ethereum Classic Mainnet", 62: "Morden", } const getAccount = async () => { try { const account = await window.ethereum.request({ method: 'eth_requestAccounts' }); if (account.length > 0) { return account[0]; } else { return ""; } } catch (err) { if (err.code === 4001) { // EIP-1193 userRejectedRequest error // If this happens, the user rejected the connection request. console.log('Please connect to MetaMask.'); } else { console.error(err); } return ""; } } const handleAccountChanged = async (accountNo, setAccount, setChainId) => { const account = await getAccount(); setAccount(account); const chainId = await getChainID(); setChainId(chainId); } const getChainID = async () => { const chainId = await window.ethereum.request({ method: 'eth_chainId' }); return parseInt(chainId); } function App() { const [account, setAccount] = useState("-"); const [chainId, setChainId] = useState(0); const btnDisabled = account != "-"; const initializeAccount = async () => { const account = getAccount(); if (account != "") { handleAccountChanged(account, setAccount, setChainId); } }; useEffect(() => { if (typeof window.ethereum !== 'undefined') { window.ethereum.on("accountsChanged", (accountNo) => handleAccountChanged(accountNo, setAccount, setChainId)); window.ethereum.on("chainChanged", (accountNo) => handleAccountChanged(accountNo, setAccount, setChainId)); } }, [account]); return ( <div> <h2>MetaMask test</h2> <div> <h3>Account</h3> <button id="GetAccountButton" onClick={initializeAccount} disabled={btnDisabled}>Get Account</button> <p id="account">Address: {account}</p> <p id="account">Chain ID: {chainId}</p> <p id="account">Chain Name: {Chains[chainId]}</p> </div> </div > ); } export default App; おわりに 改めて、完成したデモページはこちらです。 デモページ MetaMaskを利用するとブロックチェーンに簡単にアクセスできますね。HTMLとJavaScriptが書ければすぐにでも始められます。 次回は実際に送金トランザクションを作ってみます。この記事の1ヶ月後くらいに公開されますが、そちらもぜひご覧いただければと思います。 公開されました 第2回はこちらです そして皆さんもSTEAM人材になりましょう笑。 https://twitter.com/hironobu_s/status/1512359356301385731 このツイートはジョークですが「STEAM人材」も聞くことが増えてきたキーワードですね。おおよそこんな意味のようです。そして私が働いているGMOインターネット株式会社ではSTEAM人材を大募集しています。 募集職種 | GMOインターネット株式会社採用 「いきなり応募するもなぁ」と言う方は、Twitter DMで私に直接ご相談いただいても構いません。社内の雰囲気、開発現場の雰囲気、人間関係、待遇などなど、社内の人間からリアルな情報を知りたいという方はお気軽にどうぞ。 それではまた次回お目にかかりましょう。 https://developers.gmo.jp/17450

こんにちは。GMOインターネット セキュリティエンジニアの関です。今回はクロスサイトスクリプティングの手法の一つ、DOM based XSSの検査の手法について、PortSwiggerが公開しているWeb Security Academyのテストページを使って解説していきます。※Web Security Academyはアカウント登録をすれば誰でも無料で使えます。 1.　注意事項 検査により、意図せずにシステムの停止や不具合を引き起こしてしまう可能性があるため、紹介する手順を試してみたい場合は本番に影響を及ぼさない検証環境か、それ専用に作られたテストサイトでの作業をお勧めします。自組織が管理しないWebアプリケーションへの検査は、場合によっては不正アクセスとして違法となる可能性があります。 2.　クロスサイトスクリプティングとは クロスサイトスクリプティングとは、リクエストヘッダやパラメータに含まれる情報を画面に出力する処理にエスケープ不備があり、第三者（攻撃者）が用意した悪意あるスクリプトが埋め込まれた結果、意図しない処理を実行されてしまう脆弱性です。 想定される被害として、偽ページの表示や認証情報の奪取があります。 クロスサイトスクリプティングには以下3つの分類があります。 反射型XSS蓄積型XSSDOM based XSS 上記のうち、DOM based XSSはJavaScriptから動的にHTMLを操作するアプリケーションにおいて動作します。正規のスクリプトの動きを悪用し、不正なスクリプトを実行させることが特徴です。 自動の脆弱性診断などでよくあるパターンでは、対象のWebサーバに対して検査コードを含むリクエストを発行し、そのレスポンスの内容によって脆弱性が存在するかを調べますが、DOM-based XSSではクライアント上でJavaScriptが動作するまではXSSが発生しません。そのため、ツールによっては検知が難しく、手動で検証が必要な脆弱性となります。 3.　検出パターン / 例 今回は「BurpSuite」というローカルプロキシツールを使って検査していきます。セットアップや基本的な使い方について解説している記事などは検索すれば多数ヒットしますので、ここでは解説の対象外とします。※BurpSuite自体は無料でダウンロードできます。 まず、検査の際には以下文字列がレスポンス内にあることをトリガーとします。（ツールによっては下記の文字列がヒットすればDOM based XSSの可能性ありとして検出されるものもあります。） innerHTMLdocument.writejavascriptlocation.hrefevalsetTimeoutsetIntervalFunctionjQuery　他 検査文字列は以下の通りです。 javascript:alert(1)"><svg onload=alert(1)><script>alert(1)</script>　他 ※なお、トリガーとなる文字列や検査文字列は一例となります。 4.　検査手順詳細 ①　検査したい目的の画面まで遷移します。 ②　今回は検索処理なので、適当な文字列を挿入し検索を実行します。　　（SOCtestと検索してみました。） →左側の検索結果画面には、「0 search results for 'SOCtest'」と表示されています。 ③　Burp上で実際のレスポンスrawデータを確認してみます。 →対象のレスポンス内で「SOCtest」と検索してみると、0 matchesとなっています。 ④　レスポンスrawデータの中で、検索結果表示に該当する箇所を探してみます。　　今回は下記のように定義されていました。 ⑤　呼び出されているsearchMessageをもう一段掘り下げて確認してみると、scriptでこのように記載されています。 →innerHTMLとあるため、DOM-based XSSが発生する可能性があります。（トリガーパターン参照） ⑥　XSSの検査コードを挿入してみます。「"><svg onload=alert(1)>」（検査文字列パターン参照） →javascriptのポップアップが表示されたことが分かります。 ⑦　ここで改めて、レスポンスrawデータを確認してみますが、　　"><svg onload=alert(1)>は出力されていないため、ツールによっては自動検知が困難となります。 5.　おわりに 今回は、DOM based XSSの検出方法について紹介してきました。攻撃の特性上、ツールでは検出しにくいという点は説明した通りですが、そのほかにもWAFやブラウザのXSSフィルタでもブロックしにくい厄介な脆弱性です。 まずはこういった攻撃手法があることを認識することが第一歩だと思います。 具体的な対策手法や、もっと深堀して検査したい！という方は、調べてみるとチートシートやより詳細に解説している記事がありますので是非ご参照ください。

Power Apps と Power Automate はどちらもMicrosoft365のサービスなので、連携して簡単にアプリ開発が可能になっています。 今回はアプリのロジック部分はPower Automateで、インターフェース部分はPower Appsという構成で簡単ローコードアプリ開発方法を紹介します。 Power Automateの弱点 　Power Automateには様々なクラウドサービスを利用できるコネクタが豊富に用意されおり、認証手続きなどをアプリに実装する際の面倒な手続きなどを簡略化できるので、ローコードと併せてアプリ開発のハードルが格段に低くなっています。一方、残念なことにアプリを公開してユーザーに利用してもらうという点において、ユーザーインターフェースの部分では実質開発者用のみ用意されているだけなので、この点がPower Automateの弱点となります。例えばメール送信アプリを作成してみると、宛先、件名、本文、添付ファイルの入力はこのようにプアインタフェースとなります。 Power Appsと連携するフローの作成 　まずは、PowerAppsから呼び出されるロジック部分をPower Automateで作成してゆきます。今回はメール送信するフローを作成します。新しいフローの作成から、「自動化したクラウドフロー」を選択して、「スキップ」を選択します。 コネクタの一覧から「PowerApps」を選択します。 トリガーから「PowerApps（V2）」を選択します。 メールアプリに使用するメールアドレス、件名、本文の受け渡しの設定をします。「入力の追加」を選択します。 「電子メール」を選択します。種類を選択することで、メール形式としての文字列の入力チェックが可能となります。 件名、本文は「テキスト」、添付ファイルは「ファイル」を選択して項目名を変更しておきます。 次に「新しいステップ」を選択して、「Office 365 Outlook」を選択します。 アクションから「メールの送信（V2）」を選択します。 宛先を選択して「動的なコンテンツの追加」を選択します。上のステップで定義した「電子メール」を割り当てます。 同様に件名と本文、にも動的なコンテンツを割り当てます。 詳細オプションを選択して、添付ファイル名には送られてくる添付ファイル名として triggerBody()?['file']?['Name'] こちらの式を設定します。添付ファイルコンテンツには「添付ファイル」を割り当てます。ついでに左上の名前を変更しておきましょう。 さらに、このまま添付ファイルが無い状態でメール送信をしようとするとエラーとなってしますので、添付ファイルがある場合とない場合の分岐を追加します。条件式としては “添付ファイル＝null” を判別して、分岐します。以上でフローの作成は完了です。忘れずに保存しておきましょう。 Power Appsアプリの作成 　続いてPower Appsを開いてアプリを作成してゆきます。 「挿入」メニューから「テキスト」-「テキスト入力」を選択して、メールアドレス、件名、本文用に３つ配置します。 メールアドレス用テキストボックスの名前と既定プロパティーを設定します。 同様に件名の設定を行います。 本文のモードは「複数行」を設定します。 添付ファイルのアップロードを可能にするにはひと手間工夫が必要です。Power AppsではSharePointリストの添付ファイルカードを利用する時だけ「添付ファイルコントロール」が表示されるようになっています。一時的にSharePointのリストに接続して「添付ファイルコントロール」を表示させて再利用する方法になります。「挿入」メニューから「フォーム」-「編集」を選択します。 「データソース」から「コネクタ」-「SharePoint」を選択して、適当なリストを選択して一時的に接続します。「挿入」メニューから「フォーム」-「編集」を選択します。 「添付ファイルコントロール」が表示されます。必要なのはこの「添付ファイルコントロール」だけなので、選択して「Ctrl+C」でコピーしておきます。 コピーした「添付ファイルコントロール」を「Ctrl+V」で貼り付けます。 エラーが出ているので、エラー該当箇所は全て数式を空白にしてしまいます。 追加した編集フォーム（Form2）は不要となるので消去しておきます。SharePointへのコネクタも不要となるので、左メニューのデータから削除しておきます。 「挿入」メニューから「ボタン」を選択して配置します。「テキスト」を“送信”に変更します。送信ボタンを選択した状態で、「アクション」-「Power Automate」を選択します。 先ほど作成したPower Automateのフローが参照できるのでこちらを選択します。Power Appsのコネクタを利用しているフローは自動的に表示されるようになっています。 数式入力待ちの状態になるので、以下の数式を入力します。各テキストボックスの値をPower Automateのフローに引き渡します。ファイルは「添付ファイルコントロール」が取得したファイル本体とファイル名を格納して引き渡します。 PowerApps連携_メール送信.Run(txtMailAddress.Text,txtSubject.Text,txtContent.Text,    {file:{        contentBytes:First(DataCardValue3.Attachments).Value,        name:First(DataCardValue3.Attachments).Name        }    }) 以上でPower Appsでのアプリ開発部分が完了しました。 動作確認 　実際にアプリを起動して確認してみましょう。それぞれの項目を入力、添付ファイルをアップロードして送信します。 問題なくメールと添付ファイルが送信されました。 以上、Power Apps と Power Automateの連携で簡単アプリ開発方法を紹介しました。実はPowerAppsでのメール送信アプリはもっと簡単な開発方法がありますが、今回はあえてPower Apps と Power Automateの連携でチャレンジしています。　両方の良いとこ取りでほとんどコードを書くことなくアプリ開発ができました。Microsoft365の各サービスは単体でも様々な機能を提供してくれますが、複数のサービスを組み合わせることで、さらにリッチで高機能なシステム、アプリへとレベルアップが可能となります。また、一度作ってお終いではなく、色々な機能を取り込んでどんどん機能アップして育てていく楽しみもあります。是非お試しください。

Googleドキュメントで作成したrtfファイルをHTMLに変換し、任意のクラスを付与する方法を紹介します。詳細は下記内容をご確認ください。 要約 googleドキュメントで作成されたrtfファイルをHTMLに変換し、任意のクラスを付与する ※実装すべての記述はしません 経緯 文量が多いブログ記事のようなページのため、見出しや本文などのクラスを振り分けて一括でHTMLに変換したい業務があったため個人用にツールを作成しました。 欲しかった機能 原稿からざっくり見出し2, 3, 本文をそのままコピペできる形に変換する見出し2, 3に章ごとの連番でid出力見出し2直下に画像用のコードを出力太字/アンダーラインなどを固有のクラスをつけたspanで囲む 実装について Googleドキュメントからダウンロードする際、HTML形式を選ぶとminifyされた状態でファイルが保存されるため、一旦rtfファイルでダウンロードしHTML形式へ変換する工程を挟んでいます。 当初、MacOS標準のtextutilでrtfファイルからhtmlへの変換を行っていましたが、ツール内での操作で完結させたかったため、npmパッケージのrtf.js（ https://www.npmjs.com/package/rtf.js ）を使用しています。 変換後の処理はPHPで行っています。 HTMLを配列に格納 rtfから変換されたHTMLの改行ごとにフォントサイズや太字箇所を判定し、配列へ格納します。 その際に不要なスタイルを削除し、また続いている文章が細切れになっている場合があるので結合します。 //フォントサイズを確認 preg_match('/font-size\:\s([\d]*)/', $value, $matches); if(empty($matches)){ $this_fontsize = ''; }else{ $this_fontsize = $matches[1]; //初出のフォントサイズの場合数値を追加 if(!in_array($this_fontsize, $arr_fontsize, true)){ $arr_fontsize[] = $matches[1]; } } 太字箇所がfont-weight:bold;として出力されているため、一旦b要素で囲みます。 これは後に固有のクラスがついたspan要素に変換されます。 if(strpos($value, 'font-weight: bold;')){ $htmlTag_pattern = '[0-9a-zA-Z\s\'\"\=\-\:\;\(\)\,\.]*'; $bold_pattern = "<span${htmlTag_pattern}font-weight\: bold;${htmlTag_pattern}>"; $value = preg_replace("/${bold_pattern}(.*?)<\/span>/", '<b>$1</b>', $value); //細切れになっている<b>を結合 $value = str_replace('</b><b>','', $value); $value = strip_tags($value, '<b>'); } bタグ以外のHTMLを削除し、フォントサイズとともに本文を配列へ格納します。 //太字以外のspanを削除 $value = strip_tags($value, '<b>'); //出力配列に追加 $arr_text_formated[] = [ 'font-size' => $this_fontsize, 'text' => $value ]; $arr_text_formatedに記事の全体が格納されるため、各要素を見出しや本文などに判定して固有のクラスをつけます。 また見出し2・3には連番でidを振り、アンカーリンクで移動できるようにします。 //例：見出し2の場合 if($this_fontsize == $arr_fontsize[0]){ 　 // 固有のクラスを設定 // 太字設定はは見出し用のクラスで設定されるためbタグは削除する $this_text = strip_tags($this_text); $text_formated = '<h2 '.$arr_web_class['h2'].' id="article'. $h2_num.'_0">'. $this_text . '</h2>'; // id用の連番を更新 $h2_num ++; $h3_num = 1; $result .= $text_formated; continue; } 任意のHTMLタグ・クラスを設定した見出し・本文は$resultに結合し、file_put_contentsとreadfileでHTMLファイルで出力します。 躓いたところ 前述の通りGoogleドキュメントからダウンロードする際HTML形式を選択すると、すべてminifyされた状態でファイルが作成され、html_entity_decodeしない限り日本語が読めない状態でファイルが保存されるため内容の確認がしづらくなってしまいました。 そのため、rtf形式でダウンロードするのですが、その場合はrtfファイルからHTMLへの変換が必要になります。MacOSの使用者は標準で搭載されているtextutilを使用すればよいのですが、Windowsを使用している人が変換できないためパッケージやライブラリを使いツール内でファイル形式の変換から対応できるようにしました。 終わりに Webページを作成する際、文量が多いほど抜け漏れや重複などのミスが起こり、また確認の時間も増えるため、一括で指定した形式に変換するツールによって時短を図りました。 一行一行確認しながらコピーペーストを行っていた場合と比べ、作業時間は約1/3になったため時短としては成功したと思います。 しかし個人で機能を増やしたり精査したりしているうちに、主な使用先であるオウンドメディアの運用がHTMLベタ打ちからCMSへ移行したため大体２週間でお役御免となりました。そういうこともあります。

こんにちは、GMOインターネット長谷川です。今回は技育祭スポンサーセッションLTでお話したOSインストールの自動化をより詳しくお伝えしていこうと思います。 OSのインストール自動化のツールやOSが対応している設定ファイルに関して 代表的なツール cobbler MAAS DHCP + tftp + web サーバによる自作 cobbler、MAAS共にdebian系やredhat系のOSをインストールできます。今回は内部でどのように動いているのか、また構築されているのかを把握するため DHCP + tftp + web サーバ の構成を前提として説明を進めていこうと思います。 OSの対応する設定ファイル preseed kickstart Autoinstall OSの対応する設定ファイルとしてはpreseed （Debian系OS対応）、kickstart（RedHat系対応）、Autoinstall（Ubuntu対応）があります。しかし、2022年4月リリース予定のUbuntu22.04ではpreseedは非対応となりますので、Ubuntu22.04のOSインストール自動化に対応するにはAutoinstallを理解する必要があります。 Autoinstallの形式 まずは、自動化をするにあたり一番重要となるAutoinstallの設定ファイル（user-dataファイル）から見ていきましょう。見ての通り、user-dataファイルはcloud-initの形式で記述されます。また、記述しなかったトップレベルキーに関しては、デフォルトの値が自動的にインストール時に適用されます。 #cloud-config autoinstall: version: 1 early-commands: - systemctl stop ssh locale: en_US.UTF-8 reporting: builtin: type: print keyboard: layout: jp network: network: version: 2 ethernets: eno1: {} eno2: {} .... .... ネットワーク経由でのOSインストールとAutoinstall ネットワーク経由でのOSインストールはPXE bootを使いますPXEでのOSインストールは簡単に図式すると以下のような流れを辿ります。 PXEブート用のサーバ設定 構築環境また今回構築する環境のネットワークは1セグメントで有ると仮定します。（通常の業務では複数のセグメントを使用しますが説明簡略化のため） # cat /etc/lsb-release DISTRIB_ID=Ubuntu DISTRIB_RELEASE=20.04 DISTRIB_CODENAME=focal DISTRIB_DESCRIPTION="Ubuntu 20.04.4 LTS" # uname -r 5.4.0-100-generic 必要なパッケージのインストール apt-get update apt-get install -y dnsmasq apache2 syslinux ディレクトリ作成 mkdir -p /var/ftpd/tftpboot/Ubuntu mkdir /var/ftpd/tftpboot/grub mkdir /var/ftpd/tftpboot/pxelinux.cfg mkdir -p /var/www/pxeboot/autoinstall mkdir /pxeboot/autoinstall/01-[PXEで使うNICのMACアドレス] mkdir /mnt boot時に必要になる起動ファイルのダウンロード＆ISOのダウンロードダウンロードが完了したらISOをマウントします。 wget http://archive.ubuntu.com/ubuntu/dists/focal/main/uefi/grub2-amd64/current/grubnetx64.efi cp grubnetx64.efi /var/ftpd/tftpboot wget https://releases.ubuntu.com/20.04/ubuntu-20.04.3-live-server-amd64.iso mount -t iso9660 -o loop ubuntu-20.04.3-live-server-amd64.iso /mnt/ カーネル起動時に必要になるファイルをマウントしたISOから取得します。 cp /mnt/casper/{vmlinuz,initrd} /tftpboot/Ubuntu grub.cfgにAutoinstallとISOをどこから読み込むか記述します。 vim /tftpboot/grub/grub.cfg grub.cfg if loadfont /boot/grub/font.pf2 ; then set gfxmode=auto insmod efi_gop insmod efi_uga insmod gfxterm terminal_output gfxterm fi set menu_color_normal=white/black set menu_color_highlight=black/light-gray set timeout=5 # 以下のmenuentryを新規追加する menuentry "Install Ubuntu Server (Pull the iso from web)" { set gfxpayload=keep linux /Ubuntu/vmlinuz autoinstall ip=dhcp url=http://[ PXEサーバのIP ]/pxeboot/[ ISO名 ] ds=nocloud-net\;s=http://[ PXEのサーバのIP ]/pxeboot/autoinstall/01-${net_default_mac}/ only-ubiquity --- initrd /Ubuntu/initrd } PXEの設定ファイルの記述 vim /tftpboot/pxelinux.cfg/default default default autoinstall label autoinstall kernel Ubuntu/vmlinuz initrd Ubuntu/initrd append autoinstall ip=dhcp url=http://[ PXEサーバのIP ]/pxeboot/[ ISO名 ] ds=nocloud-net\;s=http://[ PXEサーバのIP ]/pxeboot/autoinstall/01-${net_default_mac}/ DHCPサーバ＆TFTPサーバ設定dnsmasqはDHCPとTFTP両方の機能を持つことが出来るので一括で設定します。***.***.***.250の部分はリースするIPアドレス***.***.***.***はPXEサーバのIPアドレス vim /etc/dnsmasq.d/pxeboot.conf pxeboot.conf interface=eth1 # dhcpでリースするIPの範囲 dhcp-range=***.***.***.250,***.***.***.255,1h log-dhcp # PXEしたときに最初にloadされるファイルとその後のtftpのアドレス dhcp-boot=grubnetx64.efi,***.***.***.*** pxe-service=x86PC,"Network Boot",grubnetx64.efi,***.***.***.*** enable-tftp # tftpのrootディレクトリ tftp-root=/var/ftpd/tftpboot #以下はsystemd-resolvedとの共存設定 domain-needed bogus-priv strict-order bind-interfaces cache-size=256 ISOをboot時に読み込んでこれるようwebサーバのディレクトリにコピーします。 cp ubuntu-20.04.3-live-server-amd64.iso /var/www/pxeboot webサーバの設定apache2に/var/www/pxeboot/をhttp://PXEサーバIP/pxeboot/で公開する設定を入れます。 vim /etc/apache2/sites-available/pxeboot.conf pxeboot.conf Alias /pxeboot/ "/var/www/pxeboot/" <Directory "/pxeboot"> Options Indexes MultiViews FollowSymlinks AllowOverride None Require all granted </Directory> ln -s /etc/apache2/sites-available/pxeboot.conf /etc/apache2/site-enabled/pxeboot.conf Autoinstallでの要となるファイルの配置 Autoinstallはcloud-init形式のuser-dataファイルを使うことはブログの冒頭で説明しました。その他に必要となるファイルもこちらで同時に作成していきます。 meta-dataファイルに関しては空ファイルで問題ないのでtouchで作成します。user-dataファイルは必要に応じてお好きな設定を記述しましょう。 touch /pxeboot/autoinstall/01-[ PXEで使うNICのMACアドレス ]/meta-data vim /pxeboot/autoinstall/01-[ PXEで使うNICのMACアドレス ]/user-data user-data #cloud-config autoinstall: version: 1 early-commands: - systemctl stop ssh locale: ja_JP.UTF-8 storage: grub: reorder_uefi: False config: - {ptable: gpt, path: /dev/sda, wipe: superblock-recursive, preserve: false, name: '', grub_device: false, type: disk, id: disk-sda} - {device: disk-sda, size: 536870912, wipe: superblock, flag: boot, number: 1, preserve: false, grub_device: true, type: partition, id: partition-0} - {fstype: fat32, volume: partition-0, preserve: false, type: format, id: format-0} - {device: disk-sda, size: -1, wipe: superblock, flag: '', number: 2, preserve: false, type: partition, id: partition-1} - {fstype: ext4, volume: partition-1, preserve: false, type: format, id: format-1} - {device: format-1, path: /, type: mount, id: mount-1} - {device: format-0, path: /boot/efi, type: mount, id: mount-0} keyboard: layout: jp apt: preserve_sources_list: false primary: - arches: [amd64] uri: "http://archive.ubuntu.com/ubuntu/" systemd-resolved&dnsmasq&apache2を再起動してISOのアンマウント systemctl restart systemd-resolved systemctl restart dnsmasq systemctl restart apache2 umount /mnt あとは、サーバのboot設定をPXEにしてbootするとOSの自動インストールが走り始めます。 さいごに 以上AutoinstallによるOSインストール自動化をご紹介しました。Ubuntu22.04ではpreseedがサポートされなくなりますので、是非この機会にAutoinstallにチャレンジしてみてください。

こんにちは、GMOインターネット ネットワークチームの梅崎です。今回は弊社ネットワークチームの検証環境にあるWebサーバー群のために、プライベート認証局を立てた話です。※構築には easy-rsa を利用させていただきました。　作成されたファイルのパスなどはデフォルトのものを記載しております、適宜読み替えてください。※本文中の設定/コマンドはそのままコピペできなかったらごめんなさい。　(気をつけてはいますが、ワードプレスに慣れていないもので変な空白が……) 先に最終的になにをしたのかを 準備 easy-rsa をgit clone openssl-easyrsa.cnfを編集して [ easyrsa_ca ]セクションを変更(中間認証局を作らない場合はpathlen は0でも大丈夫だと思います) - basicConstraints = CA:true + basicConstraints = critical,CA:true,pathlen:1 [ easyrsa_ca ]セクションに下記追加 nameConstraints=critical,@name_constraints 下記セクションも追加※ 192.0.2.0/255.255.255.0 はご自身の環境に合わせてください [name_constraints] permitted;IP.1 = 192.0.2.0/255.255.255.0 permitted;DNS.1 = invalid.invalid 認証局を作る 初期化と認証局の秘密鍵や証明書作成は下記コマンドで鍵長などはお好みで、2022年現在だと4096bitもあれば大丈夫だと思います ./easyrsa init-pki ./easyrsa build-ca できた認証局の証明書(./pki/ca.crt)をダウンロードして「信頼されたルート証明機関」にインポートすればOKです サーバー用の証明書 サーバー用の証明書は下記コマンドで./easyrsa gen-reqは実際に秘密鍵を利用するサーバーで実行する方がおすすめです※192.0.2.1の箇所はご自身のサーバーのIPアドレス に合わせてください ./easyrsa gen-req hogehoge nopass ./easyrsa --subject-alt-name='DNS:invalid.invalid,IP:192.0.2.1' sign-req server hogehoge 後はコマンドの実行結果に出ているディレクトリに秘密鍵(./pki/private/hogehoge.key)と証明書(./pki/issued/hogehoge.crt)があるので実際に使用するだけです※Nginx等の利用の場合はサーバーの証明書へ認証局自身の証明書をcatかなにかでくっつける必要があります 以上で内部向けページも緑鍵に 目指せ「この接続ではプライバシーが保護されません」の撲滅！ 本編 はじめに 昨今では常時TLS化もわりかし行われていますが社内向け環境だと自己署名証明書、いわゆオレオレ証明書を利用していることが多いのかなと思っております。 もしサーバーがグローバルIPアドレスを持っていればLet's Encrypt等の利用も考えられるのですが、プライベートIPのみの環境ですとそれもできないです。 これを解決するためにはサーバーの証明書を個別にPCに登録するか、個人的に認証局を立てそれをPCに登録するかの二択だと思います。 ただ、サーバーの証明書を個別に登録するのはサーバーが増えたり減ったりすることも考えるとかなり手間です。かといって認証局を立てるとその秘密鍵が漏洩した場合、最悪すべての通信に中間者攻撃の恐れがあるため、気軽に立てるにはかなり荷が重い仕事になってしまいます。 そんなこんなで仕方なくセキュリティエラーを無視する日々でした…… そんなある日 証明書に載せられる情報について色々調べていたある日のこと、なんの気なしにプロファイルを眺めているとhttps://datatracker.ietf.org/doc/html/rfc5280#section-4.2.1.10制限するための方法が普通に書いているではありませんか！ということで、このオプションはどうやって適用できるのか、何ができてどんな挙動なのかを調べてみました。 認証局の証明書へ制限事項を追加 下記の設定を追加すれば認証局の証明書を作る際に、証明書へ制限事項の情報を追加できました。 nameConstraints=critical,@name_constraints [name_constraints] permitted;IP.1 = 192.0.2.0/255.255.255.0 permitted;DNS.1 = invalid.invalid nameConstraintsというのが、この認証局が発行するサーバー証明書に含むことができるSubject Alternative Name(以降SAN)のブラック/ホワイトリストとなっております。※昨今ではブラウザはホストと証明書の組み合わせが正しいかの確認にSubject Alternative Nameを利用しています。ざっくりいうと「このIPのサーバーにしか証明書は発行できません」という感じです。 設定中のcriticalは「この項目を理解できない実装はとりあえず証明書エラー扱いにしてくれ」というフラグです。 設定中のIPやDNSは値の形式を表していて内容は見たままなのですが、存在しない 値の形式は全許可扱いになるため要注意です。(例えばDNSの制限/許可がないとデフォルトで全許可です、危ない！) とあるブラウザの不思議な挙動 上記のような設定でいろいろな認証局とサーバー証明書を作って試したのですが、Chromeの挙動が意図したようにはなっていなかったのです。 具体的には、特定のIPアドレスのみ許可、DNS表記は不可としたく認証局の証明書に「すべてのDNS表記は不許可、IPは特定のプレフィックスのみ許可」や「この特定のDNS表記は許可、 IPは特定のプレフィックスのみ許可 」サーバーの証明書のSANはIPアドレス表記のみとした際 証明書自体は問題なしと出るのですが、Chromeの画面上だと証明書エラーとなる事象が起きてしまいました。※Firefoxだと問題なくページが表示される。 他にもいろいろ試していると、どうにもChromeはDNS表記の制限がある場合に、サーバー証明書へDNS表記のSANが無いとエラーと判断しているのではと思います。 ただ、検証環境ではIPでサーバーへアクセスできれば十分ですし、権威DNSサーバーを立てるのも面倒なので困ってしまいました。 その回避策として DNS表記のSANが無いとエラーになるのなら　・サーバー証明書 へは適当なドメインのSANを追加　・認証局の証明書へはそれへの許可のみをすれば実質IPだけの運用ができるのではと考えました。 とは言うのものの、勝手に変なドメイン名を利用するのも趣味ではなく、いい感じのTLDが無いか調べてみるとhttps://datatracker.ietf.org/doc/html/rfc6761#section-6.4名前解決を失敗するためのTLDがあり、自由に使っていいとも書いていたのでこいつを使っちゃおうということで 認証局の証明書はIPアドレスと「DNS invalid.invalid 」を併記でサーバー証明書にもとりあえずSANへ 「DNS invalid.invalid 」 を入れておこうということで落ち着きました。 まとめ まとめると下記を書けば大丈夫です。 nameConstraints=critical,@name_constraints [name_constraints] permitted;IP.1 = 192.0.2.0/255.255.255.0 permitted;DNS.1 = invalid.invalid (実はちょっぴり不安なので、やっていること間違えていればご教授ください。特にセキュリティ的にあかんことになっていると最悪なので！) 最後に これにてプライベートな検証環境にも鍵マークが現れました? 今後はLet's EncryptのようにACMEに対応したいなーという野望を……！ACMEに対応できれば構築中のおうちk8sの証明書の管理がはかどりそうですしACMEの認証局側の実装はOSSとして公開してくれているようなので、今後は検証環境への導入を頑張るぞい ということで、以上「社内検証環境用にプライベート認証局立ててみた」でした。ここまで読んでいただきありがとうございました。 付録 試した証明書の組み合わせと結果を下に貼っておきます。 　・縦が認証局の証明書のnameConstraints　・横がサーバー証明書のSANです。 10.0.12.36でアクセスした場合 test.example.comでアクセスした場合

今回は、EmacsからVS Codeに乗り換えて以降開発環境が完全にVS Codeに移行したことを記事にしました。最近愛用しているVS Codeプラグイン「Jumpy」も紹介しておりますので、是非試してみてください。 はじめに こんにちは、GMOインターネット株式会社の斉藤です。以前にブログ記事にも書いたのですが、昨年EmacsからVS Codeに乗り換えました。開発環境をまるっと乗り換えたわけですからそれはもう大きな変化だったわけです。 https://developers.gmo.jp/11041/ 今現在、私自身の開発環境はVS Code一択になって、Emacsは完全に使わなくなってしまいました。良いエディタなのは間違いありませんが、ちょっと寂しいですね。私は最近GMOの仕事ではPHP, JavaScriptなどを、プライベートではGo, Flutter(Dart), Next.jsあたりを触っています。特に後者のような新しい言語やフレームワークへの対応で、EmacsはVS Codeには確実にかないません。ユーザー数が違うからです。そして以前のブログでは、Emacsからの乗り換えに当たって導入したVS Codeのプラグインについて紹介したのですが、今回は最近私が愛用しているVS Codeプラグインを紹介したいと思います。 Jumpy Jumpyはwmaurer氏が開発したVSCodeのカーソル移動を助けてくれるプラグインです。このプラグインを使うと、画面上のどの位置でも2キーストロークで移動することができるようになります。コンセプトはvimのプラグインであるvim-easymotionと似ていますね。 jumpy - Visual Studio Marketplace 以下のGifアニメによる動作説明がわかりやすいです。 (GitHubから引用) 使い方ですが、VSCodeのExtenstionsから「jumpy」で検索してインストールします。 jumpyには行を指定してカーソル移動するJumpy Line Modeと、画面上の単語を指定して移動するJumpy Word Modeモードの2種類があります。使いたいモードと、モードを抜けるときにキーバインドを自分で設定する必要があります。 Word Modeに入るキーバインド { "key": "shift+enter", "command": "extension.jumpy-word", "when": "editorTextFocus" } モードを抜けるキーバインド { "key": "Escape", "command": "extension.jumpy-exit", "when": "editorTextFocus && jumpy.isJumpyMode" } モードに入る/抜けるという考え方は、モードを持っているエディタに慣れていない方にはわかりにくいかもしれません。ただ、VSCodeにはこういった形式のプラグインが多くあるので理解しておくに越したことはないです。 ここまで設定できれば、jumpyが使えるようになります。 残念なことに、日本語テキストだとジャンプポイントが減ってしまいます おわりに エディタのカーソルの移動効率を上げることができれば生産性もあがるので重要です。私がもともとEmacsユーザだったのも、キーバインドを大量に登録してカーソル移動も含めていろいろな機能を少ないキーで呼び出せるようにしたかったからです。そこからすると、画面上のどの位置にでもすぐに飛べるjumpyは優れものです。 ぜひ皆様も使ってみてください。おすすめです。 それではまた次回お目にかかりましょう。

前回までの「Power Appsでいきなりアプリ開発」に引き続き、今回はSharePointとPowerAppsを組み合わせていきなり入力フォームを作成してみましょう。PowerAppsの開発機能を利用して、SharePointだけでは実現できない入力フォームのカスタマイズが可能となります。 ウィザードでフォームのカスタマイズ まずはSharePointにカスタムリストを作成します。今回は天気を記録する簡単なリストです。リスト自体も既定で入力フォームが用意されていますが、カスタマイズできる範囲は限定的となっています。 Power Appsとの連携を確認してみましょう。 リストから「統合」-「PowerApps」-「フォームのカスタマイズ」を選択します。 Power Appsのウィザードが起動します。 ウィザードが終了すると、入力フォームが作成されています。カスタマイズということで試しに背景に色をつけてみました。 「ファイル」メニューを選択して、この状態で保存します。 「SharePointに公開」を選択します。 SharePointのリストに戻り、「新規」を選択すると、カスタマイズが反映された入力フォームが表示されます。登録済みのリストデータを選択してもデータ編集フォームとして同様に表示されます。 Power Appsでカスタマイズ リストの入力フォームが簡単にPower Appsでカスタマイズ可能なことが確認できたところで、Power Appsならではの機能的なフォームを作成してみましょう。 左メニューから「メディア」-「アップロード」を選択してPower Appsのギャラリーに天気の画像をアップロードします。 ギャラリーからアップロードされた晴れのファイルを選択して、フォームにドラッグ＆ドロップします。画像の名前を分かりやすいように変更しておきます。 全ての画像を配置しました。 次に、天気のテキストボックスを選択して、右メニューから「プロパティーを変更するためにロックを解除します。」を選択します。 「Default」プロパティーに以下の数式を設定します。 If(SharePointForm1.Mode=FormMode.New,TenkiText, Parent.Default) フォームが表示された場合、新規の場合は変数“TenkiText”を設定して、それ以外（編集）の場合は既存データを表示します。 同様に、日付のテキストボックスのロックを解除します。 「Default」プロパティーに以下の数式を設定します。 If(SharePointForm1.Mode=FormMode.New,Today() , Parent.Default) フォームが表示された場合、新規の場合は変数今日の日付を設定して、それ以外（編集）の場合は既存データを表示します。 配置した画像をクリックした場合の処理を設定します。 各画像の「OnSelect」プロパティーに以下の数式を設定します。 Set(TenkiText, "晴れ") クリックした場合に、天気テキストボックスに設定した変数“TenkiText”に“晴れ”の文字を設定します。他の画像にもそれぞれの天気の設定を割り当てます。 これによって、画像をクリックして簡単に天気の入力ができるようになります。 保存してSharePointに公開します。 リストから「新規」を選択すると、カスタマイズした入力フォームが表示されます。画像をクリックして簡単に入力できるようになりました。 標準フォームへの戻し方 カスタムフォームから標準のフォームへ戻すには、設定メニューから「リストの設定」を選択します。 「フォームの設定」を選択します。 「既定の SharePoint フォームを使用する」を選択することで、標準フォームの設定に戻すことができます。 以上、SharePointのリストからいきなり入力フォームのカスタマイズ方法を紹介しました。SharePointもPower AppsもMicrosoft365のサービスですので、親和性は抜群です。ウィザードですぐにカスタマイズ可能なフォームが作成できました。Power Appsならではの多機能性を発揮して、オフィスワークのモダナイズに役立ちそうです。

こんにちは！GMOインターネットの岩元です。データセンターの管理業務を主に担当しています。今回は、弊社で実施している新卒研修カリキュラムのひとつ「 データセンター見学会」についてご紹介させていただきます。 データセンターとは？ サーバーを設置する物理的な建物を指す言葉です。データセンター内部には多数のサーバーがラックに設置されています。データセンターの建物内は、24時間365日有人監視の元運営されています。通常は社内のメンバーが誰でも入室できる仕組みではなく、許可のあるメンバーのみが入室できるセキュリティの精度が高い建物です。 データセンターとGMOインターネット GMOインターネットでは国内・海外と多数の拠点で複数のデータセンターの運用をおこなっております。最近だと、以下に記事化されている通り福岡にデータセンターを新設しました。 https://developers.gmo.jp/13975/ 複数のデータセンターを運用することで、万が一どこかで障害が発生しても、すべてのサービスが利用できなくなるといったリスクを最小限に抑えることができるというメリットがあります。 世の中はクラウド化が進んでおり、弊社でもクラウド環境の提供や利用ももちろんありますが、昔ながらのオンプレ環境も引き続き運用しています。 新卒研修でデータ見学会を実施する目的 2010年ぐらいから新卒入社の研修の一環としてデータ見学会を毎年実施しています。 2020年、2021年に関しては、見学予定日がコロナ禍かつ緊急事態宣言の時期と重なったため、オンラインでデータセンターの紹介をするのみとなってしまいましたが、「実際に見てみたい」という要望も多く、2022年の年初に見学会を実施いたしました。 目的 目的は、実際に提供するサービスの仕組みや裏側をしっかりと把握し、業務に活かしてもらうこと 参加対象 インフラ担当だけではなく、開発担当やCS、事業部に配属予定のメンバーも含めてほぼ新卒全員 エンジニア以外の方は、配属後にデータセンターに訪問する機会はないかも知れません。ですが、他職種の方に運用体制を知っていただくことは有益だと考えています。たとえば営業職の場合であれば、セキュリティの詳細や管理方法、裏側を知っていることは自信を持ってご提案できる材料になりますし、何より顧客にとって安心して選択いただける情報を正しくお伝えできます。 見学詳細 見学時は、データセンターを出入りしているメンバーでも普段は見ることのできない場所を案内します。具体的には以下4つの設備を見学いただきます。 また、 サーバーを設置しているフロアをまわり、実際にこれから業務で関わる商材が利用しているサーバーを見ていただける他、実物のサーバーの中身を見ていただき触っていただく体験も提供しました。 特高設備UPS非常用発電機消火設備 特高設備 電力会社より特別高圧を受電する場合に必要となる装置。 UPS 万が一電源が喪失する状態になっても、一定時間電源を供給できる装置。 非常用発電機 万が一電力供給がおこなわれない状態になった場合にデータセンター独自で電気を作り出す装置。この装置がある事で万が一の状況でもサーバーを停止させることなく、稼働させる事ができます。 消化設備 万が一火災が発生したときに火を消し止める装置。消し止めるために放出されるのは水ではなくガスなのですが、その理由なども含めて設備情報をお伝えします。 サーバー体験 実際にはHDDやSSDの交換作業、メモリーの交換作業を体験してもらっています。これらの作業は自作PCなどの組み立て経験あれば簡単に思うかもしれませんが、はじめてサーバーの現物を見る人や触ったことのない人にとってはメモリーの抜き差しの力加減なども難しいのです。 実際に中身を見て触って体験ができる、とても好評なコンテンツです。 さいごに 残念ながら見学会は社外のお客様向けには開催していないのですが、GMOインターネットグループに入社した新卒メンバーはぜひじっくりと楽しんでいただきたいです。 また、社内・グループ会社のパートナーの皆様でデータセンター関連のご相談がありましたら　お話をさせていただきますので、お声がけください。

前回、「Power Appsでいきなりアプリ開発」ということでウィザードを利用してアプリを作成しました。今回は完成したアプリを使いやすいようにカスタマイズをしながら、Power Appsの使い方を紹介してゆきます。 一覧表示画面のカスタマイズ 最初に行うのは一覧表に表示する内容を修正します。ツリービューから「BrowseScreen1」を選択します。 メールアドレスの部分を選択すると、詳細設定の「Text」の項目には　ThisItem.メールアドレス　と表示されます。この項目に設定されている、データベースとしてのExcelの列名となります。ここをまずは“姓”と“名”に設定を変更します。 ThisItem.　まで入力すると、選択候補の一覧が参照できるので、「姓」を選択します。 続けて「名」の部分を設定します。ラベルを2つ並べる方法でもよいですが、今回は　ThisItem.姓 & " " & ThisItem.名　このように入力をして一度に表示できるようにしておきます。 プロパティーを選択して、文字の色や大きさなども修正しておきます。 最後の部分は生年月日に変更します。 続けて年齢も表示するようにします。アイテムを選択した状態で「挿入」-「ラベル」を選択します。 ラベルを挿入して、「Text」には　"(" & ThisItem.年齢 & ")"　を入力します。 文字の大きさや位置などを調整します。右下の表示ツールで拡大表示をすると設定しやすくなります。 最後に表示名を　"会員データ"　に変更します。一覧表示のカスタマイズは以上となります。 詳細表示画面のカスタマイズ 次に詳細に表示する内容を修正します。ツリービューから「BrowseScreen1」を選択します。表示の順序を修正します。 「DetailForm1」を選択します。「プロパティー」から「フィールドの編集」を選択します。 「姓（カスタム）」の三点リーダー（・・・）から「上へ移動」を選択して、「姓」の表示位置を修正します。マウスでドラッグ＆ドロップしても表示位置を変更できます。 他の項目も同様に見やすいように整えます。場合によっては不要なフィールドを削除したり、追加したりも可能です。 最後に表示名を　“会員データ（詳細）”　に変更しておきます。 編集表示画面のカスタマイズ 詳細画面と同じように編集画面の表示順序を変更します。 最後に表示名を　“会員データ（編集）”　に変更しておきます。 見た目上の修正は以上となります。 ここまでの内容を保存しておきましょう。ファイルメニューから「保存」もしくは、Ctrl + Sで保存可能です。 削除確認ボックスをつくる ウィザードで作成されたアプリでは詳細画面でデータ削除が可能です。ただし、この削除ボタンを選択するといきなりデータが削除されてしまう仕様となっています。ここに削除前の確認メッセージを表示するように機能を追加してみましょう。DetailScreen1を選択します。 挿入メニューから「ラベル」を選択します。 挿入したラベルに色を付けます。さらにテキストに確認メッセージを入力してフォントサイズや色、配置を整えます。 続けてボタンを2つ追加します。 こちらがデータを削除する前の削除確認ボックスとなります。 削除ボタンを選択して、レコードを削除する数式をそのまますべてコピーします。 実際にデータの削除を行うため、「はい」ボタンを選択して、数式に先ほどコピーした関数、Remove([@テーブル1], BrowseGallery1.Selected); If (IsEmpty(Errors([@テーブル1], BrowseGallery1.Selected)), Back())を入力します。 「いいえ」ボタンは後程設定しますのでそのまま”false”となります。 追加した、ラベル、2つのボタンをコントロールキーを押しながらマウスで選択します。そのままグループメニューから、「グループ」を選択します。グループ化することで、一度に操作しやすくします。 作成したグループ「Group1」の詳細メニューの、「Visible」に”alert”という名前を設定します。最初の設定では「Group1」＝削除確認ボックスが非表示状態になります。 削除ボタンを選択したときに、削除確認ボックスを表示します。削除ボタンを選択して、数式に“Set(alert,true)”と入力します。 データの削除後削除確認ボックスを非表示にします。ツリービューから「Button1」を選択します。すでに設定されている数式の後ろに　;Set(alert,false)　を追記します。数式バーのボタンで領域を広げることができるようになっています。 データを削除しない場合も削除確認ボックスを非表示にします。ツリービューから「Button2」を選択します。数式に　Set(alert,false)　と入力します。 動作確認 ここまでを一度保存しておきます。削除確認ボックスの設定は完了です。実際に動作確認してみましょう。データ保存となるExcelファイルが閉じられていることを事前に確認しておきます。アプリの確認は実行ボタンを選択する方法もありますが、Altキーを押しながら操作すると、簡易的にこのまま動作確認できます。最初のデータを削除します。 削除完了後、一覧が画面に戻り、最初のデータが削除されているのが確認できます。その他の動作もAltキーを押しながら確認しておきましょう。 さいごに 以上、ウィザードで作成されたアプリのカスタマイズをしながらPowerAppsの基本機能をいくつか紹介しました。今回紹介した小目以外にも数多くの設定が自由自在に追加・変更可能です。基本的な機能はすべてウィザードで作成されていますので、PowerAppsの開発を楽しみながらより使いやすい、より豊富な機能をローコードで作りこんでみましょう。