どうも。どっことです。今回はWebページ上の文字や画像を選択できないようにするCSSについて解説します。
テキストにクリックリスナーを設定した際、そのテキストが選択状態になってしまい、シンプルにダサいです。今回はそんな経緯から、テキストや画像が選択状態にできない設定を紹介します。
設定はシンプルで、該当のテキスト・画像のタグに以下を設定します。
user-select: none;例えば画像に設定する場合はimgタグなので以下となります。
img {
user-select: none;
}簡単ですが、以上です。
class Sample {
Sample();
}class Sample {
final String value;
Sample(this.value);
}class Sample {
final String value;
Sample({this.value = "initial string"});
}
class Sample {
final String? value;
Sample({this.value});
}
何も考えないなら以下をコピペして呼び出す。
static void showDialog(BuildContext context, String title, String content, String positiveButton, String negative,
{VoidCallback? onPositiveButtonPressed, VoidCallback? onNegativeButtonPressed}) {
showDialog<int>(
context: context,
barrierDismissible: true, // キャンセル
builder: (BuildContext context) {
return AlertDialog(
title: Text(title),
content: Text(content),
actions: [
TextButton(child: Text(positiveButton), onPressed: onPositiveButtonPressed),
TextButton(child: Text(negative), onPressed: onNegativeButtonPressed)
]);
});
}
AdMobとFirebase あたりから読み進めたので整理。
広告を表示するためには、Google Mobile Ads SDK を統合するための AdMob 登録アプリが必要。要はアプリをAdMobに登録してねってことかな。
まあ、これといって難しそうなところはなさそう。
強く推奨らしい。AdMobアカウントのダッシュボードページで以下を設定する。
広告を読み込む前になんらかの操作を行う必要がある場合は、必ず Mobile Ads SDKを初期化する前に行ってください。初期化の前に必要なアクションの例を次に示します。欧州経済領域（EEA）のユーザーから同意を得る
ヨーロッパって広告を出す前にユーザから同意を得ないといけないらしい。マジか。そういえば、どこかのサイトにアクセスするたびに「Cookie使うで？ええか？」という警告が出るようになったけど、あれってこれのせいか。スタートガイドとはいえ、こういうアナウンスをしてくれるのは優しいな。
EUユーザに対しては以下のケースで同意を得る必要がある。
Googleではこの義務の遂行をサポートするためのConsent SDKを提供している。（実装が楽できる！うれしい！）Googleが配信する広告は「パーソナライズされている・いない」の２種類がある。
前提としてAdMobアカウント上で、広告技術プロバイダを選択しておく必要がある。
よくわからないメディエーションなるキーワードが出てきた。このへんによると、第三者広告ネットワーク？を使って収益向上を図る仕組みらしい。今度は第三者広告ネットワークが何者か分からないけど、このへんによると「収益性が良さげな広告を選んでくれる広告マネージャー」のことを指しているように見える。
Consent SDKで同意を得る実装方針は２つ
すべての広告技術プロバイダのリストをAdMobから動的に取得し、開発者自身がそれらをユーザに掲示するための実装を行う必要がある。Googleではメディエーションネットワークに関する同意の取得も処理もできない。
アプリ起動時に毎回実施する必要があるとのこと。具体的な同意ステータスの更新処理の実装方法は以下の通り。
Google提供の同意フォームの実装方法。以下のオプションを組み合わせてユーザに掲示できる。
同意テキストを更新する場合はconsentform.htmlの内容を変更する。
過去の同意を変更したり、取り消すことができる必要がある。
すべての広告リクエストにTFUAを設定する必要がある。
EU内外の両方でアプリを簡単にテストできるように、Consent SDKにはデバッグオプションが用意されている。
パーソナライズされていない広告を同意したケースの転送実装
カスタムViewを作ったけど、ダークモードのことをまったく気にしなかったせいで、カスタムViewの背景が真っ白になってしまった。
values-nightフォルダを用意してcolors.xmlを入れるのもいいけど、そこまでしなくても標準の設定で十分なんだよなぁ。じゃあ標準ってどうやればいいんだ？と思って開発者サイト見たら、しっかり書いてあった。
ハードコードした色を削除してください（白を指定した背景色など）。その代わりとして ?android:attr/colorBackground テーマ属性を使用します。
なーんだ。これ使えば楽勝じゃん。
mergeタグってこういう所で融通きかないよね。duplicateParentStateつけないと正しく動作しない問題は解決してくれるけど。さて、となると?android:attr/colorBackgroundをコード上で参照しないといけないけど、どう実装すればいいんだ？
ググったらバリバリ答えが書いてあるページが出てきた。
how to get background color from current theme programmatically
TypedValueを使えば参照できるらしい。というわけで最終的に実装した形がこれ
typedValue = TypedValue()
context.theme.resolveAttribute(android.R.attr.colorBackground, typedValue, true)
setBackgroundColor(typedValue.data)全然ちょろかった。
どうも。どっことです。情報取得する処理を紹介します。今回はJavascriptで情報取得する実装方法です。
XMLHttpRequestオブジェクトを作る// 1.XMLHttpRequestの生成
var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function () {
// 3.取得した時の制御
if (xhr.readyState == 4) {
// 取得成功
}
};
// 2.取得URL・メソッドの設定
xhr.open("GET", "http://www.example.org/example.txt");
// 4.通信開始メソッドをコール
xhr.send();
この辺は、ネイティブアブリを作るのと同じ感覚ですね。
ボタンをタップしたらポップアップを表示させたいので実装方法を調べた。
モーダル表示用のdivをbodyタグにいれる＋不要になったら捨てる。
<div id="modal-view" class="modal-background">
<div class="modal"/>
</div>不要になったら以下で捨てる。
var view = document.getElementById('modal-view');
document.body.removeChild(view);どうも。どっことです。今回は、Bloggerにコードを載せるためのシンタックスハイライトの設定方法を解説していきます。
シンタックスハイライト：highlight.js
<!-- syntax highlight-->
<link href='//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/styles/default.min.css' rel='stylesheet'/>
<style>code{font-family:Menlo,Consolas,Courier,monospace;color:#333;background:#f8f8f8};</style>
<style>kbd{padding:.1em .6em;border:1px solid rgba(63,63,63,0.25);-webkit-box-shadow:0 1px 0 rgba(63,63,63,0.25);box-shadow:0 1px 0 rgba(63,63,63,0.25);font-size:.7em;font-family:sans-serif;background-color:#fff;color:#333;border-radius:3px;display:inline-block;margin:0 .1em;white-space:nowrap}</style>
<script src='//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/highlight.min.js'/>
<script src='//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/languages/awk.min.js'/>
<script src='//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/languages/erlang.min.js'/>
<script src='//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/languages/erlang-repl.min.js'/>
<script src='//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/languages/go.min.js'/>
<script src='//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/languages/ldif.min.js'/>
<script src='//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/languages/scheme.min.js'/>
<script src='//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/languages/yaml.min.js'/>
<script>hljs.initHighlightingOnLoad();</script>ただしハマりポイントとして、リンクタグやスクリプトタグはエンドタグを別に書かないと、だいたい正しく動作しない。つまり、
<link href="..." rel="..."/>ではなくて
<link href="..." rel="..."></link>こう書く。スクリプトも同様。
記事内のコード部分を
<pre><code></code></pre>で囲って記載する。これで書いたら、いったん動作確認。
default.min.css
の部分を変えると、スタイルを変えられるとのこと。ハイライトのデモページ、スタイル一覧はGitHubのコードを参照して、draculaに変えることにした。
default.min.cssを
dracula.min.cssに変えて動作確認。ちなみに、dracula.cssでは動作しなかった。
ユーザにローカルの画像を選択させてWebページ上に反映させたかったので調べた。
<input type="file" id="myImage" accept="image/*">
<img id="preview">$('#myImage').on('change', function (e) {
var reader = new FileReader();
reader.onload = function (e) {
$("#preview").attr('src', e.target.result);
}
reader.readAsDataURL(e.target.files[0]);
});
どうも。どっことです。今回は、Reactでの画面遷移に関する実装について備忘録を載せたいと思います。
画面間で遷移に伴いパラメータやデータを遷移先に渡したいことは頻繁に発生すると思います。例えばコンテンツの一覧画面からコンテンツをクリックしたときには、どのコンテンツがタップされたかを次の画面に渡してあげる、などですね。複数の画面を持つシステムを実装する上で必要不可欠な処理になるので、ぜひ覚えておきたいところです。
必要な実装は以下の3点です。
それぞれ見ていきましょう。
/secondpage のページに遷移するようにします。handleClick(){
this.props.history.push('/secondpage')
}<button onClick={() => this.handleClick()}>画面遷移</button><route exact={true} path='/secondpage' component={SecondPage} />/を一番下にしておかないと/secondpageに遷移しても、ルート"/"のページが表示されることに注意が必要です。