Android版 Chromeでスーパーリロードを強制的に行うには
Webサイト開発などを行っている際、ソースコードに変更を加えて内容を再確認することがよくあると思いますが、この時にひと手間がかかるのが「キャッシュ」の問題です。 通常WebブラウザはWebサイトの表示最適化のため、過去にアクセスしたWebサイトの情報を一時キャッシュとして保管しており、これらの情報を再利用することでより快適なウェブブラウズを実現しています。 一方、Web開発などを行っている際、このキャッシュによって変更したばかりのCSSファイルやJavaScriptの内容が反映されないことなどがあるため、開発者にとっては見落としがちで悩みのタネとなることも多くあります。 キャッシュ消去とハードリロードを行う「スーパーリロード」 デスクトップPCのGoogle Chrome環境であれば、「F12」キーもしくは「Ctrl + Shift + I」キーを押してデベロッパーツールが表示された状態に
Android の Chrome で開発者ツールを使う方法 - Qiita
スマホのサイト作っててPCブラウザのUA偽装じゃなくて実機で見たいってことはよくある。 実機で見ながらHTMLとかCSSをいじって確認したいと思ってスマホで開発者ツール的なのが無いかと探したらあった。 あったけど試したらうまくいかなくて紆余曲折して最終的にめっちゃ簡単だったのでメモ。 やりたいこと PCブラウザのChrome開発者ツールみたいなものをスマホのブラウザでもやる 環境 PC: Windows 7 64bit PC 版 Chrome: ver. 41 Android 端末: SO-03F / Android 4.4.2 Android 版 Chrome: ver. 40 準備 Android の USB デバッグを許可する 設定 ＞ 開発者向けオプション ＞ USBデバッグ にチェック 開発者向けオプションが表示されていなければ、 設定 ＞ 端末情報 ＞ ビルド番号 を連打して表
iOSで最後の1文字が改行される
iOSで文字列の最後の1文字だけ改行されてしまう不具合に遭遇したのでメモしておきます。 確認したiOSのバージョンは6.1.6です。 発生条件 調べてみると発生条件がいくつかあるみたいですが、今回遭遇した条件は以下になります。 display: inline-block;を指定している font-size: 20px;を指定している 文字列が全て全角文字 文字列の前に空白(半角スペースやコード上の改行)がある 上記発生条件の3・4番目について、いくつかパターンを試してみました。 HTML <!-- 文字列の前に半角スペースが入っていると発生 --> <div class="sample"> やる気マンゴスチンです</div> <!-- 半角スペースがない場合は発生しない --> <div class="sample">やる気マンゴスチンです </div> <div class="sampl
Google、「Flutter 1.9」リリース、Webアプリ生成機能を統合。Flutterは単一コードでネイティブアプリとWebアプリを開発できるフレームワークに
Google、「Flutter 1.9」リリース、Webアプリ生成機能を統合。Flutterは単一コードでネイティブアプリとWebアプリを開発できるフレームワークに Googleは今年5月にFlutterからWebアプリケーションを生成できる「Flutter for Web」を発表。テクニカルプレビューとしてきましたが、Flutter 1.9でこの機能を正式にFlutterに統合しました。 参考：Google、「Flutter for Web」発表。FlutterからWebアプリを生成。Flutterはマルチプラットフォーム対応のフレームワークに。Google I/O 2019 FlutterはもともとiOS/Android対応のネイティブアプリケーションを開発するためのUIフレームワークとして、Dart 2とともに2018年3月に登場。2018年12月にバージョン1.0に到達した段階で、
Androidアプリエンジニアの基礎知識
Cookpad.apk #2 登壇資料 https://cookpad.connpass.com/event/117054/
React Nativeハイブリッドアプリへの挑戦 ~ Part2: 導入/Bridge ~ - スタディサプリ Product Team Blog
本エントリは3部作のPart2となっております。 Part1: Monorepo/CI Part2: 導入/Bridge Part3: 振り返り/今後 モバイルエンジニアの@hotchemiです。 Part1からすっかり時間が空いてしまい恐縮ですが引き続き弊社のReact Nativeハイブリッドアプリの取り組みについて語っていければと思います。 段階的なインテグレーション 前回のエントリでmonorepoへの移行とCIの整備について語りましたが、今回は実際にどの様にインテグレーションを進めていったかについて説明していきます。 新しい技術を採用するに辺り、ビッグバンリリースを避け段階的に導入を試みていくアプローチの方がリスクを避け柔軟に対応できると考えています。ですので一気に再構築プロジェクトを発令するのではなく、ある機能をリニューアルする際にその画面のみReact Nativeで書いてみ
実はReact Native公式ドキュメントでReact Native for Webが使われている - Qiita
2019年8月追記： Expo SnackがWeb対応したことを受けて、React Native公式ドキュメントのライブプレビューはreact-native-web-playerからExpo Snackに戻りました。 http://facebook.github.io/react-native/docs/activityindicator 記事の内容は古くなってしまいましたが、React Native for Webが内部で使われていることに変更はありません。 React Native公式ドキュメントのプレビューを支える技術 React Nativeの公式ドキュメントでは、コンポーネントの実際の表示をWeb上で確認できるプレビューが用意されています。 少し前まではAppetize.ioが使われていて、実機のスクリーンキャストらしきものを見ることができていました。今でもExpo Snackは
ReactNativeでiOSとAndroidの漫画アプリを同時に作る | Nagisaのすゝめ
はじめに NagisaでiOSエンジニアをしている伊藤です。 今回はReactNativeというスマホアプリのクロスプラットフォーム開発ツールを使った取り組みについて紹介をしたいと思います。 アプリのクロスプラットフォーム開発といえば、以前ではTitaniumやCordovaといったWebViewをベースとしたアプリをイメージするものが多く、純粋なネイティブアプリに比べるとどうしてももっさりとした感覚になってしまい、あまり採用されることはなかったように思います。 ReactNativeではこのもっさりとした感覚はなく、とてもスムーズに動作するアプリを作れます。その理由はWebViewを使用せず、ビューやラベル、スイッチなどで本当のネイティブコンポーネントを使った画面が構成されるところにあります。これにより国内でもにわかに人気が出てきています。 UPTOON!のReactNative化 UP
ReactNative雑感 - そーす
最近自社のアプリ（iOS,Swift/Android, Kotlin）をReactNative化しているので使ってみた雑感など。 導入のきっかけ 自社アプリのiOS(Swift)とAndroid(Kotlin)は私が一人で作って運用しています。 なんで一人かというと社内でアプリをかけるのは私しかいないからです。 そんなわけで、新しい機能の追加や修正などは2つのプロジェクトを触らなければならなくて非常に手間がかかるんですよ。 そんなわけでちょっと開発が落ち着いたのを見計らって巷で話題（？）のReactNativeを調べ始めたのがきっかけです。 ちなみにJavascriptはほぼ初心者です。 調査段階でのメリット iOS, Androidでコードの共通化ができる（100%ではない） iOS, Androidのネイティブコードを呼び出すことができる（既存のコードを再利用できる？） Rectをベー
#6 ガワネイティブアプリをつくろう!! - KAYAC engineers' blog
ガワネイティブアプリをつくろう！ こんばんは。カヤックのAdvent Calendar6日目は、@fnobiがお送りします。 最近の業務ではいけてるSDKを作るため、Javaを書いたりC#を書いたりC++を書いたりしつつ、 Webを作るのも大好きなのでJavasciptをがりがりしたりしています。雑食エンジニアです。 さて今回のブログですが、専門的な話をしても、弊社のもっと専門的な人に踏み潰されそうな予感がするので、 こちらも雑食な話をしようと思います。 テーマはズバリ、 ガワネイティブアプリです！ ガワネイティブアプリとは ガワネイティブとは 「側ネイティブ, ガワだけネイティブ, ガワだけアプリ, ハイブリッドアプリ」： - IT用語辞典バイナリ ガワネイティブアプリとはつまり、 ガワ(外側)はスマホアプリとして書くけれど、コンテンツはほとんどWebViewっていうアプリのことです。
2週間半のReact Nativeアプリ開発を振り返る - c-bata web
React Native+Expoではじめるスマホアプリ開発 ~JavaScriptによるアプリ構築の実際~ 作者: 松澤太郎出版社/メーカー: マイナビ出版発売日: 2018/08/29メディア: 単行本（ソフトカバー）この商品を含むブログを見る ここ2週間ちょっとReact NativeでiOSアプリ書いてました。 サーバサイドをメインでやってきた自分にとって面白い技術で、今後も趣味で使ってみたいなと思えているのでTipsや所感を残しておきます。 目次 選定理由 Tips エラーハンドリング・状態管理 入力欄をキーボードの出現に合わせて動かすアニメーション 今回使ったライブラリ react-native-focus-scroll react-navigation react-native-vector-icons react-native-camera react-native-vid
react-native-web はクロスプラットフォームを加速するのか - Qiita
A Glimpse Into The Future With React Native For Web という記事を読み、react-native-webというプロジェクトを知りました。 本記事では、この技術の概要と自分の意見を書きます。 react-native-webの概要 より抽象化されたViewでWebアプリを書ける React Nativeで書いたコードはiOS、Androidに対応する。 このコードがそのままWebで動くとよいのでは？という発想で作られたライブラリ。 「ReactはもともとWebの技術じゃないか」というなかれ。 <div>や<p>をそのままブラウザにマッピングするReactは、 <View>や<Text>をプラットフォームごとにマッピングし直すReact Nativeより、 抽象度が低い。 だから、<View>や<Text>をWeb用にマッピングし直して動かせる
React Nativeのインストールとweb版からの移植ではまったこと - Qiita
今回流行りのreact nativeを試してみたく私用Macマシンと会社用Macマシンの2台にインストールしてみたのだが、片方は10分もかからずにインストールが終わってめでたくhello worldが拝めたものの、もう片方はがっつりハマったのでそのときのトラブルシューティングやらを少しまとめてみました react-native-cli: 2.0.1 react-native: 0.44.2 xcode: 8.3.2 react-native run-iosでこけた どきどきわくわく、初の起動コマンド！ だが、しかし、、、、 port8081が使えないために落ちる こんなエラーが吐かれる ** BUILD FAILED ** The following build commands failed: PhaseScriptExecution Start\ Packager ${PROJECT_
React Nativeとは何なのか - Qiita
改めて、React Nativeについて書いていきたいと思います。 React Nativeとは何か？ ReactはFacebookが開発したJavaScriptのフレームワークであり、React Nativeはそれをモバイルで使えるようにしたものである。 React Nativeを使用することでネイティブに描画されるiOSとAndroidのアプリを作ることができる。１つのコードで、両方のプラットフォームで動くものが作れる。さらに、JavaやObjective-Cのライブラリを自分で書いてReact Native自体を拡張することもできる。WebでReactを使っているなら、ターゲットがモバイルに代わるだけなので簡単に使い始めることができる。 React同様、React NativeもJavaScriptと、JSXと呼ばれるXMLライクなマークアップを使って記述される。内部では、ネイティブ
無料で簡単にワイヤーフレームやフローチャートを作成できるWebサービス「Whimsical」を使ってみた！ - paiza times
どうも、まさとらん（@0310lan）です！ 今回は、ブラウザ上から誰でも効率よくワイヤーフレームやフローチャートを作成できる無料のWebサービスをご紹介します！ 可能な限り短時間で簡単に作成できるように工夫されているのが大きな特徴で、初めての人でも美しいワイヤーフレームを作って公開することが可能です。 【 Whimsical 】 ■「Whimsical」の使い方 それでは、実際に「Whimsical」を使いながらどのようなサービスなのかを見ていきましょう！ まずは、サイトにアクセスして「サインアップ」ボタンをクリックします。 （※Googleアカウントでも登録可能です） 無料のユーザー登録フォームが表示されるので、ユーザー名・メールアドレス・パスワードを入力しましょう！ すると、すぐに自分専用の「マイページ」が表示されます！ この画面から、新規にワイヤーフレームやフローチャートなどを作成
React Nativeアプリをリリースするまでに最低限必要なiOS/AndroidのTodo - PIYO - Tech & Life -
React Nativeでアプリを書くことができたとしても、アプリをリリースする先はiOSのApp Storeであったり、Google Playだったりします。リリースするためには各プラットフォームでの作法や、コード上でやっておかないと行けないことが色々とあります。 React Nativeで両プラットフォームに対応しようとすると、この辺の手続きに関しても両プラットフォームのことを知っておかないといけないため、なかなかハードです。僕の場合はiOSネイティブから入っているのでiOS側は勝手知ったる作業なのですが、Androidのほうは手探りでした。 ということで、自分のための頭の整理も兼ねて箇条書きレベルでまとめておこうかなと思いました（まとめたところで、プラットフォーム側のアップデートとかでよく変わっちゃうんですけどね）。 ネイティブアプリ未経験の人が、React Nativeでアプリを作
新しくなったMaterial Designのココに注目！最近のUI要素・コンポーネントのデザインや使い方がしっかり学べる
先日開催されたGoogle I/O 2018で、Material Designは大きくアップデートされました。 ロードマップによると、今回のアップデートを皮切りに、これからも毎月リリースされ、Material Designはその表現力を高める機能を充実していくとのことです。 Material Design Material DesignはGoogleが提供するオープンソースのデザインシステムで、Webサイトやスマホアプリのデザインから実装まで幅広く利用できます。 Google I/O 2018でアナウンスされた大きなポイントは、3点。 Material Themingはテーマを使用して、開発者がプロダクト全体でユニークなスタイルを一貫して体系的に表現できるようになりました。 ワークフローを効率化する3つのツールがリリースされました。 Material Theme Editor, Mater
iOSもAndroidも同時に開発できる！クロスプラットフォーム開発ツール6個
異なるプラットフォームで同じ仕様のものを動かすことができるクロスプラットフォーム開発。フリーランスとして活動しているシステムエンジニアなら、最近のトレンドでもあり、効率的に開発ができるクロスプラットフォーム開発環境に対して魅力を感じているかと思います。 またC#、C++を得意としているエンジニアにとっては案件の幅が広がるため、ぜひ使ってみたいと考えている方も多いでしょう。 今回はクロスプラットフォーム開発ツールを選ぶメリットや、スピーディな開発が可能なツールを6つご紹介します。 クロスプラットフォームとは？ まず、クロスプラットフォームとはどういうものか、そしてどのようなメリットがあるのかについて基本をおさらいしておきましょう。 通常、例えばWindowsとMacのように異なるOS（あるいは機械）上で動くプログラム開発には、それぞれに対応したツールで個別に開発をおこなう必要があります。近年
「AndroidはiOSと同じデザインで！」と言われたときの対応案 - Qiita
はじめに 「AndroidはiOSと同じデザインで！」と言われてどう実装しようか悩んでる方向けの記事です。 Androidアプリを作るなら当然マテリアルデザインガイドラインに合わせて1から画面設計するのが最高なんですが、そうはいかないことが経験上多いので対応案をざっくりまとめました。 諸注意 これは「iOSとAndroidのUI対応一覧」ではありません。 iOSとAndroidで同じような見た目のUI部品でも作られた経緯や目的は違うので、比較して置き換えるようなことは基本的にできないと思います。 とはいえなんの指標もないと辛いので、ここでは「iOSのこのUIをAndroidで代用できるのはこれかもね」くらいのニュアンスで列挙しています。 必ずしもどのアプリにも言えるようなことではないので、あくまでたたき台と思ってください。 「なぜAndroidらしくする必要があるのか」についてはこ
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
MS、開発ツールを集約した「Microsoft Game Stack」発表―Xbox LiveがiOS/Android対応へ | Game*Spark - 国内・海外ゲーム情報サイト
