US版メルカリ リブランディングの舞台裏〜HTMLメールの検証にまつわる泥くさい話〜 | メルカリエンジニアリング
こんにちは。バックエンドエンジニアの @naopr です。 3/20にUS版メルカリでリブランディングを実施し、ロゴやアイコン、デザインを一新しました！ 今回は、リブランディングに伴うHTMLメール変更にまつわる地味で泥くさいお話をご紹介します。 メルカリでのHTMLメールの実装 メルカリはコア部分をPHPで実装しており、HTMLメールのテンプレートエンジンとしてTwigを利用しています。 一部の古いテンプレートは生のPHPで書かれていますが、多くのテンプレートはTwigで書かれています。 検証環境でメールが送られないトラブル 今回、リブランディングに伴いTwigのテンプレート変更を行いました。 ローカル環境での開発が終わり、いざ検証環境でテストをしてみると残念なことにメールが送られてきません。 不思議なことにメールの種類によって送られるものと送られないものがあり、環境によって送ることので
フロントエンド全然わからないマンが、ちょっとでも見た目のいいWebサービスを作ろうとしてやったこと - Qiita
はじめに サーバーサイドプログラミングを勉強していると、自分でWebサービスを作りたいという気持ちがわいてくるものです（私はそうでした）。しかし、ここで大きな問題が立ちはだかります。どんなにすごい機能をつけても、いい感じのデザインのWebサービスでないとそもそも使ってもらえないのです。 試しに、QiitaのトップページのCSSを無効にしてみました。使える機能は変わらないはずなのに、全く使う気が起きなくなりますね。 しかしそうは言っても、フロントエンドの経験がほとんどないとどうすれば見た目をいい感じにできるかがわかりません。今回は、ちょっとでも見た目のいいWebサービスを作るために、そんな状況の私がやってみたことをまとめました。 (この記事は、あくまで私が試行錯誤した結果をまとめたものであり、その結果出来上がったサービスの見た目の良さを保証するものではありません) 書いている人のプロフィール
PWAが来るって言っているエンジニアは今すぐ辞めろ
PWAとかいうhtml5のリブランドが技術者界隈で騒いでるが、こんなの受け入れられないだろ。 PWAの実物見た？触った？？ instagramのPWAが最高〜！ネイティブと見分けつかない！！とかほざいているグー○ルのエバンジェリストだかエンジニアが騒いでいたので触ってみたのだが、 オワコンであった。 ネイティブと見分けつかないんだったら本当にエンジニア辞めたほうがいいよ。 まず、タイムライン上で複数投稿があった時にスワイプで切り替えられない。 なんと左右をタップするのである。 HTMLを操作してる感満載のガクガクの感じ。 ユーザーってこういう些細なガクガクに敏感だよね。マーケット感ある人ならわかるよね。 そんでもってストーリーズ。 もう最低。 動画が自動再生しないの。止まるは止まるは。もう何なの？？？って感じ。 こんなの受け入れられないでしょ。 カメラは直接起動できないし、フィルターも少な
意外と知られていないHTMLの基本の話
私はWeb制作が初めての方向け講座だけでなく現役の制作者の方向けに様々なWeb講座をしていますが、現役のWeb制作者の方でもHTMLに関して意外と知られていないんだなと思うことがいくつかあります。 特に、HTML5以前の古いHTMLの使い方のまま覚えている方が多いように思われますので、この記事ではそれを中心に取り上げてみました。 なお、この記事はHTML 5.1およびWHATWG HTML Standardの仕様書を参考に書いています。 width=”100%” のように数値以外の文字列を “” に入れるのはNG たとえばimg要素などで、ブラウザの幅いっぱいに画像を表示したいという場合、昔はimg要素に width=”100%” のような属性をつけることがありましたが、HTML5からはwidthなどの属性値に数値以外を含めることができなくなっています。（つまり%などの単位を含めることがで
ESDocという(多分)モダンなドキュメンテーションツールの紹介 - maru source
こんにちは丸山@h13i32maruです。 僕は2015年からESDoc*1というJavaScript向けのドキュメンテーションツールを開発しています。 https://esdoc.org https://github.com/esdoc/esdoc Star 最初のリリースから2年、昨日ようやくv1.0をリリースできました🎉 いやー、ここまで長かったです。今ではRxJSやSketchAPIなど、様々なツールで使用されています。 この2年間、ESDocは2つのゴールを目指して開発してきました。 ドキュメントの作成・メンテナンスを快適にする（ドキュメントを書くの楽しい！という状態） ソフトウェアの使い方を簡単に理解できるドキュメントを作成する（ソースコード読まなくても大丈夫！という状態） この2つを満たすためにESDocは色々な機能を提供しています。 今日はそれらの機能の中でも(多分)モダ
Ruby コミッターになりました - k0kubun's blog
m_sekiさんとhsbtさんの推薦で、ERBのメンテナとしてRubyのコミット権をいただきました。 以下が初コミットです。 github.com 普段テンプレート言語Hamlの高速化やその更に高速な別実装Hamlitの実装をやっていてテンプレートエンジンの高速化に知見があり、ちょこちょこERBにも知見を還元したりしていたのですが、一昨日ふとERBの生成コードのiseqを眺めていた時に気付いてパッチを送った後、「入れるのめんどくさいし、ERBのコミッタやりますか」とお声がけいただいた形です。 というわけで、引き続き主に高速化の方面でERBのメンテナンスをやっていきますが、他にも以前僕がC拡張にしたHTMLエスケープとか、広い範囲でパフォーマンス改善をやれたらいいなと思います。 さっきのパッチに関連してto_sもメソッド呼び出しをバイパスできるようにしたら結構いろんなものが速くなるんじゃない
2016年に見直したHTML5・CSS3コーディング手法6選 - ICS MEDIA
HTML・CSSコーディングを取り巻く状況は、数年前と大きく変わっています。最近では、2016年11月にHTML 5.1が勧告されたり、2015年8月頃にChromeのブラウザーシェアがInternet Explorerを抜いたりといったニュースがありました。また、2017年4月にはWindows Vistaのサポートも終了するため、今後対応すべきはWindows 7のIE 11以降となります（※）。当たり前だと思っていたコーディング技術を今一度見直す時期にきているのではないでしょうか。本記事では2016年に見直した、今の時代に即したコーディング技術を紹介します。 ※ 参考記事「Internet Explorerサポートポリシー変更の重要なお知らせ - Microsoft」 1. meta keywords設定は検索順位に関係がない ウェブコンテンツのキーワードを指定するmeta keyw
『PHP BLT #1』に参加しました！ - fortkle blog
PHP BLT とは 全員がLTで発表するというコンセプトのPHP周辺/Web/サーバサイド全般の勉強会 phpblt.connpass.com 以下メモ 『自作ArrayでPHPのメモリ節約』"よや" yoya@awm.jp speakerdeck.com 「PHPの配列は重たい」という問題提起 原因はArray管理データが大きい事 SplFixedArray はArray管理データがごそっと減っているので早い もっと節約したい＝自作の提案 ArrayAccess + Countable + Iterator を使い、PHPで実装 3GBメモリが20MBメモリに！100分の1のメモリ使用量！ 自作Arrayの注意点 『I ♥ PHP（Openpearの素敵な終わらせ方）』@riaf Openpear 作った 誰でもパッケージ公開ができる野良PEARチャンネル 諸事情により使われなかった;
Webパフォーマンス管理の基本 1 - Qiita
はじめに Webパフォーマンスはパフォーマンスエンジニアリングの1つの分野 Webパフォーマンス管理は、Webサイトの非機能要求の性能や可用性を扱います。 専門用語では、コンピュータの登場と時期を同じくして登場したパフォーマンスエンジニアリングという分野に属します。 パフォーマンスエンジニアリング パフォーマンスエンジニアリングとは、Wikipediaでは以下のように記載されています。 Performance engineering encompasses the techniques applied during a systems development life cycle to ensure the non-functional requirements for performance (such as throughput, latency, or memory usage) w
HTML5 CanvasにJavaScriptでリアルタイムに動画を描画。透過レイヤで動画の重ね合わせなど、新たな表現が可能なPC／モバイル対応コーデック「H2MD」［PR］
Webの表現力は、文字の大きさや色を中心に修飾していた時代から美しいグラフィックやアニメーションの活用へと進み、いまでは大きな動画も積極的に取り入れた、豊かな表現力と情報量を備えるWebが数多く見られるようになりました。 最近では広告や解説動画といった例だけでなく、背景いっぱいに動画を使うといった例もあります。モバイルでもゲームやソーシャルメディアなどを中心に積極的に動画を用いた表現が増えています。 GIFやH.264に足りないもの こうした動画表現を実現する技術には複数の選択肢がありますが、モバイルとWebサイトの両方での対応を考えると、GIFアニメーションかH.264のいずれかを選択するのが一般的でしょう。しかしGIFアニメーションは色数が256色と限られ圧縮率も低いため、小さなサイズで数秒程度といった最小限の動画再生にしか向きませんし、音声との同期も困難です。一方、H.264は高精細
画像を拡大全画面表示するのに、まだLightBoxとか言ってんの？ - それマグで！
フルスクリーン・モード使えよ。楽だぞ 昨今のブラウザにはフルスクリーンモードが搭載されていて、それを使うと、コピペレベルで画像を拡大表示が出来る 画像をフルスクリーンにお手軽に作るHTMLの例 <div id='img01' onclick="this.webkitRequestFullScreen();" > <img src='http://cdn-ak.f.st-hatena.com/images/fotolife/t/takuya_1st/20141129/20141129034938.jpg' /> </div> <button onclick="img01.webkitRequestFullScreen();">フルスクリーンで表示</button> #img01:-webkit-full-screen { width: 80%; background-color: rgba(
エンタープライズで使える！実践から学ぶJavaScript MVCフレームワークの選び方
エンタープライズで使える！実践から学ぶJavaScript MVCフレームワークの選び方 酒巻瑞穂（html5jエンタープライズ部） 現在エンタープライズシステムの開発現場では、シングルページアプリケーション（SPA: 単一のWebページで構成されているWebアプリケーションのこと）アーキテクチャの採用が模索されるなど、根本的な開発パラダイムにおいて大きな変化が起きようとしています（全体的にどのような変化があるかはエキスパートNo59の佐川夫美雄さんの書かれた「JavaからHTML5ヘ。業務システムの開発におけるWeb技術の変化と適応事例」によくまとまっています）。 こうした変化の一部を支えているのが、JavaScriptによるMVCフレームワークです。数あるフレームワークの中で、実際にどのフレームワークを採用するかというのは、開発コストだけではなく学習・運用コストにも関わる、非常に大きな
Sublime TextでMarkdownを快適に書くためのプラグインと設定
メモ書きやらブログの下書きにMarkdownを使い始めたわけなんですが、まぁこれが快適でして。さっくり下書きできて後で簡単にhtmlに起こせると言うのが嬉しいです。学習コストも大した事ないし。 Markdown使うためにMac、iPhone、iPadに導入したエディタアプリ で、↑の記事ではMacでMarkdownを書く時にMouを利用し、ときたまSublime Textを使っていると書いたのですがメインエディタをやっぱりST2にしました。 キャレットが増やせなかったり、やっぱりビジュアルが我慢できなかったり、Mouを使ってると「もう〜」ってなる瞬間が多かったので。Mouだけに。Mouと感嘆詞の「もう〜」がかかってます。すごい。 そんなわけで今回はSublime TextでMarkdownを快適に書くために導入したプラグインと設定を書いておこうかと思います。（なお、私の環境はMac + S
HTML FormにPUT/DELTEは必要なのか、あるいはJSer界の分断 #桜JS - teppeis blog
先日、都内某所で開催された#桜JSに参加したので、個人の日記レベルの感想を書いてみる。 #桜JS - Togetterまとめ 桜JSでご飯を食べながらLT大会をした | Web scratch 細かいことはazuさんのまとめを見てもらうとして、個人的におもしろかったのがHTML FormのPUT/DELETEについての議論。 なぜ html の form は PUT / DELETE をサポートしないのか？ - Block Rockin’ Codes Jxckさんの経緯まとめを踏まえて、じゃあこれからHTML FormにPUT/DELETEを追加する必要あるの？っていう点で意見が割れた。 個人的には、この話を聞いたとき、確かに仕様としては欠けてる感じがするけど、いまさら実装されても自分はForm PUT/DELETE使うことはないだろうなと思っていた。理由は、FormでPUT/DELETE
AngularJSでWebアプリケーションを作ろうと思った時に構成に悩んだら、generator-angular-fullstackからはじめるのが良いのでは | mah365
HOMEソフトウェア開発AngularJSでWebアプリケーションを作ろうと思った時に構成に悩んだら、generator-angular-fullstackからはじめるのが良いのでは AngularJSでWebアプリケーションを作ろうと思った時に構成に悩んだら、generator-angular-fullstackからはじめるのが良いのでは AngularJSはあくまでクライアントサイドのフレームワークなので、サーバサイドをどうしようかなーと悩むことがあると思います。Railsが得意ならRailsに組み込むのもいいんですが、Railsはビューヘルパーが異様に充実しているので、Rails上でAngularJSのコードを書いてるとRailsの良いところが10%も生かせてない気がして辛い気持ちになってきます。うーん、どうしよう。 そんな風に悩んだらYeomanのgeneratorであるgener
HTML5でiOSアプリAndroidアプリを作ろう 〜HTML5ハイブリッドアプリ開発入門〜
ヒカラボ(ウェブ技術でiOS/Androidアプリ開発！！～HTML5ハイブリッドアプリ開発[実践]入門～)での発表スライドです。 書籍『HTML5ハイブリッドアプリ開発[実践]入門』には、このスライドに載っていないCordovaの使い方、最適化のためのノウハウやテクニック、ジェスチャやviewportなどのモバイル特有の事情への配慮、ハイブリッドアプリで利用できるストレージ、デバッグ手法やセキュリティ、ネイティブとHTML5間のブリッジの仕組み、WebViewの扱い方などのHTML5ハイブリッドアプリ開発を網羅した内容をまとめています。 http://www.amazon.co.jp/dp/4774162116
バリデーション、エスケープ、フィルタリング、サニタイズのイメージ
バリデーション、エスケープ、フィルタリング、サニタイズの用語は分かりにくいので、イメージで説明します。 “><script>alert(‘xss’);</script> という入力文字列が、それぞれどうなるかを示します。 ※1 厳密な定義ではありません（要件や文脈により変化します） ※2 バリデーションという用語は非常に幅があります（ここの「名称補足」参照）。 ※3 サニタイズという用語は非常に幅があるで、使う場合は事前に語義を定義しましょう（参照）。
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
【前編】エンジニアの会社でデザインがうまくいくワケ〜「エンジニア病」にはダメ出しされよう
HTMLテンプレート素材まとめ
フロントエンドエンジニア（仮） 〜え、ちょっとフロントやること多すぎじゃない！？〜
