多言語サイトで自動的に言語を判別する4つの方法 | 株式会社ティ・ティ・アイ
ホーム技術ブログ多言語サイトで自動的に言語を判別する4つの方法 技術ブログ 2020年10月12日 [JacaScript][PHP][サーバー] 多言語サイトで自動的に言語を判別する4つの方法 弊社は最大60ヶ国の多言語対応を展開しているため、Webでも国ごとの表示切り替えを要求される場合があります。 国ごとのWebサイトの切り分けといってもいくつか方法があるので、備忘録を兼ねて一つずつ確認していきたいと思います。 各国語言語サイトへ振り分ける４つの方法 以下の方法が考えられます。 .htaccessで振り分ける PHPで振り分ける JavaScriptで振り分ける linkタグで振り分ける それでは一つずつ見ていきましょう。 .htaccessで振り分ける .htaccessファイルはWebサーバーの基本的な動作をディレクトリ単位で制御することができる設定ファイルです。 多くのウェブサ
htaccessにて国単位でIP制限をかける方法。CHINA（中国）を制限
2019.11.24修正 千年以上続く「中国」という歴史ある日本の地名と区別する為、中華人民共和国を世界標準の呼称「CHINA」に変更しました。 CHINA（中国）を制限した理由クライアントが指定しているサーバーがクラッキングされて ページを表示するとアフィリエイト系サイトに飛ばされるタグを仕込まれるという事がありました。 勝手に書き換えられた部分を直して対処していたのですが しつこいのでIP制限をかけました。その時の手順を残しておきます。 アクセス解析などから恐らくCHINA（中国）からのアクセスだろうと言うことになり CHINA（中国）からアクセスできなくなる旨をクライアントに了承頂き実施しました。 日本語サイトなのでCHINA（中国）からアクセス出来なくなっても問題ないとの判断です。 試しけど上手くいかなかったやり方調べた所、htaccessにCHINA（中国）を表すカントリーコード
[PHP] 簡易的に国を判定する方法
判定ロジック/** * 簡易的な日本判定 * @return boolean */ public static function is_japan() { $result = false; $languages = explode(',', $_SERVER['HTTP_ACCEPT_LANGUAGE']); foreach ($languages as $language) { if (preg_match('/^ja/i', $language)) { $result = true; break; } } return $result; } HTTP_ACCEPT_LANGUAGEを,区切りで配列にする（explode）。 先頭が日本(ja)にマッチしたら true 判定してループをbreak(その後、return)。
![[PHP] 簡易的に国を判定する方法](https://cdn-ak-scissors.b.st-hatena.com/image/square/4508a53bf897837c4ddf33fd3e19d1aff1bc6b06/height=288;version=1;width=512/https%3A%2F%2Fb.0218.jp%2Fimages%2Fogp%2F20151127223056.png%3Fts%3D412b9bd577ae8a4c2530af0884341da9034622e2)
ブラウザ側で画像をリサイズしてFirebase Storageにアップロードする（Vue.js） - Qiita
import imageCompression from 'browser-image-compression' export default { async getCompressImageFile(file) { const options = { maxSizeMB: 0.8, //最大ファイルサイズ maxWidthOrHeight: 600, //最大縦横値 } return await imageCompression(file, options) }, } リサイズしたい目的によって、単にファイルサイズを小さくしたいこともあれば、画像のサイズを一定以下にしないといけないこともあると思います。 今回私が利用したケースにおいては画像サイズが重要だったため、maxWidthOrHeightを指定しています。maxSizeMBは念の為に指定していましたが、なくても良かったかもです。
multipart/form-dataのリクエストで地味にハマったメモ - Qiita
先日、JavaのHttpURLConnectionを用いて通信処理の実装をしてました。 その中で、multipart/form-data形式で汎用的に送信できる部品を作っていたのですが、何故か何度通信してもmultipart/form-dataのリクエストとして認識されず、解決にかなりの時間を費やしてしまいました。 原因はとてもしょうもない内容で、こんな事でハマるやつが他にいるのか？という感じだったのですが、備忘録的な意味合いも兼ねて書いておきたいと思います。 ちなみに最初に書いてしまうと、原因はこいつでした。 multipart/form-dataのリクエストボディ 一般的なのはこんな感じです。 以下のような形式で組み立てた内容をBodyに乗せて通信します。 --[Boundary文字列] Content-Disposition: form-data; name="[フォーム名]" <<
FormDataでファイルもオブジェクトも一緒に送る方法 - Qiita
ハマった箇所 axiosでファイルも、オブジェクトも送りたいが、オブジェクトが[object Object]になってしまう。 なぜ送れなかったのか？ [FormData.append]（https://developer.mozilla.org/ja/docs/Web/API/FormData/append） The field's value. This can be a USVString or Blob (including subclasses such as File). If none of these are specified the value is converted to a string. FormDataに追加するときにValueはUSVStringかBlobにしてね、それ以外だと全部テキストにするよとのこと。 その為直接入れるのはNG storeFiles(re
File APIs(Blob, BlobURL, ArrayBuffer, FileReader) - Qiita
まえがき 以前の JavaScript はバイナリデータの扱いがとても下手でした。 バイナリデータをブラウザ上に一旦保存し再利用するには、サイズが1.3倍になることを覚悟した上でデータをDataURIに変換する必要がありましたし、XHRを使ってサーバからデータを取得する場合も、一度全てメモリに読み込んでから、ループでマスク処理を施し、Base64に変換し、DataURIに変換し… と、何重にも変換を繰り返す必要がありました。 2009年に出版された JavaScript Good Parts では、ビット演算子が「使うべきではない悪いパーツ」と評価されていた事を思い出す方もいるでしょう。 あれから5年、もはや時代が違います。 2015年の JavaScript においては、バイナリデータはもはや扱いづらい困った存在ではありません。 ハードウェアと JIT コンパイラの進化に合わせ、大容量の
JavaScriptでBlob(File)からData URIを作成する方法
2017/07/29 JavaScriptで、Blob(File)をbase64エンコードしたData URIに変換するには、fileReaderのreadAsDataURL()を利用します。 サンプルコード変数、blobにBlobが代入されているものとした時、次のようにData URIに変換します。 var fileReader = new FileReader() ; fileReader.onload = function() { var dataURI = this.result ; } fileReader.readAsDataURL( blob ) ;デモこのデモのinput要素には、ファイルを1つだけ指定できるようにしてあります。指定したファイルをData URIに変換し、textarea要素に表示します。ファイルサイズが大きいと処理に時間がかかるのでご注意下さい。 // <
【React】axiosを使用してmultipart/form-data形式の通信をする - モノクロタイム
こんにちは、れいじです。 年末なので趣味の開発に時間をつぎ込んでいます。Webサービスを作っているのですが、あまり複雑なシステムではないのでreduxなどは導入せずにシンプルに作っています。 APIとの通信に使用するモジュールとしてはredux-sagaとかredux-thunkとかまぁいろいろあるわけですが、上述の通りreduxは導入しないのでこれらは候補に入りません。 なので最近ナウいと噂のaxiosを使用してAPI通信を実装したいと思います。 github.com やりたいこと ReactAppでAPI通信をする。今回は画像を受け取り、APIに投げる処理を実装したい。 画像をポストする場合の通信形式はmultipart/form-dataとする。 通信メソッドはPOST。 ボタン側 ※UIデザインにmaterial-uiを使用しています。そのあたりの記述はうまく読解してもらえればと
JavaScriptのグローバル変数を解説！ローカル変数と違いとは - TECH PLAY Magazine
グローバル変数について知っておくことはJavaScriptを上達していく上で必須の知識です。特にローカル変数との違い等については理解しておく必要があり、関数の外で定義されたものがグローバル変数であり関数の中で定義されたものがローカル変数であることは最低限押さえておかなくてはなりません。 JavaScriptでプログラミングをしていると変数を定義する場面が多く出てきます。何も難しいことはありませんが、ローカル変数との兼ね合いでバグが起こることもあるため正しい知識を持って使わなければなりません。そこで、グローバル変数とは何者なのか、そしてスコープの概念についても知っておく必要があるでしょう。グローバル変数でつまずくことのないよう、ここで基本事項をきちんと理解しておくようにしましょう。 JavaScriptにおけるグローバル変数とは 「グローバル変数」はプログラムのどこからでもアクセスができる変
strict モードへの移行 - JavaScript | MDN
JavaScript チュートリアル 初級編 JavaScript の基礎 JavaScript の第一歩 JavaScript の構成要素 JavaScript オブジェクト入門 JavaScript ガイド 入門編 文法とデータ型 制御フローとエラー処理 ループとイテレーター 関数 式と演算子 数と日付 テキスト処理 正規表現 インデックス付きコレクション キー付きコレクション オブジェクトを利用する Using classes プロミスの使用 JavaScript 型付き配列 イテレーターとジェネレーター メタプログラミング JavaScript モジュール 中級編 クライアントサイド JavaScript フレームワーク クライアントサイド Web API Language overview JavaScript のデータ構造 等値比較と同一性 プロパティの列挙可能性と所有権 クロ
JavaScriptのモダンな書き方 - ES2020のオプショナルチェーン、null合体演算子、動的import、globalThis等を解説 - ICS MEDIA
JavaScriptのモダンな書き方 - ES2020のオプショナルチェーン、null合体演算子、動的import、globalThis等を解説 JavaScriptの仕様であるECMAScriptは年次で仕様が更新されています。ECMAScript 2020（ES2020）は2020年6月にリリースとなりました。現行のすべてのブラウザでES2020の機能は利用できますが、フロントエンドエンジニアにとって使いこなしたい記法ばかりです。 本記事ではES2020に焦点をあて、JavaScriptの新しい記述方法のメリットと使いどころを解説します。 オプショナルチェーン Optional Chaining（オプショナルチェーンやオプショナルチェーニングと呼ばれています）とは、?.構文を用いてnullやundefinedになりうる値へ安全にアクセスできる仕組みです。 利用シーン nullやunde
HTML5のFileオブジェクトを利用したファイルアップロード (JavaScript プログラミング)
HTML5のFileオブジェクトを利用したファイルアップロードのコードを紹介します。 概要 こちらの記事では、JavaScriptでXMLHttpRequestとファイル選択ボックスを利用したファイルアップロードのコードを紹介しました。この記事では、HTML5で導入されたファイルオブジェクトを利用してファイルをアップロードするコードを紹介します。 プログラム コード 下記のコードを記述します。 <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <title></title> <meta charset="utf-8" /> <script type="text/javascript"> function ExecUpload() { var u
Laravel で画像のアップロード・リサイズ処理をする方法 | 実践的Web開発メソッド
※ public/images とURLが干渉するため、photos にしておきます。 ライブラリのインストールと設定まず、「intervention/image」ライブラリをcomposerでインストールします。 $ composer require intervention/image 次に、configファイルの設定を変更します。 # config/app.php # 160行あたりに追加する (providersに追加) Intervention\Image\ImageServiceProvider::class, # 210行目あたりに追加する（aliasesに追加） 'Image' => Intervention\Image\Facades\Image::class, これで intervention/image を利用するための準備は完了です。 あとは、画像をアップロードする
完全網羅！Intervention Image（PHP）で画像を編集する全実例 – console dot log
さてさて、前回の記事ではメール開封チェックの仕組みを紹介しましたが、その中でIntervention Imageという簡単に画像を扱うことができるパッケージを使いました。 元々PHPにはGDと呼ばれる画像ライブラリが存在していますが、これがなかなか記述にクセがあって扱いにくい部分があったりします。Intervention Imageは、このGD（ImageMagickもサポートしています）を直感的に使えるようにしてくれるパッケージです。 そして、このブログではよくLaravel関連の記事を書いていますが、Intervention ImageはLaravelでの利用も想定されているものの、純粋なPHPライブラリなのでより多くの環境でも利用ができるはずです。 ということで、今回は「PHPで画像を扱うならこれ！」といっても言い過ぎではないIntervention Imageの全実例を紹介します。
axiosのget,post,deleteメソッド - Qiita
はじめに Node.jsを使う際に、標準のfetch API以外、requestモジュール、axiosのモジュールはよく使います。 書き方はGithubのページに書いてありますが、よくGoogle先生に聞く場合も多いです。 やはりオフィシャルに記載した情報は一番ですね。 axios: https://github.com/axios/axios request: https://github.com/request/request axiosのget,post,deleteメソッドを簡単に説明します。 Expressのパラメータの取得方法 まずサーバ側の情報を取得する仕組みを確認します。 Express.jsのリクエストAPI：https://expressjs.com/ja/api.html#req 1. headers // access_token: xxxxxxxxxxxx con
axiosでPOSTした画像をLaravel APIで保存する - Qiita
タイトルの通りです。画像やファイルのstorage保存の記事はいくつか見かけましたが、jsからPOSTする記事についてはあんまり見かけなかったので書きました。 この記事ではaxios経由で画像をPOST、LaravelのAPI処理に渡しているサンプルコードを簡単に説明します。概要は以下の通りです。 canvasに画像を描画し、blobデータを作成 blobをformDataにappendして、axiosでPOST POSTされたblobファイルを、Laravel API側で処理・保存 View側の処理 データのBLOB化 以下の処理かtoBlobを使ってCanvasに描画した画像ファイルをblob化します。 // Canvasのデータをblob化 const type = 'image/png'; const dataurl = this.canvas.toDataURL(type); /
PHP: getimagesize - Manual
警告 この関数は、filename が適切な画像ファイルであることを想定しています。 画像以外のファイルを渡してもそれを画像だと判断してしまい、関数の処理は成功するでしょう。 しかし、配列には意味のない値が含まれる場合があります。 getimagesize() を使って、そのファイルが画像であるかどうかを確かめることはできません。 そのようなことをしたい場合は、そのために用意されたソリューション (Fileinfo 拡張モジュールなど) を使いましょう。 getimagesize() は、 image_info パラメータで追加情報を返します。 注意: JPC と JP2 は異なるビット深度のコンポーネントを含むことが可能なことに 注意してください。この場合 "bits" に対する値は、 最も大きい深度になります。また、JP2 ファイルは 複数の JPEG 2000 コードストリームを含む
PHP: imagesx - Manual
Getting Started Introduction A simple tutorial Language Reference Basic syntax Types Variables Constants Expressions Operators Control Structures Functions Classes and Objects Namespaces Enumerations Errors Exceptions Fibers Generators Attributes References Explained Predefined Variables Predefined Exceptions Predefined Interfaces and Classes Predefined Attributes Context options and parameters Su
PHPで画像縮小したりobject-fitのようにトリミングするサンプル
画像掲示板のようなシステムはもちろんのこと、サポート用の問い合わせフォームにスクリーンショットを添付したり、業務システムであっても社員の証明写真を添付したり、いまやPHPでWebシステムを組むとき、画像ファイルも考慮に入れるのは必須と言えるでしょう。 そしてユーザーから任意のサイズの画像ファイルがアップロードされる可能性がある以上、PHP側では必ず縮小処理が必要になります。 基本的には拡張機能であるGD2のimagecreateほにゃらら系の関数を使うのが一般的だと思いますが、今回はPHPでCSSの object-fit:contain; や object-fit:cover; と同じような縮小やトリミングをする方法について、備忘録を兼ねて記事にしておきます。 PHPで画像縮小する際の基本 PHPが使えるレンタルサーバーで拡張機能のGD2が使えないところはないと思いますが、自前のWindo
Laravelで画像サイズを変更して保存する方法がめちゃめちゃ簡単だった話 - Qiita
はじめまして！qiita初投稿です😆 最近Laravelで開発することが増えてきて、その中でも便利だなーと思った「画像サイズの圧縮」について書きます。 随時間違っている部分などは訂正していくと思います。ご指摘もいただけると嬉しいです🙌 開発環境 PHP 7.3.11 Laravel Framework 6.5.1 Composer version 1.9.1 Laravelで画像処理をする。 今回自分は「interventionImage」というパッケージを利用して、画像サイズを小さくして保存を実装しました。 interventionImageはphpの画像処理ライブラリGD LibraryとImagickをサポートしています。 自分はGD Libraryを使用して実装しました。 GD Libraryのインストール方法は環境によっても変わってくると思うので、お使いの環境に合わせてインス
Laravelで画像処理（アップロード／リサイズ／サムネイル）を行なう方法
2014/10/13 (更新日: 2016/08/14) Laravelで画像処理（アップロード／リサイズ／サムネイル）を行なう方法 Laravel PROGRAMMING LaravelでLaravelで画像処理（アップロード／リサイズ／サムネイル）を行なう方法をまとめました。 Laravel学習をしている方の参考になれば幸いです。 ソースはgithubで公開しています。 manabubannai/Laravel_Image_Manipulation Laravelで画像処理をするパッケージのインストール intervention/image というパッケージを利用します。 intervention/image – Packagist 以下のコマンドでインストールします。 $ composer require intervention/image つづいて、intervention/im
【備忘録】【PHP】画像サイズを取得する getimagesize
このサイトのトップページをレスポンシブルな感じにしていこうとおもい、とりあえず可変グリッドレイアウトにして見たのですが、どうも画像を入れるとうまくびしっといかない。 どうやら、画像の高さをしてい出来ていないためか〜と思い、画像のサイズを計るソースを追記したところ、うまくいきました。 Wordpressなどで、投稿する画像がまちまちのときに画像サイズが分からないとレイアウト崩れを起こしちゃう事があるので、覚えておくと便利っす。 PHP Getimagesize関数の使い方 getimagesize(‘画像のURL’); で画像情報が配列にセットされます。 配列【0】画像の幅 配列【1】画像の高 配列【2】画像の種類(1=gif 2=jpg 3=png 4=swf) 配列【3】文字列 こんな感じでセットされます。 実際にはこんな感じで使うといいのでは… $imagesize = getimag
Display image in PHP (Laravel)
I'm trying to display a png image in PHP (Laravel) So far I've tried $response = Response::make(readfile(public_path() . "/img/$image_name.png", 200))->header('Content-Type', 'image/png'); return $response; and this $file = public_path() . "/img/$image_name.png"; $im = imagecreatefrompng($file); header('Content-Type: image/png'); imagePNG($im); imagedestroy($im); I always get something like this i
画像をbase64エンコード | 私的雑録
// 画像指定 $file_name = 'foo.png'; // base64エンコード $data = base64_encode(file_get_contents($file_name)); // ファイル情報 $path_parts = pathinfo($file_name); // 拡張子を小文字置換 $file_ext = strtolower($path_parts['extension']); if ($file_ext == 'jpeg') { $file_ext = 'jpg'; } // <img src="' . $src . '"> $src = 'data: ' . $file_ext . ';base64,' . $data; <img src="data:jpg;base64,/9j/4AAQSkZJRgABAgAAZABkAAD/7AARRH （略）
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
GitHub - Donaldcwl/browser-image-compression: Image compression in web browser
Change the file format using browser-image-compression library in reactjs?
MAGAZINE｜イメジン – デザイン特化型クラウドソーシング
globalthis
GitHub - es-shims/globalThis: ECMAScript spec-compliant polyfill/shim for `globalThis`.
Laravel 5.5 アップロードした画像のwidth, heightのpx数を取得したい
GitHub - Intervention/image: PHP Image Processing
Display image from laravel controller
axios で添付ファイルありのリクエスト(multipart/form-data の POST)
Warning: Missing boundary in multipart/form-data POST data in Unknown on line 0
FormDataオブジェクトの中身を確認する方法 – ysklog
How to send a file via Axios to Laravel
AJAX file upload with axios and laravel