googleの翻訳APIをrailsで実行する方法

はじめに

googleの翻訳APIをrailsで実行する方法です。
APIキーを使えばjs側でも実行できますが、そうするとAPIキーがユーザーに漏れてしまうので、Railsなどのサーバーを経由するようにしましょう。

jsのコード

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
async translate(text) {
const url = '/translate';
try {
const response = await axios.post(url, {
text: text,
});

const data = response.data;
if (data.error) {
console.error('Error:', data.error);
return '';
} else {
return data.translation_text;
}
} catch (error) {
console.error('Error:', error.message);
return '';
}
},

Rails

gemインストール

Gemfileに以下の行を追加する

1
gem 'google-cloud-translate-v2'

ターミナルで以下のコマンドを実行する

1
bundle install

認証の設定

APIキーを利用することもできるのですが、gemライブラリを利用する場合はAPIキーではなく認証情報を利用する方法が便利です。

  1. GCPを開く
  2. API Managerを開く
  3. 認証情報を開く
  4. 対象のサービスアカウントをクリックもしくは新しく追加
  5. 「キー」タブからjsonをダウンロード
  6. プロジェクト直下にsecret_keyフォルダを生成
  7. secret_keyフォルダにjsonを配置する

参考
https://github.com/googleapis/google-cloud-ruby/blob/main/google-cloud-translate-v2/AUTHENTICATION.md

ルーティング

routes.rb

1
2
3
Rails.application.routes.draw do
post 'translate', to: 'google_api/translation#translate'
end

controllerのコード

  1. controllersフォルダの直下にgoogle_apiフォルダを作成する
  2. google_apiフォルダにtranslation_controller.rbファイルを作成する
1
2
3
4
5
6
7
8
9
10
11
12
13
require 'google/cloud/translate/v2'

class GoogleApi::TranslationController < ApplicationController
def translate
ENV["TRANSLATE_PROJECT"] = "hoge-project"
ENV["TRANSLATE_CREDENTIALS"] = "secret_key/hoge.json"
client = Google::Cloud::Translate::V2.new
translation = client.translate text, to: 'en'
render json: { translation: translation.text }
rescue Google::Cloud::Error => e
render json: { error: e.message }, status: :internal_server_error
end
end

【JavaScript】base64の画像をimgタグにセットする方法

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
async setImageToInput(base64Image, inputElement) {
// Base64形式の画像を<img>要素にセット
const img = document.createElement('img');
img.src = base64Image;

// 画像の読み込みを待つ
await new Promise((resolve) => img.onload = resolve);

// <img>要素の画像を<canvas>要素に描画
const canvas = document.createElement('canvas');
canvas.width = img.width;
canvas.height = img.height;
const ctx = canvas.getContext('2d');
ctx.drawImage(img, 0, 0);

// <canvas>要素の画像をBlobオブジェクトに変換
const blob = await new Promise((resolve) => canvas.toBlob(resolve));

// BlobオブジェクトをFileオブジェクトに変換
const file = new File([blob], 'image.jpg', {type: blob.type});

// FileオブジェクトをDataTransferオブジェクトに追加
const dataTransfer = new DataTransfer();
dataTransfer.items.add(file);

// DataTransferオブジェクトをinput要素のfilesプロパティにセット
inputElement.files = dataTransfer.files;

// changeイベントを明示的にトリガーする
inputElement.dispatchEvent(new Event('change'));
},

// input
const base64Image = document.getElementById(imgId).src;
const inputElement = document.getElementById('item_image');
this.setImageToInput(base64Image, inputElement).then(r =>
// セットした後の処理
);

ChromeDriverのバージョンエラー

エラー

1
2
session not created: This version of ChromeDriver only supports Chrome version 94
Current browser version is 96.0.4664.55 with binary path /Applications/Google Chrome.app/Contents/MacOS/Google Chrome

原因

ブラウザのバージョンを上げたので、合わせてchromeDriverのバージョンを上げないといけないっぽい

解決策

1
brew upgrade chromeDriver

【mitmproxy】スマホ端末のネットワーク通信内容をパソコンで監視する方法

公式ページ
https://mitmproxy.org/

Macにmitmproxyをインストール

1
brew install mitmproxy

MacとAndroidで同じWi-fiに接続する

MacのWi-fiのIPアドレスを確認する
リンゴマーク>システム設定>ネットワーク>Wi-fi>詳細>TCP/IP>IPアドレス

Macで監視アプリを起動

1
mitmweb --web-port 10081 --listen-port 10080

Androidの設定>ネットワークとインターネット>対象のWi-fiの設定>プロキシを手動に変更する

  • プロキシのホスト名:MacのWi-fiのIPアドレス
  • プロキシポート:10080

Androidでhttp://mitm.it/にアクセスする
Androidの証明書をダウンロードする
設定>セキュリティ>詳細設定>暗号化と認証情報>証明書のインストール>CA証明書 から証明書をインストールする

Macでhttp://127.0.0.1:10081を開くとAndroidで通信した内容が表示される

Androidアプリを開発している場合はその設定も必要

AndroidManifest.xmlにnetworkSecurityConfigの行を追加する

1
2
3
<application
android:name=".Hoge"
android:networkSecurityConfig = "@xml/network_security_config">

app/src/main/res/xml/network_security_config.xmlを作成する

1
2
3
4
5
6
7
<network-security-config>
<debug-overrides>
<trust-anchors>
<certificates src="user" />
</trust-anchors>
</debug-overrides>
</network-security-config>

参考
iOS 14 端末での mitmproxy 設定方法
AFNetworkingのリクエストでCookieを扱う方法
MITMProxy - Set up Android Devices

【RSpec】current_companyのメソッドで特定の値を返す

1
2
3
4
before do
company.created_at = Time.local(2022, 12, 02, 0, 0, 0)
allow_any_instance_of(HogeController).to receive(:current_company).and_return(company)
end

いつもモックやスタブではallow(hoge).to receive(:fuga).and_return(piyo)の書き方でやってたので、それがうまく効かなくてハマりました。。

以上です。

【Android】ZonedDateTime型のモック

ZonedDateTime型のモックの作成方法

1
2
3
import org.threeten.bp.ZonedDateTime

every { user.contractedAt } returns ZonedDateTime.parse("2022-07-13T09:00:00Z")

以上


余談だが、最初は以下のような書き方をしようとして、

1
every { user.contractedAt } returns ZonedDateTime.of(2022, 7, 13, 0, 0, 0, 0, ZoneId.of("Asia/Tokyo"));

io.mockk.MockKException: no answer found for: ZoneIdのエラーが出て詰んだ。

Privacy Policy of Poker Action Counter

Privacy Policy

reon777 built the Poker Action Counter app as a Freemium app. This SERVICE is provided by reon777 at no cost and is intended for use as is.

This page is used to inform visitors regarding my policies with the collection, use, and disclosure of Personal Information if anyone decided to use my Service.

If you choose to use my Service, then you agree to the collection and use of information in relation to this policy. The Personal Information that I collect is used for providing and improving the Service. I will not use or share your information with anyone except as described in this Privacy Policy.

The terms used in this Privacy Policy have the same meanings as in our Terms and Conditions, which are accessible at Poker Action Counter unless otherwise defined in this Privacy Policy.

Information Collection and Use

For a better experience, while using our Service, I may require you to provide us with certain personally identifiable information. The information that I request will be retained on your device and is not collected by me in any way.

The app does use third-party services that may collect information used to identify you.

Link to the privacy policy of third-party service providers used by the app

Log Data

I want to inform you that whenever you use my Service, in a case of an error in the app I collect data and information (through third-party products) on your phone called Log Data. This Log Data may include information such as your device Internet Protocol (“IP”) address, device name, operating system version, the configuration of the app when utilizing my Service, the time and date of your use of the Service, and other statistics.

Cookies

Cookies are files with a small amount of data that are commonly used as anonymous unique identifiers. These are sent to your browser from the websites that you visit and are stored on your device’s internal memory.

This Service does not use these “cookies” explicitly. However, the app may use third-party code and libraries that use “cookies” to collect information and improve their services. You have the option to either accept or refuse these cookies and know when a cookie is being sent to your device. If you choose to refuse our cookies, you may not be able to use some portions of this Service.

Service Providers

I may employ third-party companies and individuals due to the following reasons:

  • To facilitate our Service;
  • To provide the Service on our behalf;
  • To perform Service-related services; or
  • To assist us in analyzing how our Service is used.

I want to inform users of this Service that these third parties have access to their Personal Information. The reason is to perform the tasks assigned to them on our behalf. However, they are obligated not to disclose or use the information for any other purpose.

Security

I value your trust in providing us your Personal Information, thus we are striving to use commercially acceptable means of protecting it. But remember that no method of transmission over the internet, or method of electronic storage is 100% secure and reliable, and I cannot guarantee its absolute security.

Links to Other Sites

This Service may contain links to other sites. If you click on a third-party link, you will be directed to that site. Note that these external sites are not operated by me. Therefore, I strongly advise you to review the Privacy Policy of these websites. I have no control over and assume no responsibility for the content, privacy policies, or practices of any third-party sites or services.

Children’s Privacy

These Services do not address anyone under the age of 13. I do not knowingly collect personally identifiable information from children under 13 years of age. In the case I discover that a child under 13 has provided me with personal information, I immediately delete this from our servers. If you are a parent or guardian and you are aware that your child has provided us with personal information, please contact me so that I will be able to do the necessary actions.

Changes to This Privacy Policy

I may update our Privacy Policy from time to time. Thus, you are advised to review this page periodically for any changes. I will notify you of any changes by posting the new Privacy Policy on this page.

This policy is effective as of 2022-06-21

Contact Us

If you have any questions or suggestions about my Privacy Policy, do not hesitate to contact me at r.saito1226+pac@gmail.com.

This privacy policy page was created at privacypolicytemplate.net and modified/generated by App Privacy Policy Generator

Androidのボタンに枠線を付ける方法

Androidのボタンに枠線を付ける方法です。
OutlinedButtonを使えば簡単なのですが、そこに気付かずにハマってしまいました。。

hoge.xml

1
2
3
4
5
<com.google.android.material.button.MaterialButton
android:id="@+id/hoge"
android:layout_width="match_parent"
android:layout_height="wrap_content"
style="@style/HogeButton" />

styles.xml

1
2
3
4
5
6
7
8
9
10
11
<style name="HogeButton" parent="Widget.Material3.Button.OutlinedButton">
<item name="android:layout_marginLeft">7dp</item>
<item name="android:layout_marginRight">7dp</item>
<item name="android:paddingTop">17dp</item>
<item name="android:paddingBottom">17dp</item>
<item name="android:textSize">18sp</item>
<item name="android:textStyle">bold</item>
<item name="cornerRadius">3dp</item>
<item name="strokeWidth">2dp</item>
<item name="strokeColor">#EDA844</item>
</style>

【Google Analytics】メールの開封率を測定する方法

これは何

Google Analyticsでメールの開封率を測定する方法です。

前提1

メールを開いた時に発生するイベントを仕込みます。
そのイベントの発生回数と、メール送信回数を使って開封率を算出します。

前提2

メールには通常のテキストとリッチテキストの2種類あります。
リッチテキストではhtmlが書けます。
今回はimgタグにイベントを仕込むので、リッチテキストを使います。

やり方

  1. sample.htmlという名前のファイルを作成します。
  2. 以下をコピペします。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>hoge</title>
</head>
<body>
<div>
<p>
hoge様
</p>

<!-- これが重要! -->
<!-- tidとcidとelの値は各自で変更すること -->
<img src="https://ssl.google-analytics.com/collect?v=1&t=event&tid=hoge&cid=hoge&ec=email&ea=open&el=hoge">

<div>
株式会社hoge<br>
</div>

</body>
</html>
  1. hogeの部分を変更する。
  2. sample.htmlをブラウザで開きます
  3. ブラウザで開いた内容をコピペします
  4. メールに貼り付けます(リッチテキスト状態にしておくこと)

あとは通常通りにメール送信するだけです。
結果はanalyticsからいつも通り確認できます。
elの値でフィルタすると良いと思います。

以上です。

【Android】Activity/Fragment周りのデータ受け渡し方法(Java)

はじめに

Activity/Fragment周りのデータ受け渡しの方法まとめです。
Javaです。

ActivityからActivity

送信元のActivity

1
2
3
4
Intent intent = new Intent(this, ToActivity.class);
intent.putExtra("NAME", "太郎");
startActivity(intent);
finish();

送信先のActivity(ToActivity)

1
2
3
4
5
6
7
@Override
protected void onCreate(final Bundle savedInstanceState) {
super.onCreate(savedInstanceState);

Intent intent = getIntent();
String name = intent.getStringExtra("NAME");
}

ポイントはbundleが不要なところです。

ActivityからFragment

送信元のActivity

1
2
3
4
5
6
7
8
ToFragment fragment = new ToFragment();
Bundle bundle = new Bundle();
bundle.putString("NAME", "太郎");
fragment.setArguments(bundle);
getSupportFragmentManager()
.beginTransaction()
.add(android.R.id.content, fragment)
.commit();

送信先のFragment(ToFragment)

1
2
3
4
5
6
7
8
9
  @Override
public void onResume() {
super.onCreate();

Bundle args = getArguments();
if (args != null) {
String name = args.getString("NAME");
}
}

ポイントはbundleを使うところです。

FragmentからActivity

確認中

FragmentからFragment

確認中

Your browser is out-of-date!

Update your browser to view this website correctly. Update my browser now

×