Posts

Hello Mastodon TwitterよりMastodonの方がよっぽど居心地がいい。 ということでMastodonにより生息するようになったのだが、フォローしたい人もいないければ、フォローしてくれる人もいない。 というのも分散型ということで、Mastodonは検索が弱く、フォローしたい人をうまく探し出せないようだった。 そのため、エンジニアと相互関係になりたいのだが、そもそもフォローしたい人をいまだに見つけ出せずにいる。 ということで、このブログに埋め込むことで、このブログにたどり着いてくれた人（たぶんエンジニア）にフォローをしてもらおうと思い立った。 そこでこのブログにMastodonのタイムラインを埋め込んだ。 手軽にMastodonのタイムラインを埋め込める！ そしてどうせならだれでも使えるようにしようということで、公開することにした。 mastodon-timeline アクセストークン等を使用せず、お手軽にMastodonのタイムラインをWebページに読み込むことができますので、ぜひ使ってみてください。 そしてFediverseで繋がりましょう。

ステルスアフェリエイト広告の規制強化 よくわからないけど、ステルスマーケティングは景品表示法違反ということで、令和5年10月1日から規制されることになるらしい。 ということでPR表記がないアフェリエイト広告（多くの場合PR表記なんてない）も規制の対象になるとのこと。 なので、今後ステレスアフェリエイト広告は撲滅するかもしれないけれど、ニュースに疎いのでそんなことは知らなかった。 知らなかったうえで、アフェリエイト広告に嫌気がさしたので、ブログに埋め込まれたアフェリエイトリンクをチェックするChromeの拡張機能を作ってみた。 アフェリエイト広告に嫌気がさし、Chrome拡張機能開発 アフェリエイト広告を自身もブログでやっていたことがあるので、何も知らずに騙されることはないが、やっていたので、どれがアフェリエイト広告なのか判断がつく。 分かってしまうが結果、世の中アフェリエイト広告だらけという現実に嫌気がさしてきた。 また見分けがつくとは言え、マウスオーバーしないと判断ができない。 なので地雷原を歩くように最新の注意をはらってきた。 まあ、別にアフェリエイト広告を踏んだところでどうでもいいんだけど、なんとなく気になる。 そういった経緯で前述したようにブログに埋め込まれたアフェリエイトリンクをチェックするChromeの拡張機能を作った。 アフェリエイトリンクを赤枠で囲む拡張機能 ブログに埋め込まれたアフェリエイトリンクをチェックするChromeの拡張機能 使用すると、 のようにアフェリエイトリンクが赤枠で囲まれ、リンク文字列の前に💰マークが付く。 これで一目でアフェリエイトリンクが判断でき、快適なブラウザ生活を送れるようになった。

過去にBottom Tabs Navigatorを作成したので、今回は、Stack Navigatorを導入する。 実装に期待する動きは、 タブ移動が可能 タブ移動後に詳細ページへの遷移が可能 上記の通りなので、Bottom Tabs NavigatorとStack Navigatorを併用する必要がある。 その前提で進めていく。 必要なパッケージをインストールする npm install @react-navigation/stack npm install react-native-gesture-handler インストール後、必要なファイルを作成する。 実装していく mkdir src mkdir src/stack touch src/screens/SampleStackScreen.tsx SampleStackScreen.tsxは下記の通りになる。 import React from 'react' import Sample from '../screens/Sample' import { createStackNavigator } from '@react-navigation/stack' import SampleDetail from '../screens/SampleDetail' const Stack = createStackNavigator() const SampleStackScreen = () => { return ( <Stack.Navigator screenOptions={{ headerShown: false }}> <Stack.Screen name="Sample" component={Sample} /> <Stack.Screen name="SampleDetail" component={SampleDetail} /> </Stack....

スマホアプリでよく見るボトムメニューをReact Nativeで導入するには、Bottom Tabs Navigatorというパッケージをインストールする必要がある。 ちなみにナビゲーションには他にもStack Navigatorというものもあり、こちらは一覧画面から詳細画面への遷移等に用いられるらしい。 詳細は↓に引用した。 StackNavigator StackNavigatorは主にはアプリにおける「一覧画面」と「詳細画面」のような関係性がある画面間の遷移の用いられます。特徴として画面が手前に積み重なっていくような挙動をし、iOSの右スワイプ(画面の左端を掴んで右にスワイプ)やAndroidの戻るボタンで1つ前の画面に戻ることができます。 【RN】StackとBottomTabNavigatorを組み合わせたサンプル BottomTabNavigator アプリにおいて機能がいくつかのカテゴリに分かれている場合にBottomTabNavigatorは用いられます。TwitterやFacebookやInstagramなど、多機能なアプリは大概このBottomTabNavigatorで画面制御を行っています。 【RN】StackとBottomTabNavigatorを組み合わせたサンプル 実践していく まずは移動するページが欲しいので、 mkdir src mkdir src/screens touch src/screens/Sample.tsx 適当に作成する。 Sample.tsxは import React from "react"; import { ScrollView, View, Text } from "react-native"; const Sample = () => { return ( <ScrollView> <View> <Text>Sample</Text> </View> </ScrollView> ) } export default Sample; こんな感じになる。 ちなみに、divに相当するものがViewコンポーネントで、pタグに相当するのがTextコンポーネント。そしてScrollViewはコンテンツをスクロールできるようにするもの。 作成したページをApp.tsxで読み込む。 import Sample from './src/screens/Sample' export default function App() { return ( <Sample /> ) } 同様にSample2とかを作成する。...

過去に定義した型から新しい型を生成する TypeScriptで型を定義したのち、その中の一部を使いたくなる時がある。 例えば、Personという型を定義した時、 export interface Person { age: number sex: 'man' | 'woman' bloodType: 'A' | 'B' | 'O' | 'AB' } bloodTypeという型を使用したいという時がある。 そういう時は、 export type BloodType = Person['bloodType'] 上記のように書くことで型を取り出すことができる。 最初から最小で作るの吉？ export interface Age { age: number; } export type Sex = 'man' | 'woman'; export type BloodType = 'A' | 'B' | 'O' | 'AB'; export interface Person { age: Age; sex: Sex; bloodType: BloodType; } そもそも上記のように最小で作っておいた方がいい？ ただ使わないものも多いので、取り出す方が労力が少なく済みそうな気がする。