こんにちは、@yoheiMuneです。 <form>の遷移先はaction要素で指定しますが、実はボタンでも指定できます。今日はその方法をブログに書きたいと思います。 目次 まとめ <button>や<input type="submit">にformaction属性を指定することで、ボタンごとに別々の遷移先を指定できます。 <form action="/save"> <!-- formタグのaction（/save）を呼び出します. --> <button>保存する</button> <!-- formactionで指定した遷移先（/temporary-save）を呼び出します. --> <button formaction="/temporary-save">一時保存する</button> <!-- formactionで指定した遷移先（/update）を呼び出します. --> <in
こんにちは、@yoheiMuneです。 マークアップする際に「上下左右中央に表示したい」という要件はよく出てきます。今日はその実装方法をブログに書きたいと思います。５つあるので、色々な状況に応じたものを選んで使えると思います。 目次 なぜこの記事を書くのか プログラミングスクールの講師をしていて、上下左右中央に表示する方法をアドバイスさせて頂く機会もあり、ブログにまとめておきたいと思ったのが執筆のきっかけです。複数の実現方法を提示することで様々な条件に応じることができますし、また各種ブラウザ（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など）。ただ、考え方を学ぶ上でライブラリを使うとわかりづらい点があります。ライブラリの中でいい感じに処理してくれる（=処理が隠蔽され
2019/11/16更新DBからの検索結果をPHPで並び替える（array_multisortの利用、昇順、降順、複数のソートキー、ユーザー定義ソート） こんにちは、@yoheiMuneです。 先日は「PHPの連想配列のソートいろいろ」を書きました。 今日は、データベースからの取得した結果（配列の中に複数の連想配列が含まれているもの、いわゆる多次元配列）を、array_multisort関数を用いて、並び替える方法をブログに書きたいと思います。 目次 今回説明に使うデータ 以下のような、配列の中に連想配列が入ったもの（=多次元配列）を使いたいと思います。 $fruits = [ array('id' =>'01', 'name' => 'apple'), array('id' =>'02', 'name' => 'orange'), array('id' =>'03', 'name' =>
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(/[Ａ-Ｚａ-ｚ０-９]/g, function(s) { return String.fromCharCode(s.charCodeAt(0) - 0xFEE0); }); } // 使用例 hankaku2Zenkaku('１２３ａｂＣ'); // '123abC' 文字コード上で、全角英数字から65248引くと半角英数字になります。 また、処理範囲を正規表現で[Ａ-Ｚａ-ｚ０-９]と指定していますが、例えば[０-９]とすれば、変換対象を全角数字に限定できます。 半角 → 全角（英数字） function zenka
こんにちは、@yoheiMuneです。 今日は、Macに ElasticSearch と Kibana をお手軽に導入する方法を書きたいと思います。ElasticSearch を使う場合に、ローカル環境で色々と実験できると何かと便利かなと思います。 目次 前提事項 本件では、Homebrewというパッケージ管理ソフトを利用します。インストールしていない方は、下記よりインストールしてご利用ください。 https://brew.sh（Homebrew本家 | 日本語） ElasticSearchをインストールする Homebrewがあれば簡単。ターミナルを起動し、以下のコマンドを実行すると、簡単にインストールできます。 $ brew update $ brew install elasticsearch どんなバージョンがインストールされるのかなどはログにも表示されますが、infoコマンドでも
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です。 今日は、PHPの配列をJSON文字列にする時に使うjson_encode()関数について、日本語などのマルチバイト文字をエスケープさせない方法を、ブログに書きます。 目次 何が問題か json_encode()を普通に実行すると、日本語がユニコードでエスケープ（\uXXXX）されます。 $data = [ "message" => "こんにちは" ]; json_encode($data); // 出力：{"message":"\u3053\u3093\u306b\u3061\u306f"} \u3053\u3093\u306b\u3061\u306fの部分がUnicodeエスケープですが、これをさせたくない場合にどうしたら良いか、を解決したいと思います。 なお、PHPを気軽に実行したい場合、オンラインエディタ（Online PHP Editor）が
こんにちは、@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です。 今日はiframe表示で、iframeの背景を透過させる方法について、ブログを書きたいと思います。 iframeの背景は透過する 2019年時点の最近のブラウザであれば、特に何もしなくてもiframeの背景は透過しますが、「あれ、透過しないな〜」と思った時に確認すべき2つのポイントをお伝えします。 iframeの背景を透過させるには 具体的には、以下の2つの設定を確認します。 読み込むHTMLファイルの、htmlタグの背景を透過させる。 読み込むHTMLファイルの、bodyタグの背景を透過させる。 以前は「iframeタグにallowtransparency="true"属性を指定する」という対応もあったようですが、ChromeやIE11など主要ブラウザは、その指定がなくても背景が透過するようです。 動作サンプル 以下は、iframeの背景を透過させ
こんにちは、@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レスポンスが返却されます。 {
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く