[Ionicモバイルアプリ制作レシピ] ウェブアプリのクロスプラットフォーム化を実現するCapacitorの仕組みと、ウェブからSwift/Javaのコードを実行する方法 はじめにCapacitorは、クロスプラットフォームのためのライブラリで、ウェブアプリを、ウェブ上ではもちろんのこと、iOS、Android、Electronでネイティブに動作させることができ、あなたのウェブアプリを「App Store」や「Google Play」で配信することができます。 このことで、ウェブブラウザだけでは実装できないFaceID APIや指紋認証API、Health APIへのアクセス、プラットフォーム独自の課金APIの利用を行うことができます。iOSではSwift、AndroidではJavaの任意のコードを実行することもできますので、あなたのアプリのユーザ体験を飛躍的に向上させることができます。

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

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

[翻訳]Ionic5がやってきた。Gifアニメーションつきで最新のWebモバイルUIフレームワークを紹介！ この記事は Announcing Ionic 5! をIonic Teamに許可をもらって、翻訳、加筆したものです。英語に抵抗がない方はぜひ原文もご覧ください。今日、私はIonic Framework 5 (名称：Magnesium)を発表するできることに興奮しています🎉 Ionic FrameworkはWeb技術でモバイルアプリ（iOS, Android）を制作してストアから配信するためのフレームワークです。アメリカのジェネラルモーターズ（日本でいうSony）やディズニー、世界最大の国民健康サービスであるNHSなどの大手から、フリーランスのWeb制作者まで利用されており、世界中に多くのファンがいます。 採用事例に興味がある方はこちらをご覧ください（英語）今回のリリースには、iOS

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

ベストプラクティスや「高速化につながる！」と紹介されている記事では、逆効果、もしくは効果があるシチュエーションがあまりに限定的な手法が紹介されていることが多いので、アンチパターンとして紹介します。 本記事は「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円程度のものを見つけることができま

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は、再利用可能でカプセル化された

以下の記事で「Cordova／Ionicに比べれば、まだ少しはまともな選択だろう」と述べてあるのをみて、ここ数年Web Nativeに関わって思うことをちょっとまとめてみようと思います。 私はWeb Developerですので、この記事はWeb Native寄りの意見になります。また、本記事内では、いわゆるWeb Viewでつくるガワアプリを「Web Native」、それ以外（React Native/Native Script/Swift/Kotlinなど）をまとめて「Mobile Native」と呼称しております（分類はWhere Does Ionic React Fit in the React Ecosystem?から） note: Cordovaつらいって言っちゃだめという記事ではありません。OSSの活動は続いてるので、伝聞や過去のものではなく、最新のCordovaやWeb Na

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」