はてなブックマーク

私は「賃貸で炭火をすると煙でご近所に迷惑がかかって、下手すると通報される」と思っていました。しかし、実際に炭火を導入したらわかります。これは大きな勘違いでした。 この記事では、自宅で揃えると便利なアイテムをご紹介した上で、自宅炭火の「実際」をご紹介ます。 本記事は自己責任でご利用ください。うちは契約上問題ありませんでしたが、IHで火気厳禁の物件などではもちろん炭火も利用することはできません。 炭火という独特の熱源まず重要なのは、炭火は熱源のひとつでしかないということです。備長炭を使ってることをウリにしている飲食店はとても多いですが、炭火はその特徴によって食材のうまみを引き出し、独自のできあがりになります。 よくいわれるのは、炭の遠赤外線効果によって中の水分を逃さずに外はぱりっと仕上がることです。 ガス火には水分が多く含まれるとか近赤外線効果とかいろいろあるのですが、料理が好きな人向けの紹介

企画で選書するために近所の大型書店にいってきたのですが、Web制作に関する書籍って種類は多いものの、古かったりわかりにくかったりして結構選ぶの大変なんですね。 2020年時点でWeb制作を学び始める人にぜひ読んでおいてもらいたいなという書籍を以下にまとめましたので、ご参考ください。読んでほしい順番に並べています。 1冊目：行動を変えるデザインまず、Web制作はツールにすぎないので、Webを何のためにつくるかを考える土台にしてほしい書籍がこちらになります。

個人的な観測範囲によると、定期的にTwitterで議論になる三大Web制作話題は ・ マサカリ ・ jQuery ・ ピクセルパーフェクト なのですが、今年もまたこのシーズンがやってきました！2020年9月20日に話題になったピクセルパーフェクトのツイートは以下にまとめられています。 そもそもピクセルパーフェクトとは何かをみてみたいと思います。 ピクセルパーフェクトとは簡単にいってしまうと、デザインカンプを1pxのズレもなく完璧に再現することです。まぁ、簡単か難しいかといえば、1枚の絵をそのまま再現すると開き直ると慣れればそんなに難しくありません。Bodyのbackground-imageにデザインカンプを設定してその上にパーツを配置していけばいいだけなので。ChromeにPerfectPixelというアドオンを入れるだけでも十分です。 では、どうしてピクセルパーフェクトはこれだけ議論にな

私にとってのCapacitorの立ち位置と、Web制作者がCapacitorでアプリをつくれるようになるということ React Nativeを利用してる @Nkzn さんに「Ionic/Capacitorがどういうケースに適してるかを語ってみろ。React Nativeはちゃんと記事にまとめた！（意訳）」と言われたので、まとめてみます。 ちなみに本記事は全文無料公開（9月3日時点）しています。もし満足してもらえたら、課金してください。 クロスプラットフォームツールの特徴ここでは、クロスプラットフォーム開発のフレームワーク・ライブラリとして、Cordova、Capacitor、React Native、Xamarin、Flutterを紹介します。どれもがすばらしいのですが、開発思想やクロスプラットフォームを実現するためのアプローチで違いがあります。 1. WebViewでUIをレンダリングす

前々からつくろうと思ってたアプリをひとりハッカソンでつくりました！大体、Webアプリのリリースに1日、モバイルアプリ化に半日、LPやこの記事書いてるのに半日という感じなので、「アプリを2日でリリースした」と当分言っていこうと思います。 アプリはシンプルなツールアプリで、食品表示ラベルを印刷することができます。ログインも必要ないので簡単にお試しいただけます。 どういうアプリ？つくった理由はありきたりですが、「知り合いが困ってたから」です。 緊急事態宣言以降、飲食店は、感染拡大防止のために、換気をよくし、席数を間引いて客同士の間隔をあけながら営業するようになりました。そして、少なくなった席数（売上）を補填するために、惣菜販売や通販をはじめたけど「食品表示ラベルの印刷が難しい」と・・・。 ちなみに、食品表示は違反すると罰則がとても厳しい義務です。 けれど、狭い店だとパソコンとプリンタ置く場所ない

ときどき「Ionicでつくったモバイルアプリ（Web技術/HTML5でつくったiOS・Androidアプリ）で出来ないことって何ですか？」と質問を受けるので簡単にまとめようと思います。 （カバー画像に意味はないです。何使おうかと思って探したところめちゃくちゃ可愛かったからこれにしました） パフォーマンスが低いという誤解とりあえず、「Web技術でアプリつくるとパフォーマンス低くて使い物にならないって聞くんだけど」というのはもうとっくに通り過ぎた昔の話です。以下の2つのレンダリングを比較してみてください。 圧倒的に後者のほうがなめらかでスムーズですよね。これはReactの過去の実装（Stack）と、4年前に刷新された「Fiberアーキテクチャ」との比較なのですが、JavaScriptのレンダリングの実装はここまで進化しています。 こちらはつい最近実装されたIonicでユーザがアニメーションを実

サービス開発を簡単にはじめられる時代になりました。 WebアプリはNetlify/Firebase Hostingにおいて、認証基盤はFirebase Authentication、記事はWordPress.comにおいて、課金？じゃあ、Pay.jpのAPIを使いましょう。なんだったら、NoCode系のサービスが続々とでてきてるので、WebサイトもWebアプリもコードを一行も書かずにリリースできます。 リリースすることはすばらしいですし、仮説検証サイクルにおいてまずはプロトタイプをみせることは重要です。「堅牢なインフラ／セキュリティ基盤」という面でもこれらのサービスはどんどん使われるべきです。ハッシュ化されずに生パスワードがDBに格納するぐらいなら、今すぐにFirebase AuthenticationやAuth0を使ってください！また、専門性の民主化という意味でもどんどんこういったサービ

結論を先に書くと、2015年あたりの混沌としたJavaScriptフレームワーク戦争は終わりを迎え、メジャーなフレームワークはどれも成熟してきているので、使いたいフレームワーク使ってください。 ただ技術選定においてはどれかひとつを選ばないといけないというリアルはあるので、理解を深めるための視座をいくつか紹介したいと思います。 JavaScriptフレームワークの簡易比較有名かつドキュメントが日本語化されており、入門書もでているJavaScriptフレームワークにはAngular、React、Vueがあります。 で、それぞれの違いなのですが、すごくシンプルに言ってしまうと、HTMLとJavaScriptの関係がそれぞれ違います。 ・ Angularは、HTMLとJavaScript（TypeScript）を分割してかきます。 ・ Reactは、JavaScriptの中にHTMLを書きます。

[α版公開] Webパフォーマンス定常計測ツール「rabify CI」を作った理由と、仕組み、使い方。 「本当は速くならない「Webサイトの表示高速化アンチパターン」10選」という記事を書いたところ、話題になりました。「計測しないとわからないよね確かに」ととても嬉しいコメントもいただいたのですが、「アンチパターンは使わないようにしよう」などと、もともとのコンセプトである「計測しよう」というメッセージを伝えるのは難しいなと感じたところです。 で、どうして計測が難しいのかと思うと、敷居低く定期的に計測するツールがないんですよね。 本記事で紹介してるrabify CIはalpha版です。予期せぬ不具合や、aplha版においてレコードしたデータの保全については保証しかねます。顧客と契約したデータ格納など本番利用につきましては、本リリースまでお控えいただきますようお願い申し上げます。なぜ定常計測かふ

何について書いた本？Ionic Frameworkという、Web技術でアプリをつくるためのフレームワークについて書いています。これを使うとHTML/CSSの豊かな表現力をそのまま使って、Webアプリはもちろんのこと、ストアから配信するiOS、Androidモバイルアプリを制作することができます。 海外だと、アメリカのゼネラル・エレクトリック（日本でいうSonyのような総合電機メーカー）やイギリスのNational Health Service（国民保険サービス）、国内だと、先日1億円調達したTechFeedが採用しているので耳にしたことがある人も少なくないと思います。 何をつくれるようになるの？書籍的には「どういうものをつくれるようになるの？」というところが重要かなと思っているので、本書でチュートリアル形式で制作していくアプリについてご紹介します。 タスクリストアプリを作ろう〜チュートリア

ベストプラクティスや「高速化につながる！」と紹介されている記事では、逆効果、もしくは効果があるシチュエーションがあまりに限定的な手法が紹介されていることが多いので、アンチパターンとして紹介します。 本記事は「Webパフォーマンス Advent Calendar 2019」2日目の記事です。 https://qiita.com/advent-calendar/2019/web_performance 本記事はWebパフォーマンス高速化の専門家である株式会社Spelldataの竹洞 陽一郎氏にアドバイスをもらいました。HTTP/2の伝送の画像など一部資料のご提供もいただいております。誠にありがとうございます。 https://spelldata.co.jp/ ほとんどの場合で間違い 1. すべての画像をCSSスプライトその昔、画像をすべて1枚にまとめて、DOMのbackground-image

あなたは本当にエンジニアですか？海外で「私はWebエンジニアです」と名乗ると「経済学部卒なのに？」と聞かれた理由。 結論 ・「私は博士です」「博士課程修めてないのに？」と言われてるようなものです。 ・ 無資格だと僭称もしくは無知扱いされる可能性があるのでやめたほうがいいです ・ 日本も批准しています エンジニア（Engineer）とは海外のWebを仕事にする方々のTwitterの自己紹介文をみると、「Web Engineer」と書かれているのは稀で、多くは「Web Developer」「Web Programmer」と書かれています。「#駆け出しエンジニア」というハッシュタグが流行るぐらいに気軽に「エンジニア」という言葉を使うのは日本国内の事情のようです。 実際求人をみてみても「エンジニア特化求人」「【エンジニア】の派遣求人」で年収300万や時給1,000円程度のものを見つけることができま

「jQueryはオワコン」「いや、jQueryは便利！」議論が行われるようになってから2年は経つでしょうか。Twitterを観測してると定期的に盛り上がるので、私なりにちゃんとまとめようと思います。 ちなみに結論を先に書いておくと ・ レンダリングブロックしない構成、かつ最新版を使おう ・ jQueryはいいものだけど、脱jQueryした方が手っ取り早い です。 1. 保守しないといけないサポートの切れたjQuery1, 2を使ってるけど、依存プラグインが動くかどうかわからないから最新版にアップデートしていないプロジェクトが散見されます。 jQuery1, 2 は、Officially End of Life（公式に廃止）が名言されてます。ですので、「jQuery におけるクロスサイトスクリプティングの脆弱性」みたいな報告も修正されていません。EOLのバージョンはやめましょう。 ちなみにj

macOS CatalinaのChrome 77のフォント問題。 勘違いしている人が多いので説明。 Chromeのデフォルトだった「ヒラギノ角ゴシック ProN」がCatalinaで未バンドルになる ↓ 該当するフォントがなくなったため、Sans Serifが明朝体で表示される ↓ フォント指定の甘いサイトは全部明朝体に！ pic.twitter.com/Cil92P8PGO — 池田 泰延 (@clockmaker) October 8, 2019 注：本記事はベストプラクティス紹介ではありません。記事内のフォント指定はわかりやすさを優先しているため、英語フォント名は割愛しておりますので、このまま利用すると意図していないフォントになることがあることご注意ください。この問題です。池田さんが書いてますが、端的にいうと「フォント指定が甘い」から起きています（Sans Serifがなぜか明朝体で

AMP（Accelerated Mobile Pages）がオープンソースとして立ち上げられてから数年が経ちました。食べログなどの大手Webサービスが対応し、また簡単にAMP対応できるWordPressプラグインが出たことで、今では一般に浸透してきた感じを持っています。 ただ「表示高速化技術」「一瞬で表示する技術」というのは正しくないのでやめませんか？ AMPはWeb Componentsフレームワークまず誤解されがちなのですが、AMPは新たな技術ではなく、Web標準の「Web Components」というAPIを用いて実装されています。AMPのGitHubページにもしっかりと「The AMP web component framework.」（AMPというWeb Componentsを用いたフレームワーク」と掲載されています。 Web Componentsは、再利用可能でカプセル化された

デザインシステムは実は目新しい概念ではありません。古くはBootstrapからはじまるCSSフレームワーク、デザインの言語化からガイドラインを策定したHuman Interface Guidelines（Apple）、デザインと言語化をセットで取り扱っているMaterial Design（Google）と、馴染みのある文化です。 しかし、近年再び話題にあがることが多くなってきたので、Webをテーマにしてデザインシステムについて考えていきます。 デザインシステムとは様々な角度からデザインシステムを定義している人がいますが、Facebookのガイドラインはデザインシステムの参考になると思っています。 用途、形状、色、比率、アセットまわりの空白をバリエーションをもって定義しています。ライトモードとダークモードの使い分けについても定義されています。 つまりは、「こういうグラフィックがあり、それはど

jQuery 3未満は、XSSの脆弱性を抱えています。 JVNは「リスク：低」に設定していますが、脆弱性として認定されてしまっているので対策しておくに越したことはありません。 対策jQuery 3にアップグレードすることが望ましいですが、それができない場合はjQueryを読み込んでるscriptタグのすぐ下に、以下を追記してください。 <script> jQuery.ajaxPrefilter( function( s ) { if ( s.crossDomain ) { s.contents.script = false; } } ); </script>これによって、Ajaxをつかって「異なるドメイン」からJavaScriptファイルを読み込むことができなくなります。 場合は、そのScriptは動かなくなります。 脆弱性をもっているかの確認方法Google ChromeのConsole

Web系フリーランスはいつまで「フリーランス」として下請けし続ける？傭兵が60歳を過ぎても傭兵で戦えるのか問題。 最近、フリーランスとしてどうやって食べていったらいいのか、今後どうしたらいいのかという相談をちょいちょい受けますので、ちょっとまとめておこうと思います。「経営に正解はない」といわれる世界ですので、これが正解というわけではなく、ひとつの見解としてご覧いただけましたら幸いです。なお、「いや、育児があって」などの個別事情がある方には参考にならないと思います。 フリーランスとはさて、皆さんご存知、フリーランスの語源。 中世は王や貴族は主力となる騎士を中心とした封建軍の補強として、戦争の度に傭兵団（フリーカンパニー）と契約して戦争に臨んだ。この中には正式に叙勲されていない騎士（黒騎士）や傭兵団を離れ戦場に臨む兵士がいた。フリーランスになったばかりの方々は「よーし、中抜きもされない！嫌な上

Microsoftが「Sketch 2 Code」を公開！AIが、手書きのワイヤーフレームをHTMLに自動変換してくれる新時代に。これはすごい！！ 流れてきたツイートをみて「なんだこのデモは」といろいろ見てみたところ、Microsoft AI labがすごい技術を公開していたので簡単にまとめます。どういう技術かというと「手書きのワイヤーフレームを適切に修正してHTMLに自動変換」してくれます。 Kabel, Spike Techniques, Microsoftが2018年8月末に公開したSketch 2 Codeというライブラリです。GitHub（ https://github.com/Microsoft/ailab/tree/master/Sketch2Code ）で公開されているので、確認することができます。行っている処理は以下の通り。 1. ユーザはWebに画像（手書きワイヤーフレ

ロゴの自動生成サービス「Free Logo Generator Online」が今までにないレベルで高機能だった話と、これはデザイナの仕事を奪うのかどうか。 このツイートをしたところ、大きな反響をいただきまして、かるく解説記事を書いておきます。 どういうサービスなの？オンラインでネットショッピングをつくることができる有名サービス「Shopify」のはじめたロゴ自動生成サービスです。13のビジネス分野、18のデザイン属性から自分にあったものを選択し、ロゴに入れる文字をタイプするだけでロゴを自動生成することができます。また、生成したロゴのフォント、色、アイコン、レイアウトの調整も可能ですので、自動生成といいながらほぼあなただけのロゴを自動生成することができます。 使い方ログイン不要です。https://hatchful.shopify.com/ にアクセスして、右上の「GET STARTED」