サクサク読めて、アプリ限定の機能も多数！
トップへ戻る
今年の「かわいい」
noumenon-th.net
docker cpコマンドを利用すると、Dockerホストからコンテナへファイルをコピーすることができます。その逆も可能です。 今回はhttpdイメージからApacheサーバとしてのコンテナを立ち上げ、ホスト側からコンテナへファイルのコピーをおこなってみます（環境:macOSにてDocker for Macを利用）。 ホスト側（つまりローカル）の適当なディレクトリにおいて、コピー用のファイルを作成します。
Laravel（Framework 7.10.3を利用）のSanctum（以前はAirlockという名前）で「SPA（Single Page Application）認証」としてのAPIを作成し、フロントエンドはVue.jsを利用してログイン・ログアウト機能を実装してみます。 ログインフォーム画面（/login）と、ユーザー名とメールアドレスを表示させる画面 （/about）を作成します。 ログインしていない状態で/aboutにアクセスすると/loginにリダイレクトされ、ログインしている状態で/loginにアクセスすると/aboutへリダイレクトされるように実装しています。このような画面の切り替え自体はフロント側で実装する必要があり、本記事ではLocalStorageとVue Routerの機能を利用しています。 なおLaravelおよびVue.jsともにローカル環境（localhost
Laravelで REST API を実装してみます。 titleとauthorカラムを持つbooksテーブルを作成し、フォームリクエストでバリデーションを実装したAPIを作成します。またそのAPIに対してcurlによってPOST・GET・PUT・DELETEによるデータの新規作成、編集等の機能を確認します。 本記事とは実装手順がほぼ同じですが、ビュー（テンプレート）によるフォーム画面を用意したCRUD機能の実装に関しては下記関連ページもご覧下さい。 CRUDを実装する あらかじめデータベースを用意しておいて下さい。本記事ではMySQLを利用します。.envに適当な値を設定します。 .env DB_CONNECTION=mysql DB_HOST=127.0.0.1 DB_PORT=3306 DB_DATABASE=sample01 DB_USERNAME=hoge DB_PASSWORD
Nuxt.jsにおいてStore（ストア）を利用すると、データの状態管理をおこなうVuexによってコンポーネント間のデータの受け渡しを一元化できます。本記事ではそのStoreとvuex-persistedstateモジュールを利用してデータをLocal Storage（もしくはSession Storage）に保存してみます。 Storeにはクラシックモードとモジュールモードがありますが、本記事ではモジュールモードによる記述で説明していきます。２つのモードの違いについては公式サイトを参照して下さい。 Nuxt.jsによるプロジェクトの作成は下記ページをご覧下さい。 Nuxt.js入門 [$route.params][layouts] プロジェクト内のディレクトリを確認します。Storeによる機能は、主に「store」ディレクトリ内にファイルを追加していくことで利用できます。 $ tree
下記イラストのような画面遷移をもつCRUD（Create/Read/Update/Delete）アプリケーションを作成します。 booksテーブルを作成し、titleとauthorを新規登録/編集し、また削除する機能を作成します。本記事ではMySQLを利用し、あらかじめsample01データベースを用意しておきます。.envに適当な値を設定します。 .env DB_CONNECTION=mysql DB_HOST=127.0.0.1 DB_PORT=3306 DB_DATABASE=sample01 DB_USERNAME=hoge DB_PASSWORD=pass
Laravel 6.xにおいてAPIを作成し、フロント側はVue.jsでSPA（Single Page Application）を実装します。 作成するアプリケーションの概要 本記事では下記イラストのような、必要最低限の説明で済む機能を持つアプリケーションを作成します。 １,すでに1件登録した様子です。 ２,フォームが未入力もしくは11文字以上を入力し追加しようとするとエラーとなります。バリデーションに関してはAPI側で必要最低限（入力必須/10文字まで）を実装し、フロント側での実装はしていません。 ３,編集ボタンをクリックすると、4のように編集フォームが表示されます。挙動が不格好ですが、編集ボタンをクリックすることによって、編集フォーム領域の表示非表示のフラグ（true/falase）を切り替えているだけです。 ４,「編集する」もしくは「キャンセル」をクリックすると、編集フォームは消えま
Djangoにあらかじめ備わっている（ビルドインされた）認証機能とUserモデルを利用して、ログイン画面（ログイン機能の流れ）を構築してみます。 Djangoには、ログイン・ログアウト・パスワード変更/リセット等の認証関連の機能、すなわち認証のビュー（Authentication Views）があらかじめビルドインされています（Djangoのビューは他のフレームワークおけるコントローラーのことです）。本記事ではこのうちのログイン・ログアウトのビューを利用してみます。 Userモデルのカスタマイズについて 認証のビューの説明の前に、ログイン時のユーザー名とパスワードで利用するUserモデルについての概要を説明します。DjangoにはすでにUserモデルが備わっています。このUserモデルを利用するパターンとしては「既存のUserモデルを拡張する」場合と「カスタムのUser モデルを置き換える
Dockerのデータボリュームのバックアップを試してみます。 データボリュームのバックアップを取るためには、まずそのデータボリュームをマウントしたデータボリューム・コンテナを作成します。 データボリューム（Data Volume）とデータボリューム・コンテナ（Data Volume Container ）に関しては下記の関連ページをご覧下さい。 Data Volume Container について [Dockerの永続化] これから下記のような構成のデータボリューム・コンテナを作成します。 MySQLサーバーとしてのコンテナで、名前がmycon1のデータボリューム・コンテナを作成します。下記コマンドによってmyvol1という名前のデータボリュームも自動で生成されます。
AbortControllerを利用するとfetchによるリクエストを中断させることができます。 今回作成するのは、AbortControllerの発動までに3秒の制限時間を授けた簡単なアプリです。fetchにおいて正常な処理が返されるまでに3秒以上経過するとエラーが表示されるようにしています。 送信ボタンをクリックして3秒後にAbortErrorが表示される。 fetchによりindex.html上のフォームからtest-get.phpに値を渡し、index.htmlの<div id=”result”></div>にtest-get.phpから返ってきた値を表示させようとしていますが、test-get.phpでは故意に5秒の遅延を授けているので「AbortError」が表示されます。 fetchについては関連ページをご覧下さい。 fetchを利用する[GET][POST] index.h
version: '3.3' services: wordpress: image: wordpress:latest depends_on: - db ports: - "8000:80" restart: always environment: WORDPRESS_DB_HOST: db:3306 WORDPRESS_DB_USER: wordpress WORDPRESS_DB_PASSWORD: wordpress WORDPRESS_DB_NAME: wordpress volumes: - ./html:/var/www/html db: image: mysql:5.7 volumes: - db_data:/var/lib/mysql restart: always environment: MYSQL_ROOT_PASSWORD: root MYSQL_DATABASE:
GitHubなどのリモートリポジトリにあるブランチ、すなわちリモートブランチをローカルリポジトリにて確認します。 仮にリモートリポジトリに「hanako-branch」ブランチが生成されているとして、それをローカルリポジトリで確認できるようにします。 Gitコマンドによる方法 まずリモートリポジトリの情報を取得します。下記コマンドですべてのリモートリポジトリのブランチを取得します。
gRPCのサーバー及びクライアントを、Node.jsで実装してみます。 gRPCとは？ gRPCとは、Googleが開発したRPC(remote procedure call：遠隔手続き呼び出し)のフレームワークです。RPC技術によって、別のホストのプログラムによるメソッドを呼び出すなどの処理を行うことができます。 gRPCは、HTTP/2によって通信が行われます。またデータをシリアライズ（シリアル化）するフォーマットとして、デフォルトでProtocol Buffers （通称：Protobuf）が利用されます。つまりこのProtocol Buffers によって言語の形式に依存せずにエンコードされたデータを HTTP/2 上で通信します。その際に利用するのが.protoファイルです。 本記事では、クライアントからサーバーにおいて、1度のリクエストに対して1度のレスポンスを返す Simpl
HTTPクライアントであるaxiosモジュールを利用して、Vue.jsにおいてJSONデータを取得してみます。 JSONのモックデータを提供するサービスであるJSONPlaceholderを利用します。 以下リンクで取得できるデータにおいて、userIdが1のデータをGETによって取得してみます。 https://jsonplaceholder.typicode.com/todos [ { "userId": 1, "id": 1, "title": "delectus aut autem", "completed": false }, { "userId": 1, "id": 2, "title": "quis ut nam facilis et officia qui", "completed": false }, …省略
Kubernetes（クーバネティス）はコンテナの運用を自動化するためのオーケストレーションツールです。 下記関連ページでは、1つのホスト上でコンテナを起動させていますが、複数のホストにおいてコンテナを運用していく際に利用するのがKubernetesです。 Docker入門 [Hello World] コマンドの基本 Kubernetesを利用する環境は、大まかに以下3つに分けられます。 ・GCPやAWS、Azureなどのマネージドサービス ・Rancher、Kubesprayなどを利用したオンプレミスによる構築 ・MinikubeやDocker Desktop（Docker for Mac/Win）などのローカル環境 本記事ではDocker Desktopを利用してKubernetesを立ち上げます。その前にKubernetesの構成を大まかに説明してみます。 Kubernetesは、D
Dockerの永続化について説明します。 コンテナ内で作成されたデータは、そのコンテナ自体を削除すると消えてしまいます。そこでそのデータを保存し、他のコンテナからも利用できるようにするがデータの永続化です。 本記事では、データボリューム（Data Volume）とデータボリューム・コンテナ（Data Volume Container ）による永続化をおこなってみます。 データボリューム（Data Volume） まず「docker volume create」コマンドでデータボリュームを作成します。下記ではtestvolumeという名前のデータボリュームを作成しています。
Vue CLI 3（Command Line Interface）を利用して、ルーティング処理を施すVue Routerと、データの状態管理をおこなうVuexによるアプリ構築の概略を説明してみます。 インストール まずはVue CLIをインストールします。Node.jsのバージョンは8.9以上が必要です。
ウェブ時々、批評
お問い合わせ用のメール送信フォームを作成します。 デモ画面（実際には送信されません） フォーム/確認・チェック/送信 それぞれの画面に遷移していきます mail_form.php（フォーム画面） <?php session_start(); header("Content-type: text/html; charset=utf-8"); //クリックジャッキング対策 header('X-FRAME-OPTIONS: SAMEORIGIN'); ?> <!DOCTYPE html> <html> <head> <title>メールフォーム</title> <meta charset="utf-8"> </head> <body> <p> 全ての項目が必須です。</p> <form action="mail_check.php" method="post"> <p>名前：<input typ
DOMContentLoadedイベントはDOMツリーの構築が完了した時点で発火されます。一方、loadイベントはDOMツリーに加えて画像やすべてのスクリプトが読み込まれた時点で発火されます。よって特に画像に関する処理を行わない限りページの初期化はDOMContentLoadedイベントを利用するのが良いでしょう。 WebブラウザにおけるJavaScriptの処理の流れ（1〜3）を大まかに記述します。 1. WebブラウザはグローバルオブジェクトであるWindowオブジェクトを生成します。そしてWindowオブジェクトのプロパティとしてDocumentオブジェクトが生成されます。 2. DocumentオブジェクトはDOMツリーを読み込んでいきます。解析が終わるとDOMContentLoadedイベントが発火されます。
テーマを一から作成する 第8回目 前回は月別アーカイブページを作成しました。今回は、固定ページを作成します。 第7回目 月別アーカイブページを作成する[date.php] 今回作成する固定ページの構成は、基本的にindex.phpと変わりません。「記事」の部分に固定ページの内容を表示させます。 固定ページを作成するテンプレートは、以下の6つあります。 1 カスタムテンプレート 2 page-スラッグ名.php 3 page-ID番号.php 4 page.php 5 singular.php 6 index.php 固定ページには作成したそれぞれのページに対して、利用するテンプレートを選択する機能があります。今回は「自己紹介」「アクセス」「お問い合わせ」の3つの個別ページを作成し、「お問い合わせ」ページだけカスタムテンプレートを用意して、それ以外はpage.phpを利用するようにします。
テーマを一から作成する 第6回目 前回は個別記事ページを作成しました。今回は、カテゴリーページを作成します。 第5回目 個別記事ページを作成する[single.php] カテゴリーページを表示することができるテンプレートは以下の5つありますが、今回はcategory.phpを利用します。 関連ページ カテゴリーアーカイブのテンプレート階層[category-スラッグ.php] 1 category-スラッグ名.php 2 category-ID番号.php 3 category.php 4 archive.php 5 index.php 今回作成するカテゴリーページの構成は、基本的にindex.phpと変わりません。「記事」の部分に特定のカテゴリー記事一覧を表示させます。 まずはcategory.phpテンプレートを作成し、テーマディレクトリ（/wp-content/themes/samp
メール認証を利用した新規会員登録を、3回の記事に渡って説明していきます。今回はその1回目で、全体像を把握していきます。 まずはデモ画面からご覧下さい。 デモ画面（※デモでは実際にメール等は送られません。） 新規登録機能の概要は以下となります。 1.メールアドレスを登録する。 2.登録したメールに登録ページであるURLが届く。 3.URLをクリックすると、登録画面が開くので登録をおこなう。 コードに関しては、大きく分けて２つの機能で構成されています。 1.メールアドレスの登録（仮登録） メール登録フォーム（registration_mail_form.php） メール確認・送信（registration_mail_check.php） 2.新規会員の登録（本登録） 会員登録フォーム（registration_form.php） 登録確認（registration_check.php） 登録完
pandasを利用して、ご多分に漏れずイギリスの統計学者フィッシャーが利用したとされるあやめ（iris）データの基本的な統計データを出力してみます。 以下のリンクのCSVデータ（iris.csv）を利用しました。 https://raw.github.com/pydata/pandas/master/pandas/tests/data/iris.csv あやめの種類はsetosa（セトナ）、versicolor（バーシクル）、virginica（バージニカ）の3種類。sepalはがく片、petalは花びらでそれぞれの長さと幅が記載されています。 開発環境 Mac（OS X EL Captin/10.11.3） Python 3.5.1 :: Anaconda 2.5.0 (x86_64) jupyter 4.0.6 pandas 0.18.0 numpy 1.10.4 まずはiris.cs
WordPressでは、wp_enqueue_script関数を利用してJavaScriptファイルを読み込む必要があります。そのままURLを記述して読み込んでしまうと、プラグインを利用する際に他のスクリプトとコンフリクトを起こしてしまう恐れがあるからです。 wp_enqueue_script関数を利用する前に、wp_head関数とwp_footer関数が指定の位置に記述されていることを確認して下さい（下記ページ参照）。 header/saidebar/footerに分割する[wp_head][wp_enqueue_style] wp_enqueue_script関数は下記のようにfunctions.phpに記述することによって、JavaScriptファイルをhead内（wp_head関数）やHTMLの最後（wp_footer関数）に読み込むことができます（functions.phpに記述
以下はドキュメントの存在を証明することができる「Proof of Existence 」サービスの仕組みについて調べてみた記録。 「Proof of Existence 」はドキュメントがある日時に存在していたということを証明するために作られたサービスだ。ビットコインのブロックチェーンを利用した仕組みなのでBitcoin2.0の部類に入る。 使い方 使い方はいたって簡単。トップ画面を開いたら、自分の持っているドキュメントを点線枠内にドラッグ&ドロップする。すると下に「Please send 5 mBTC or more」と表示されるので、ビットコイン0.005BTC以上を指定されたビットコインアドレスに送信する。 ビットコインを送信すると「Payment being processed〜」と表示された画面に遷移するので少し待つ。しばらくすると「Document proof embedded
Facebook SDK for PHP v5.0（記事作成時）を利用して、Facebookでログインができる認証機能を作成します。 Facebook SDK for PHPは公式に用意されたライブラリで、Graph API（FacebookのソーシャルグラフAPI）を利用することによってユーザの様々な情報を取得し、また投稿などの機能を自分のウェブページに実装することができます。 Facebook SDK for PHPはComposerで管理することができますが、今回はManually installingから直接ファイルをダウンロードして利用します（記事作成時：facebook-php-sdk-v4-5.0.0ファイル）。 ※下記デモ画面はHTTPS化に伴い現在利用できません。 デモ画面 ※デモは名前、性別などを表示させているだけで、投稿したり、ユーザ情報をデータベースには保存したりす
scikit-learnライブラリを利用してロジスティック回帰を行なってみます。利用するデータはkaggleのTitanicデータです。 Titanicのデータは下記のページから取得できます（アカウント登録が必要です）。今回はtrain.csvとtest.csvを利用します。 Titanic: Machine Learning from Disaster 関連ページ データフレームの基本操作[pandas][DataFrame][Titanic] 開発環境 Python 3.5.1 :: Anaconda 2.5.0 (x86_64) jupiter 4.0.6 scikit-learn 0.17 pandas 0.18.0 numpy 1.10.4 訓練用（train.csv）とテスト用（test.csv）のデータを読み込みます。 import pandas as pd imp
ハッシュ関数はログイン機能を実装する場合などに利用します。ユーザから入力されたパスワードをそのまま生データとしてデータベースに登録してしまうと、万が一データが漏洩した場合に、そのパスワードが悪用されてしまう恐れがあります。そこで、ハッシュ関数の非可逆処理の性質を利用します。 関連ページ（姉妹ブログ） 『Webセキュリティ教室』/セキュリティの境界を巡って 入力したデータ（「メッセージ」と呼びます）をハッシュ関数に通して生成された値をハッシュ値と呼びます。そのハッシュ値から元のデータを復元することが難しいことから（※下記のpassword_hash()の項目参照）、ユーザからの入力値をこのハッシュ値に変換してデータベースに登録していきます。 また、あるドキュメントファイルのハッシュ値を比べることによって、そのファイルが本物であるかどうかを判定することもできます。ファイルが改ざんされたりなどし
WordPressの各ページ（サイトフロントページやアーカイブページ等）には、それぞれいくつかのテンプレートが存在し、そのテンプレートが利用される優先順位というものがあります。 カスタム投稿タイプのテンプレートには個別記事とアーカイブがあり、それぞれの優先順位は以下のようになります。 個別記事 1 single-投稿タイプ名.php 2 single.php 3 singular.php 4 index.php アーカイブ 1 archive-投稿タイプ名.php 2 archive.php 3 index.php 例えば以下のページの説明では、 カスタム投稿タイプを作成する[register_post_type] 「book」という投稿タイプのカスタム投稿タイプを作成し、個別記事をsingle-book.php、アーカイブページにはarchive-book.phpというテンプレートを利用
次のページ
このページを最初にブックマークしてみませんか？
『noumenon-th.net』の新着エントリーを見る
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
