サクサク読めて、アプリ限定の機能も多数!
トップへ戻る
アメリカ大統領選
www.yoheim.net
こんにちは、@yoheiMuneです。 マークアップする際に「上下左右中央に表示したい」という要件はよく出てきます。今日はその実装方法をブログに書きたいと思います。5つあるので、色々な状況に応じたものを選んで使えると思います。 目次 なぜこの記事を書くのか プログラミングスクールの講師をしていて、上下左右中央に表示する方法をアドバイスさせて頂く機会もあり、ブログにまとめておきたいと思ったのが執筆のきっかけです。複数の実現方法を提示することで様々な条件に応じることができますし、また各種ブラウザ(IE、Edge、Chrome、Safari、Firefox)の対応状況も確認済みなので、品質の良いコーディングができると思います。 これからWebページ制作をされる方に、少しでも役立てたらいいなと思います。 方法1:absolute + top,left=50% + ネガティブマージン positio
こんにちは、@yoheiMuneです。 Reduxという考え方は、React、Vue、Swift、Kotlin、とクライアントアプリ界隈で非常に流行っています。今日はその考え方をシンプルに学びたいと思い、ライブラリを使わずにReduxとは何かを説明したいと思います。 目次 この記事の目的 この記事では、Reduxを初めて学ぶ人や、一度は触れたけど挫折した人向けに、Reduxとはどのようなものかを解説しています。僕自身、いろいろな案件でReduxを使っていますが、少しもやっとしたところもあり、整理したいなと思い執筆しました。 Reduxはデータを扱うための考え方の1つです。Reduxという考え方を実現したライブラリが存在します(reduxやreact-reduxなど)。ただ、考え方を学ぶ上でライブラリを使うとわかりづらい点があります。ライブラリの中でいい感じに処理してくれる(=処理が隠蔽され
PHPの関数はarray()を用いて複数の値を返却できます。またそれらの値をlist()を用いて、複数の変数へ一気に代入できます。今日はその実装方法をブログに書きたいと思います。 目次 関数で、複数の値を返す PHPの関数で複数の値を返したい場合、array()を用いて複数の値を返却できます。 function getPerson() { $name = 'Yohei'; $age = 33; return array($name, $age); } $person = getPerson(); echo $person; // [ 'Yohei', 33 ] 配列に複数の値を入れて返す、というのはシンプルで分かりやすいですね。 list()を用いて、複数の変数に一括代入する PHPでは、list()を用いて、複数の値を複数の変数に一度に代入できます。 list($name, $age)
数字、アルファベット、カタカナの全角半角変換は、JavaScriptで簡単に実現できます。今日はその実装方法をブログに書きたいと思います。 目次 全角 → 半角(英数字) function hankaku2Zenkaku(str) { return str.replace(/[A-Za-z0-9]/g, function(s) { return String.fromCharCode(s.charCodeAt(0) - 0xFEE0); }); } // 使用例 hankaku2Zenkaku('123abC'); // '123abC' 文字コード上で、全角英数字から65248引くと半角英数字になります。 また、処理範囲を正規表現で[A-Za-z0-9]と指定していますが、例えば[0-9]とすれば、変換対象を全角数字に限定できます。 半角 → 全角(英数字) function zenka
2019/09/13更新cronの日時指定を、基礎から学ぶ(分,時,日,月,曜日の指定、◯分ごと、月末起動、など) cronの基本 cronは「* * * * *」の5箇所を指定して、起動時間を設定します。左から「分」「時」「日」「月」「曜日」を指定します。 # cronの起動時間設定 * * * * * (起動したい処理) | | | | | | | | | |- 曜日 | | | |--- 月 | | |----- 日 | |------- 時 |--------- 分 上記5箇所に値を設定することで、様々なタイミングで処理を起動できます。 起動時間の書き方(基本編) ここではまず、基本的な時間指定の方法を見ていきたいと思います。 1分毎に起動する すべての箇所に*を指定した場合、1分毎に処理が起動されます。 # 1分毎に起動する * * * * * echo 'hello' 毎時◯分
[CSS] スクロールバーを非表示にする(IE, Edge, Chrome, Safari, Firefoxに対応) まとめ IE、Edge、Chrome、Safari、Firefox でスクロールバーを非表示にする実装方法はこちらです。 コード <div class="container">1<br>2<br>3<br>4<br>5<br>6<br>7<br>8<br>9<br>10<br></div> <style> .container { height: 150px; overflow-y: scroll; -ms-overflow-style: none; /* IE, Edge 対応 */ scrollbar-width: none; /* Firefox 対応 */ } .container::-webkit-scrollbar { /* Chrome, Safari 対応
こんにちは、@yoheiMuneです。 数値を3桁カンマ区切りにしたいという要件を、JavaScriptでどのように実現するのかについて、ブログに書きたいと思います。 目次 解決したいこと 「数字は3桁カンマ区切りで表示したいんだよね〜」と言われた時に、サクッと対応できる方法をお伝えしたいと思います。 方法1:toLocaleString()を利用 実装方法 もっとも簡単に対応するなら、toLocaleString()関数を使うと便利です。数値型の変数に利用できます。 var num = 12345; num.toLocaleString(); // "12,345" toLocaleString()はロケール(=言語、国、地域、などを表現する、例:ja)に合わせた数値表現を行うためのメソッドです。ロケールによって表示が異なりますが、日本語や英語の場合には3桁カンマ区切りとなります。 ブラ
こんにちは、@yoheiMuneです。 JavaScriptで日付を扱う際に、数行コードを書けば、任意の日付を取得できます。今日はその実装方法をブログに書きたいと思います。 目次 解決したいこと JavaScriptを用いて、今日、明日、昨日、月末、月初、などの任意日付を取得したいけど実装方法が分からない、という悩みを解決したいと思います。LP制作やアプリ制作で日付を扱いたいこともしばしば。そんな時に役立てたらと思います。 本日を取得する JavaScriptで日付を扱う場合、Dateクラスを利用します。Dateクラスのインスタンスを作成すると、現在日時を取得できます。そこから、本日を取得します。 // Dateクラスのインスタンスを作成. var now = new Date(); // 本日を取得する. var todayString = now.getFullYear() + '年'
こんにちは、@yoheiMuneです。 久しぶりのブログ、書きたいことがいっぱいです。プログラムでエラーが発生した時に重宝されるスタックトレース。Python言語におけるエラーハンドリングの方法と、そこでのスタックトレースの取得方法を、今日はブログに書きたいと思います。 目次 スタックトレースとは スタックトレースは、プログラムで例外が発生した際に、どのように関数が呼び出されたのか、どこでエラーが発生したのか、を特定できる情報です。不具合発生時の原因究明に、重宝されます。例えば以下のプログラムがあるとします。 def a(): """b関数を呼び出す""" b() def b(): """c関数を呼び出す""" c() def c(): """例外が発生する""" char = None char.format('hello') # ここで例外発生 # a関数から呼び出してみる a() こ
こんにちは、@yoheiMuneです。 Vimeo動画のサムネイル画像を取得するツールを作ったので、ブログにも残しておきたいと思います。 目次 サムネイルを取得できる仕組み VimeoにはAPIが用意されていて、それを使うことで動画のサムネイルを取得できます。公式ドキュメントはこちらです。 例えばVimeoの動画URLが「https://vimeo.com/159222993」の場合、159222993をビデオIDとして、以下のようなAPIのURLを実行します。 // https://vimeo.com/api/oembed.json?url=https%3A//vimeo.com/[ビデオID] https://vimeo.com/api/oembed.json?url=https%3A//vimeo.com/159222993 そうすると、以下のJSONレスポンスが返却されます。 {
[さくらレンタルサーバー] Wordpressの有料テーマアップロードで「辿ったリンクは期限が切れています。」というエラーになった件への対応 こんにちは、@yoheiMuneです。 さくらレンタルサーバーでのWordpress構築で、有料テーマのZipファイルをアップロードしたら、「辿ったリンクは期限が切れています。」というエラーに遭遇して、アップできませんでした。それに対する修正策をブログに書きたいと思います。 目次 何が問題だったのか 問題は、アップロードできるファイルサイズの上限が小さかったからでした。 アップロードできる上限サイズは、ワードプレス管理画面の「メディア -> 新規追加」より確認することができます。 ここでは上限サイズが2MBなところ、有料テーマのZipファイルは50MBほどあり、アップロードできずにエラーになっていました。 アップロードの上限サイズを変更する アップロ
こんにちは、@yoheiMuneです。 Laravelのバリデーションはそれだけで非常に強力ですが、ドキュメントには記載のない、拡張ポイントがあります。今日はUniqueバリデーションについて、拡張できるポイントをブログに書きたいと思います。 目次 何がしたいのか Laravelのバリデーションの一つUniqueチェックを用いると、データベースのテーブルの指定したカラムで、値がユニークであるか(一意であるか)をチェックできます。例えば以下のように実装します。 $request->validate([ // usersテーブルのemailカラムで一意チェック. 'email' => 'unique:users' ]); また、テーブルのどのカラムを用いて検査するのか、明示的に指定することもできます。 $request->validate([ // usersテーブルの「mail_addres
こんにちは、@yoheiMuneです。 Laravelのメールに関するドキュメントでは、Mailableを実装したクラスを作る手順が紹介されていますが、わざわざ作るのは面倒です。それを作らず簡単にメール送信できる方法があるので、今日はその実装をブログに書きたいと思います。 前提条件 Laravelでのメール送信は、SFTP、Mailgun、SES、など様々な送信方法が用意されています。こちらのドキュメントを参考に行ってください。 それらのセットアップが完了したのちのメール送信部分のPHP実装について、このブログでは記述しています。 Mailファサードを使ったメール送信 Mailableを実装したクラスを作らずとも、Laravelが提供するMailファサードで、メール送信処理を行うことができます。 以下では、Controllerにてメールを送信する実装方法を紹介します。 <?php name
こんにちは、@yoheiMuneです。 サーバーとのAPI連携を実装していると、APIでのやりとりではスネークケース(例:user_name)を使い、JavaScript内の変数ではキャメルケース(例:userName)を使うことが多くあります。その際の変換を行う処理を、ブログに書いておきたいと思います。 目次 スネークケース → キャメルケース(文字列) スネークケースからキャメルケースに変換する場合、以下の関数を使うと実現できます。 // スネークケースからキャメルケースに変換(文字列). function toCamelCase(str) { return str.split('_').map(function(word,index){ if (index === 0) { return word.toLowerCase(); } return word.charAt(0).toUp
こんにちは、@yoheiMuneです。 正規表現で文字列を扱う際に、改行が含まれる場合は少し考慮が必要です。今日はその対応方法をブログに書きたいと思います。 Pythonの正規表現について Pythonの正規表現の使い方は、「[Python] 正規表現まとめ」をご参照ください。 何がしたいのか 例えば、以下のようなHTMLがあり、そこからaタグを抜き出したいとします。 <div> <a href="https://www.yoheim.net"> ブログへのリンク </a> </div> 見ての通り、HTML全体、そしてaタグにも改行が含まれており、改行を考慮して正規表現にマッチさせる必要があります。 下記のように正規表現を書くと、改行を含む箇所が正しくヒットしません。 import re # html html = """ <div> <a href="https://www.yohei
こんにちは、@yoheiMuneです。 Pythonの日付でタイムゾーンを扱う機会があったので、今日はそれをブログに書きたいと思います。 目次 pytzの導入 Pythonの日付処理でタイムゾーンを扱う場合、pytzというライブラリを使うと便利です。インストールします。 $ pip install pytz タイムゾーンを指定しない場合の問題点 タイムゾーンを考慮せず日時を生成すると、実行環境(=パソコンやサーバー)のタイムゾーン設定に合わせて、日付が表示されます。 from datetime import datetime # パソコンのタイムゾーン設定が Asia/Tokyo の場合の例 print(datetime.now()) # 出力例:2018-12-06 00:59:48.677942 この場合には、パソコンのタイムゾーンが日本なので日本時間を表示をしていますが、出力された時
こんにちは、@yoheiMuneです。 今日はLaravelネタで、Eloquentで独自属性(独自のプロパティ)を定義して、それをJSONに含めて返す方法をブログに書きたいと思います。 目次 何がしたいのか Eloquentで作成したモデルは、対応したデータベースのテーブルを表現しています。例えば、ユーザーの投稿を表現するpostsテーブルがあるとします。その中で投稿ファイルの名前を保持するフィールド(file_name)がある場合に、クライアントへのレスポンスはファイル名ではなくてファイルにアクセス可能なURLで返したいという場面が多いです。 // 取得できるものはfile_name file_name : '1.jpg' // しかし、クライアントへ返却したいのは、それにアクセスするためのURL file_url : 'https://xxx.s3.ap-northeast-1.am
こんにちは、@yoheiMuneです。 Laravelで実装していて、親テーブル取得時に関連する子テーブルの一覧も合わせて取得したいことがあると思います。そんな時に便利なwith関数について、今日はブログを書こうと思います。 目次 何がしたいのか 例えば、投稿を表現するpostsテーブルと、その投稿内容(=1〜N枚の画像)を表現するpost_contentsテーブルがあるとします。特定のPostを取得した際に、それにひもづくPostContentsを一覧で取得したい場合に、どうしたら良いかを記載しています。 手順1:モデル定義で関連(hasMany)を表現する まずは、PostsとPostContentsのモデルを定義し、hasManyを用いて関連も合わせて定義します。 <?php namespace App; use Illuminate\Database\Eloquent\Model;
こんにちは、@yoheiMuneです。 Laravelの論理削除(SoftDelete)で、削除を表現するカラムをdeleted_at以外にする方法を、ブログに書きたいと思います。 なぜ必要か Laravelで論理削除(SoftDelete)を行うことができますが、デフォルトではカラム名はdeleted_atと決まっています。しかし例えば、Cake3で構築したデータベースを使い、サーバーはLaravelに作り変える場合などには、論理削除のカラム名が違う(deletedなど)ことがあります。 そのような場合に、どうやってdeleted_at以外のカラム名を指定するのかについて調べて実装したので、ブログにも残したい次第です。 論理削除で使うカラム名に任意の名前をつける 論理削除用のカラムを指定するためには、DELETED_ATという変数名を利用します。 例えばUserモデルであれば、以下のよう
こんにちは、@yoheiMuneです。 Python3のurllib.requestで、Basic認証付きのリクエストを発行する機会があって実装したので、それをブログに残しておきたいと思います。 注意 PythonのHTTP通信の実装方法は、2系と3系で大きく異なりますのでご注意ください。この記事ではPython3系について記述しています。 urllib.requestを用いて、Basic認証付きのHTTPリクエストを発行する さっそく本題ですが、以下のように実装します。 # HTTP通信を行うための標準ライブラリ import urllib.request # Base64を扱うための標準ライブラリ import base64 # 送信先のURL url = 'https://foo.bar.baz.yoheim.net/item/1' # Basic認証の情報 user = 'user
こんにちは、@yoheiMuneです。 「fetchを用いたAjax通信を行う」で紹介したfetchAPIについて、バイナリデータを扱う実装をブログに書きたいと思います。 目次 どのような場面で使うのか フロントエンドをReact / Vue / Angular などSPA(Single Page Application)で構成している場合に、サーバーAPIがバイナリーデータを返却する時に使います。例えば、サーバーAPIがPDFを返却したり、QRコード(=画像)を生成して返却する場合には、Ajax通信でバイナリーデータを扱う必要があります。 fetch APIでバイナリーデータを扱う 具体的には以下のように実装します。 (async () => { async function getImage() { // 送信先のURL. const url = '/image/001.jpg' //
こんにちは、@yoheiMuneです。 最近、JavaScriptで検索を行い該当箇所をハイライトする実装を行う機会がありました。そのハイライト処理について、ブログにも書いておきたいなと思います。 目次 JavaScriptで検索ハイライトを実装する 正規表現を利用して実装し、ハイライト箇所を<span class="search-highlight"></span>で囲うような実装にしています。 /** * 検索結果で該当箇所を黄色でハイライトする. * @params query - 検索キーワード * @params body - 検索対象の文章 */ function highlightSearchResult(query, body) { const regexp = new RegExp(`(${query})`, 'gi') // ①、② body = body.replac
こんにちは、@yoheiMuneです。 今日はCSSを用いて、文章の末尾を省略する方法を、ブログに書きたいと思います。 目次 文章が1行の場合の文末省略 1行の文章の文末を省略するには、CSSのtext-overflow: ellipsis;を使います。 実際にはwidth、overflow、white-spaceのプロパティも合わせて指定します。 <p class="oneline-ellipsis">おはよう、こんにちは、さようなら、おやすみなさい。</p> <style> .oneline-ellipsis { /* 1. 横幅を指定する */ width : 200px; /* 2. はみ出した場合に、hiddenにする */ overflow: hidden; /* 3. 自動的な折り返しはしない */ white-space: nowrap; /* 4. 省略表現を指定する *
こんにちは、@yoheiMuneです。 LaravelのEloquentを用いた場合の、全件削除の実装方法をブログに書きたいと思います。 目次 対象バージョン Laravel5.6以上を対象としています。他のバージョンでは違う場合がありますので、適宜読替えをお願いします。 Eloquentで全件削除する(方法1) Eloquentで全件削除するには、以下のように実装します。 // 全件削除する User::query()->delete(); ポイントはquery()関数を呼ぶことでクエリにして、その後はクエリビルダーとしてdelete()を呼び出します。 Eloquentで全件削除する(方法2) トランケートを用いることも可能です。トランケートの場合、DBの自動採番もリセットできます。しかし、ロールバックができないので注意が必要です。 User::truncate(); クエリビルダを用
こんにちは、@yoheiMuneです。 マイグレーション機能があるとデータベースの管理が簡単にできて便利です。Laravelのマイグレーション機能を用いて、DBテーブルの新規作成する方法をブログに書きたいと思います。 目次 対象バージョン Laravelの5.6を対象としていますが、5系なら同じと思います。違う部分は適宜読み替えを御願いします。 マイグレーション機能とは テーブル作成やカラム追加などのデータベースへの変更を管理する機能です。Laravelの場合には、変更内容を記載したマイグレーションファイルを作成し(変更ごとに1つずつ作成する)、それをArtisanコマンドで実行します。 マイグレーション機能が便利な点として、Create文などのSQLそのものを書く必要がないこと、複数のデータベースに同じ記述で対応できること、ロールバックもコマンド1つでできること、PHPUnitテストなど
こんにちは、@yoheiMuneです。 アクセストークンの文字列作成など、ランダムな文字列を作成したいことが時々あります。Laravelでは便利な関数が準備されていて、それを使うと簡単に作成できます。今日はそれについてブログを書きたいと思います。 str_random関数を用いてランダム文字列を作成する Laravelには便利なヘルパー関数が多数(公式サイトへ)用意されていて、その中にstr_randomというランダム文字列を生成するメソッドが存在します。それを使うと簡単にランダムな文字列を作ることができます。 ヘルパー関数はグローバル定義で、どこからでも利用可能です。 # 32文字のランダムな文字列を作成. $access_token = str_random(32); 引数に作成したい文字数を指定して関数を実行することで、ランダムな文字列を作成できます。 最後に 最近は複数の案件でLa
こんにちは、@yoheiMuneです。 Mac環境で、Laravel5.6をセットアップする機会があったので、ブログにも書きたいと思います。 目次 公式ドキュメント インストールに関する公式ドキュメントはこちらです。適宜ご参照ください。 https://laravel.com/docs MacにPHP7.2をインストール PHP7.2は、Homebrewで簡単にインストールできます。 $ brew install php72 インストール後に、以下のコマンドでバージョン確認できればOKです。 $ php -v PHP 7.2.5 Composerのインストール もしまだ導入していない場合には、以下のサイトを参考にインストールします。 https://getcomposer.org/doc/00-intro.md laravelコマンドのインストール composerでも作成可能ですが、la
こんにちは、@yoheiMuneです。 PHPのWebフレームワークの1つであるLaravelでは、簡単にRESTfulAPIを作ることができます。今日はその作り方をブログに書きたいと思います。 目次 対象バージョン 今回はLaravelのv5.6以上を対象としています。以前のバージョンでもだいたい同じですが、一部コマンドが違うところもあるので、適宜読替えをお願いします。 RESTfulAPIとは データベースに格納している1つ1つのモデルに対して、CRUD(Create / Read / Update / Delete)を提供する設計思想です。例えばユーザーテーブル(User)があったとして、それに対して以下のようなAPIを作成します。 # 一覧取得 GET /api/users # IDを指定して1つ取得 GET /api/users/{id} # 新規作成 POST /api/use
こんにちは、@yoheiMuneです。 今日はReact Routerを用いたルーティングにおいて、ページ遷移時にログインチェックを行う方法をブログに書きたいと思います。 目次 対象のバージョン React Routerはv4以上が対象です。 何がしたいのか React.jsでアプリケーションを作成した場合に、ルーティングはReact Routerで行うことがほとんどではないでしょうか。管理画面やマイページなどのログインが必要なページを開発している場合、画面遷移時にログインチェックを行いたいという要件は良くあります。そして、ログイン済みの場合にのみそのページを表示、未ログインならログインページにリダイレクトしたい、といった振る舞いを実装する場面があります。 それをReact Routerでどのように実現するのか、についてブログを書きたいと思います。 また、他のブログでは同期的なログインチェ
次のページ
このページを最初にブックマークしてみませんか?
『YoheiM .NET - 世の中のWeb情報に、体験と意見を添えて発信します』の新着エントリーを見る
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く