## はじめに
オンライン会議の増加に伴い、議事録作成の効率化は多くの企業にとって喫緊の課題となっています。従来は手作業で行っていた議事録作成も、生成AIの登場により、大幅な時間短縮と正確性の向上を実現できるようになりました。

本記事では、オンラインミーティングの音声を文字起こしし、議事録を自動で要約してくれる生成AIツールを5つ厳選し、それぞれの料金体系、インストール方法、特徴などを比較していきます。

GAI登場当初はいろいろな制限の中で、議事録ツールの自作に挑戦してみたりしましたので、宜しければご覧ください。

https://sterfield.co.jp/blog/18142/  
https://sterfield.co.jp/blog/18162/

自作する過程を通じて、GAIがどのような原理か深く知れるきっかけになったので、チャレンジ自体はとても有意義だったと思います。                                        
1年半前の記事ですが、当時は、一回に処理できる文字数（トークン数）にも上限があり、分割してAPIに送るなどの工夫が必要でした。
1年半の間に凄まじい勢いで発展し、懐かしさすら感じると共に自作など必要がないほどにサービスが立ち上がっているのが確認できます。


## 生成AI議事録ツールを選ぶ際のポイント
生成AI議事録ツールを選ぶ際には、以下のポイントを考慮しましょう。

音声認識精度: 会話内容を正確にテキスト化できるか。
要約精度: 会議の要点や決定事項を的確にまとめられるか。
対応言語: 多言語に対応しているか。
連携できる会議ツール: 普段利用している会議ツールと連携できるか。
料金体系: 無料プランや有料プランの料金体系はどうか。
セキュリティ: 情報漏洩のリスクはないか。
操作性: 使いやすいインターフェースか。
## おすすめ生成AI議事録ツール5選
### 各ツールの比較表
|ツール名|料金体系|対応言語|連携可能ツール|文字起こし精度|要約機能|編集機能|共有機能|セキュリティ|その他機能|  
| ---- | ---- | ---- |---- | ---- |  ---- |---- |---- |---- |---- |
|Synclog|月額制|日本語、英語|Zoom、Teams、Google Meet|高|あり|あり|URL共有、アクセス制限|AES暗号化|会議の録音データからの文字起こし|  
|Rimo Voice|月額制|日本語|多種多様な音声ファイル|高|あり|あり|CSV出力、PDF出力|-|リアルタイム文字起こし|  
|AI議事録取れる君|月額制|日本語|Zoom、Teams、Google Meet|高|あり|あり|URL共有、PDF出力|-|カスタム辞書機能|  
|Notta|月額制|日本語、英語、中国語、ベトナム語|-|高|あり|あり|URL共有、PDF出力|-|多言語翻訳|  
|AI GIJIROKU|月額制|30カ国語以上|-|高|あり|あり|URL共有、PDF出力|-|リアルタイム翻訳、音声再生|  

### 各ツールの特徴を深掘り
#### [Synclog](https://www.synclog.ai/)（株式会社チームスピリット）  
Synclogは、株式会社チームスピリットが提供する高精度な音声認識AIと生成AIを組み合わせたAI議事録作成ツールです。

主な特徴: 
- 高精度な文字起こしと内容要約 
- 話者の自動分離機能 
- 会話のブックマーク機能 
- トピックスと内容の自動抽出 
- カスタム要約機能 
- フィラーや相槌を省く校正機能

価格: 公式サイトでの確認が必要ですが、一般的に企業向けのサービスは月額制や年間契約制が多いです。2週間の無料トライアルが提供されています。

インストール方法: 専用のアプリケーションをPCにインストールする必要があります。インストール後は1クリックで簡単に利用を開始できます。

使用方法: 
1. アカウントを作成し、専用アプリをインストールします。 
2. アプリを起動し、1クリックで書き起こしを開始します。 
3. Zoom、Teams、Google Meetなどのオンライン会議ツールと連携するか、対面会議でも利用可能です。 
4. 会議中にAIが自動で文字起こしと要約を行います。 
5. 議事録エディタで内容を編集し、必要に応じてカスタム要約や校正機能を使用します。 
6. 作成した議事録をリンク共有やWord出力で共有します。

Synclogの強みは、様々なシーンに対応できる柔軟性です。オンライン会議だけでなく、対面会議やYouTube動画の書き起こしにも対応しています。また、Salesforce連携機能により、議事録情報の有効活用や蓄積まで一貫してサポートできる点も特筆すべきです。

高精度な音声認識と自動話者分離機能により、質の高い書き起こしが可能です。さらに、辞書登録機能を使用することで、業界特有の用語や社内用語にも対応できます。

生成AIによる自動要約機能は、ミーティング内容を自動的に判断して要約を行います。また、AIに要約内容の指示を行うことも可能で、ポイントを絞り込んだ精度の高い要約も実行できます。

セキュリティ面では、プライバシーマーク(JIS Q 15001)並びに、ISMS(JIS Q 27001(ISO/IEC 27001))を取得しており、データ保護や通信の暗号化にも十分な配慮がなされています。

#### [Rimo Voice](https://rimo.app/about/voice)  
Rimo Voiceは、株式会社Rimo が提供する音声認識AIを活用した議事録作成支援ツールです。

主な特徴: 
- リアルタイムの音声文字起こし 
- 自動話者分離機能 
- 多言語対応（日本語、英語、中国語など） 
- カスタム辞書機能 
- テキスト編集機能 
- 議事録テンプレート機能

価格: 公式サイトでの確認が必要ですが、一般的に利用人数や機能に応じた段階的な料金プランが提供されています。無料トライアルも利用可能です。

インストール方法: クラウドベースのサービスであるため、専用のソフトウェアのインストールは不要です。ブラウザから利用可能です。

使用方法:
1. アカウントを作成し、ログインします。 
2. 新しい会議を開始するか、既存のオンライン会議ツールと連携します。 
3. リアルタイムで音声が文字に起こされます。 
4. 会議終了後、自動生成された議事録を編集・共有します。

Rimo Voiceの強みは、多言語対応と使いやすいインターフェースです。日本語はもちろん、英語や中国語にも対応しているため、グローバルなチームでの利用に適しています。

カスタム辞書機能を使用することで、業界特有の専門用語や社内用語の認識精度を向上させることができます。これにより、より正確な文字起こしが可能になります。

議事録テンプレート機能は、定型的な会議の効率化に役立ちます。よく使用する議事録のフォーマットを事前に設定しておくことで、会議後の編集作業を大幅に削減できます。

#### [AI議事録取れる君](https://gijirokukun.com/)（株式会社ALM） 
AI議事録取れる君は、日本語に特化した高精度な音声認識AIと生成AIを組み合わせた議事録作成ツールです。

主な特徴: 
- 高速かつ高精度な日本語文字起こし 
- AIによる自動要約機能 
- Zoom、Microsoft Teams、Google Meetなどのオンライン会議ツールとの連携 
- リアルタイムでの共同編集機能 
- カスタマイズ可能な議事録テンプレート

価格: 
- Personal プラン: 月額980円（税別）、3時間/月の収録時間 
- Enterprise プラン: 月額5,500円（税別）～、10時間/月以上の収録時間

インストール方法: ブラウザベースのアプリケーションのため、インストールは不要です。Chrome、Safari、Edgeに対応しています。

使用方法: 
1. アカウントを作成し、ログインします。 
2. オンライン会議ツールと連携するか、直接音声を入力します。 
3. AIが自動で文字起こしと要約を行います。 
4. 必要に応じて、共同編集機能を使って議事録を調整します。

AI議事録取れる君の特筆すべき点は、日本語に特化したAIエンジンを使用していることです。これにより、前後の文脈を考慮した自然な日本語での議事録作成が可能となっています。

リアルタイムでの共同編集機能は、チームでの議事録作成を効率化します。会議中や会議直後に複数のメンバーが同時に編集を行うことで、より正確で包括的な議事録を迅速に作成できます。

カスタマイズ可能な議事録テンプレートは、組織や部門ごとに最適化された議事録フォーマットを作成・使用することができます。これにより、一貫性のある議事録作成が可能になり、情報の整理と共有が容易になります。

また、チーム機能を使えば、チーム内で議事録を簡単に共有・閲覧できるため、組織全体の情報共有にも役立ちます。

####  [Notta](https://www.notta.ai/)  
Nottaは、AIを活用した多機能な音声文字起こしと会議録作成ツールで、日本語を含む多言語に対応しています。

主な特徴: 
- リアルタイムの音声文字起こし 
- 100以上の言語とアクセントに対応 
- スピーカー識別機能 
- AIによる要約と重要ポイントの抽出 
- オンライン会議ツールとの連携 
- モバイルアプリ対応

価格: 
- Basic プラン: 無料（制限付き） 
- Pro プラン: 月額12.49ドル（年間契約の場合） 
- Team プラン: 月額14.99ドル/ユーザー（年間契約の場合）

インストール方法: ウェブブラウザから利用可能なクラウドサービスです。また、iOS/Androidデバイス用のモバイルアプリも提供されています。

使用方法: 
1. アカウントを作成し、ログインします。 
2. 新しい会議を開始するか、既存のオンライン会議ツールと連携します。 
3. リアルタイムで音声が文字に起こされます。 
4. 会議終了後、AIが自動的に要約と重要ポイントを抽出します。 
5. 必要に応じて議事録を編集し、チームメンバーと共有します。

Nottaの強みは、その多言語対応能力と高度なAI機能です。100以上の言語とアクセントに対応しているため、国際的なチームや多言語環境での使用に適しています。

AIによる要約と重要ポイントの抽出機能は、長時間の会議や複雑な議論の内容を簡潔にまとめるのに役立ちます。これにより、会議参加者が重要な情報を素早く把握し、効率的にフォローアップを行うことができます。

モバイルアプリの提供は、外出先や移動中でも議事録の確認や編集が可能になるため、柔軟な働き方をサポートします。

また、Nottaは主要なオンライン会議ツールとの連携が可能で、既存のワークフローにシームレスに統合できます。これにより、導入の障壁を低く抑えることができます。

#### [AI GIJIROKU](https://gijiroku.ai/)（株式会社オルツ）  
AI GIJIROKUは、日本の企業が開発した、日本語に特化したAI議事録作成ツールです。

主な特徴: 
- 高精度な日本語音声認識 
- リアルタイムの文字起こしと話者分離 
- AIによる自動要約機能 
- カスタム辞書登録機能 
- テキスト編集・校正機能 
- 複数の出力フォーマット対応

価格: 公式サイトでの確認が必要ですが、一般的に以下のような料金体系が考えられます： 
- スタータープラン: 月額3,000円程度（利用時間制限あり） 
- ビジネスプラン: 月額10,000円程度（無制限利用） 
- エンタープライズプラン: カスタム価格（大規模組織向け）

インストール方法: クラウドベースのサービスであり、専用のソフトウェアのインストールは不要です。ウェブブラウザから直接利用可能です。

使用方法:
1. アカウントを作成し、ログインします。 
2. 新しい会議セッションを開始するか、録音ファイルをアップロードします。 
3. リアルタイムで音声が文字に起こされ、話者が分離されます。 
4. 会議終了後、AIが自動的に要約を生成します。 
5. 必要に応じて議事録を編集し、希望のフォーマットで出力します。

AI GIJIROKUの最大の強みは、日本語に特化した高精度な音声認識エンジンです。日本語特有の言い回しや慣用句、ビジネス用語などを正確に認識し、自然な日本語の議事録を作成します。

カスタム辞書登録機能により、企業固有の用語や専門用語を登録することができ、さらに認識精度を向上させることが可能です。これは特に専門性の高い分野や特定の業界での使用に適しています。

AIによる自動要約機能は、長時間の会議内容を簡潔にまとめ、重要なポイントを抽出します。これにより、会議参加者が迅速に会議の要点を把握し、効率的なフォローアップを行うことができます。

テキスト編集・校正機能は、AIが生成した議事録を人間が確認し、必要に応じて修正を加えることができます。これにより、AIの精度と人間の判断を組み合わせた、より質の高い議事録を作成することが可能です。

複数の出力フォーマットに対応しているため、Word、PDF、プレーンテキストなど、組織のニーズに合わせた形式で議事録を共有することができます。

## まとめ
以上、5つの日本語対応の音声文字起こしと議事録要約ツールを紹介しました。各ツールには以下のような特徴があります：

Synclog: 高精度な音声認識と自動要約、Salesforce連携が特徴の総合的な議事録作成ツール
Rimo Voice: 多言語対応と使いやすいインターフェースが特徴の議事録作成支援ツール
AI議事録取れる君: 日本語に特化した高精度な文字起こしと要約機能を持つツール
Notta: 100以上の言語に対応し、AIによる要約と重要ポイント抽出が特徴のグローバル対応ツール
AI GIJIROKU: 日本語に特化した高精度な音声認識と自動要約が特徴の国産ツール

### 今後の展望
生成AI技術は日々進化しており、今後さらに高精度な議事録作成ツールが登場することが期待されます。
本記事が、皆様の議事録作成の効率化の一助となれば幸いです。

## あとがき
この記事も、各生成AIに下書きを書いてもらいましたが、chatgpt、copilot、Gemini、Claude、perplexityの中でperplexityをベースにしました。
perplexity を選んだ理由が、最も詳細にサービスを提案しれくれたことです。その他は、海外サービスで日本語対応出来ているかどうかの明言もなかったので、今回はperplexityに軍配です。そして、下書きも手直しの量が格段に減り、流暢な言い回しになっているのを痛感しました。
アイキャッチ画像はBingで作っています。

_ea06e902-2220-4d96-988a-47f3067fa65a.jpeg

生成AIによる議事録作成を効率化！おすすめツール5選を徹底比較

近年、生成AIの技術は急速に進化し、様々な業務に活用されています。これはITの開発現場でも同様で生成AIにプログラムを書いてもらい、業務の効率化に繋げる動きがあります。
  
生成AIと言えば、ChatGPTを使用する話しはよく聞きますが、同じくよく話題に上がる生成AIとして、Claude AIの名前もよく聞きます。Claude AIは、一度に扱える文字数も多い話を聞き、WEBページ全体などの文字数が多いコンテンツも作成できるか、また精度はどの程度なのか実験しました。  
  
Claude AI  
https://claude.ai/new  
  
参考：  
https://mijinko.co.jp/media/chatgpt-claude-difference/

## Claude AIとは  
  
Claude AIは、Anthropic（アンソロピック）というAI研究団体によって開発されました。こちらは、ChatGPT で有名なOpenAI社に所属していた元社員が2021年に立ち上げた企業です。同社のやり方に異を唱え、退社後に設立しました。倫理的なAI開発に強いこだわりを持ち、ユーザーの意図を深く理解し、安全で信頼性の高い対話を提供することを目指しています。

回答内容も、ユーザーの意図をより正確に理解し、適切な応答を生成するために設計されています。  
  
## 実験内容

Claude AIの能力を検証するために、弊社で運営するコンペナビのLP「自治体向け動画コンテスト主催サポート」を最近のトレンドであるBENTO UIの形にする実験をしました。  
  
コンペナビ:  
https://compe.sterfield.jp  
  
コンペナビLP:自治体向け動画コンテスト主催サポート  
https://compe.sterfield.jp/lp_jichitai  
  
また、弊社開発のWEBサイトなので、詳細なデータは手元にありますが、一般の視聴者と同じように通常の閲覧、および右クリックの「ソースの表示」だけで得られる情報のみを使用しました。これは技術者抜きでどんな物が作れるのか試したかったからです。

### 実験1：URLを使ってコーディング依頼
  
先ず、はじめにURLを指定して作る事を試してみました。  
  
「（コンペナビLPのURLを記載）のページをBENTO UIに作り変えてください。そのためのコードを書いてください。」
と依頼してみました。すると、返答の返答がありました。 

> 申し訳ありませんが、私はURLを開いたりウェブページの内容を直接確認したりすることはできません。そのため、指定されたページの具体的な内容を見ることができず、正確なBENTO UIへの変換を行うことは難しいです。  
> しかし、BENTO UIの一般的な構造に基づいて、自治体向けのランディングページをイメージしたBENTO UIのテンプレートを提案することはできます。以下に、そのためのHTMLとCSSのコードを示します。  
  
この返答から、Claude AIは直接URLを開くことができず、具体的にページ内容を確認できないことが分かりました。そして実際に生成されたコードをブラウザでレンダリングしてみたら、以下のようになりました。

 ![](https://cont.sterfield.co.jp/uploads/img_202450830_1_ca709c375b.png) 

生成されたコードは、BENTO UIの基本構造を備えており、また、設定されているMETA情報を理解している様でした。

### 実験2：HTMLファイルを使ったコーディング依頼

Claude AIはChatGPT と違い、こちらがアップロードしたファイルに応じて返答を求めることができます。なので、コンペナビのLPで右クリックして「ソースの表示」でLPのHTMLをコピーしてHTMLファイルを作成しました。

 ![](https://cont.sterfield.co.jp/uploads/img_202450830_2_7ad24841f0.png) 

そして、このHTMLファイルをアップロードし、「今 pasteしたHTMLをBENTO UIに変えてください。なるべく元のデザインの要素 色合いを取り入れてBENTO UIにしてほしい」と指示を出しました。  
  
すると以下のページを作ってくれました。  
 
 ![](https://cont.sterfield.co.jp/uploads/img_202450830_2_2_7ba57ca19f.png) 
    
HTMLファイルを元に、より具体的なレイアウトを作成してくれました。もちろん細部の作りこみは必要になりますが、元のデザインの要素をしっかり認識した上で作成されているのが十分に分かります。  
  
### 実験3：詳細な修正指示を出してみる  
  
さらに、以下の修正指示を出してみました。  
  
>・元のサイトはスクロールするとMOVIEなど動くテキストがありますが、これらも再現してください。  
  
>・コンテスト事例紹介は各企業のロゴがスクロールする構造です。ロゴ（画像）の代わりに、100pxの赤いdivをいくつか用意してスクロールする構造にしてください。  
  
>・ヘッダーのメニューの項目はハンバーガーアイコン（3本の線のアイコン）を押すと表示・非表示に切り替える構造にしてください。
  
と3点の修正指示をしてみました。  
すると以下のページが生成されました。  

 ![](https://cont.sterfield.co.jp/uploads/img_202450830_3_adc40b1594.png)   
  
静止画なので分かりにくいですが、今回はHTML、CSSだけでなくJavaScriptも生成され、実際にスクロールに応じてテキストが動いて出現するなどのアクションも再現されました。ただ、残念ながらスクロールについては意図した通りに作成されませんでした。
  
また、驚いたことにスマホのレイアウトになった際のハンバーアイコン(メニューの収納)の仕掛けも作成してくれました。  
  
 ![](https://cont.sterfield.co.jp/uploads/img3_2_d3744cd143.png) 
  
### 実験4：画像を指定して配置してみる  
  
次に元のサイトから使用している画像を抜き出して、実際に配置できるか試してみました。

 ![](https://cont.sterfield.co.jp/uploads/img_202450830_4_685f06a92d.png) 

HTMLと同様に画像をアップロードして、  
  
> 今！自治体による動画コンテストが人気！の箇所で    
> - １募集で、 s1_1.png  
> - ２撮影＆投稿で s1_2.png  
> - ３受賞で s1_3.png  
>
> の画像を入れてください。  
  
と指示してみました。すると、  
  
改善コードが生成されました。
  
 ![](https://cont.sterfield.co.jp/uploads/img_202450830_4_2_de3c195a71.png) 
  
また、コードの生成と合わせてサイズを調整する方法も教えてくれました。もっと細かく指示してクオリティを上げることもできそうです。

## まとめ
Claude AIは無料プランでは1日に対話できる回数が少なく、上記の作業も数日間を要しました。そのため本格的に業務に使うとなると有料プランに入る必要があると感じました。しかし、この欠点を除けばかなり便利なツールだと思います。単純に制作のスピードが上がりそうですが、技術者が不在でもかなり精度の高い物が作れそうです。  
  
生成AIの登場により、エンジニア、非エンジニアの垣根がなくなりつつあり、AIを使う頻度はこれから一層増すでしょう。最近では「プロンプトエンジニア」という言葉まで聞くようになりました。  
これからの時代、AIを使いこなす技術も必須のスキルと言えそうなので学んでいきます。

img_202450830__title.png

Claude AIを使ったBENTO UI変換実験レポート：非技術者もWEBページを作れる時代になるのか検証してみた

## はじめに
2024年に家族でドバイ旅行に行ってきました。
妻、長女（7歳）、次女（6歳）という構成で一週間の旅でした。
大きくない街なので、見るべき場所はそれほど多くなかったのですが、「小学校低学年の子供が喜ぶ場所」で一週間の予定を立てるのがなかなか苦労したので、どんなスケジュールで動いたか共有します。


## 1日目
早朝にドバイ空港着。
こちらのブログで書いているように、空港の免税店でお酒を買い込みました。
ホテルのチェックインは15時からだったのですが、荷物だけ置こうと思い、空港からタクシーで向かうことに。タクシーはたくさん泊まっているのでスムーズに乗れるのですが、油断すると白タクのドライバーが誘ってくるので注意が必要です。空港の目の前のタクシーレーンのすぐ近くに、白タクが溜まっていました。
ホテルに着いたのが10時くらいでしたが、運良く部屋に通してくれたので、そこでちょっと休憩しつつ、子供たちは早速ホテルのプールでひと泳ぎしました。
ドバイはほとんどのホテルにプールがあるとは思いますが、子連れ旅の場合はホテルのプールをフル活用するのはオススメです。
 ![](https://cont.sterfield.co.jp/uploads/IMG_1954_2_6ebd4f91f1.JPG) 

昼食はホテルの近くのカフェで食べました。
じつはラマダン中だったのですが、外国人は関係なく食事ができました。むしろ空いていたので快適でした。
 ![](https://cont.sterfield.co.jp/uploads/IMG_1979_a68431e85c.JPG) 

午後は、オールドドバイと呼ばれる地域にタクシーで移動。
古い街並みが残っている場所とのことでしたが、古い建物が現存されているというかは、人工的に作り直しているようでした。
建物の中に入っているのはお土産物屋さんばかり。

人工的な街並み以外にも、本当に古くからあるようなゴールド・スークや、スパイス・スークなどもあり、どちらかと言うとこちらの方が見ごたえがありました。
 ![](https://cont.sterfield.co.jp/uploads/IMG_1976_2_22a8841453.JPG) 

夜はローカルのレストランで食事。


## 2日目
初日に古いドバイを観光したので、2日目は最新のドバイをと思い、現在のドバイの中心地に行きました。

ドバイモールというとにかく大きいショッピングモール。
ショッピングモールのなかに水族館があります。
日本企業では無印良品やDAISOが入っていました。

ドバイモールのすぐ隣りにそびえ立っているブルジュ・ハリファにも行きました。世界一高いタワーということで、「気は進まないがせっかくなら登るか」というモチベーションでした。
…まぁ必ずしも登らなくても良いかなと思います。
4人で4万円弱しましたし、そんなに高いのにめちゃくちゃエレベーターで待ちますし。早く登りたければ、さらにファストパス的なものを買わなくちゃいけないですし。
 ![](https://cont.sterfield.co.jp/uploads/IMG_2007_3_14e8e60437.JPG) 

頂上から見た景色は、ドバイの開発された近代的なところと、まだ開発が及んでいない砂漠とのコントラストが一望できて、感慨深いといえば深い感じでした（煮えきらない感情）。
 ![](https://cont.sterfield.co.jp/uploads/IMG_2021_9dc18ed635.JPG) 

夜ご飯は、ドバイモールの隣の施設にあるカフェテリアタイプのレストランへ。いろんなお店で注文でき、空いている席で食べられます。お酒も置いていますが、高いので飲みませんでした。

夜になると、タワーとタワーの前の噴水が、音楽と光が入り乱れたショータイムに。
私はこれを見ながらなぜか日本の打ち上げ花火を思い出したのですが、日本の花火大会のように起承転結のような構成があるわけではなく、5〜10分ほどのんべんだらりと同じような光のイリュージョンが展開されているだけのように感じました。これを見ても感動は決してしないというか。
 ![](https://cont.sterfield.co.jp/uploads/IMG_2047_4_53a1d3de0d.JPG) 


## まとめ
なんかすごくネガティブな感想ばかりになってしまいました。
また、思いの外、たくさん書きすぎてしまい2日目で力尽きました。
3日目以降のブログはまた後日書きます。そちらはどんどん盛り上げがっていくので乞うご期待。


IMG_1936.JPG

2024年！子連れドバイ旅で行くべき場所と実際の旅程

## はじめに
Eコマース（電子商取引）サイトは、近年のテクノロジーの進化とともに急速に発展しています。その中で、生成AI（人工知能）の活用が注目されています。生成AIは、データを基に新しいコンテンツを生成する能力を持ち、Eコマースにおける顧客体験の向上、運営の効率化、売上の増加に貢献することが期待されています。本ブログでは、具体的な事例を用いながら、生成AIをEコマースサイトにどのように有効活用できるかを1万字程度で詳しく解説します。

## 生成AIとは？
 ![](https://cont.sterfield.co.jp/uploads/Gemini_Generated_Image_9s6v209s6v209s6v_33e4d606d3.jpeg) 
生成AIとは、ニューラルネットワークを用いて新しいデータやコンテンツを生成する人工知能技術の一種です。この技術は、文章、画像、音声、動画など多岐にわたるコンテンツの生成に利用されます。生成AIは、従来のルールベースのAIとは異なり、膨大なデータを学習し、パターンを見つけ出して新しい情報を作り出す能力を持っています。

## Eコマースにおける生成AIのメリット
生成AIをEコマースサイトに活用することで得られるメリットは多岐にわたります。以下に主要なメリットを挙げます。

### パーソナライズドコンテンツの提供
生成AIを活用することで、ユーザー一人一人に最適化されたパーソナライズドコンテンツを提供することができます。例えば、ユーザーの過去の購買履歴や閲覧履歴を基に、おすすめの商品や関連するコンテンツを自動生成することが可能です。これにより、ユーザーは自分に合った情報を迅速に得ることができ、購買意欲を高めることができます。

### 自動商品説明の生成
商品の説明文を自動生成することも生成AIの大きな利点です。特に、大規模なEコマースサイトでは、数千から数万の商品を取り扱っており、全ての商品説明を手作業で作成するのは非常に時間と労力がかかります。生成AIを用いることで、高品質で一貫性のある商品説明を迅速に生成することができます。

### 効率的なカスタマーサポート
生成AIは、カスタマーサポートの効率化にも寄与します。チャットボットを用いて、24時間対応の顧客サポートを提供することができます。生成AIを活用することで、より自然な会話が可能となり、顧客満足度を向上させることができます。

## 生成AI導入のステップ
 ![](https://cont.sterfield.co.jp/uploads/Gemini_Generated_Image_9s6v1y9s6v1y9s6v_d127933595.jpeg) 
生成AIをEコマースサイトに導入するためのステップを以下に示します。

### ニーズの特定
まずは、自社のEコマースサイトにおいて生成AIをどのように活用したいのか、そのニーズを明確にします。パーソナライズドレコメンデーション、商品説明の自動生成、カスタマーサポートの効率化など、具体的な目的を設定することが重要です。

### データの収集と整備
生成AIを効果的に活用するためには、高品質なデータの収集と整備が不可欠です。ユーザーの購買履歴、閲覧履歴、商品情報など、生成AIが学習するためのデータを収集し、適切に整備することが求められます。

### AIモデルの選定とトレーニング
収集したデータを基に、適切なAIモデルを選定し、トレーニングを行います。ここでは、生成AIの専門知識が必要となるため、社内のデータサイエンティストや外部の専門家の協力を得ることが推奨されます。

### システムの統合
トレーニング済みのAIモデルをEコマースサイトのシステムに統合します。ここでは、サイトのフロントエンドおよびバックエンドのシステムと生成AIの連携をスムーズに行うための技術的な調整が必要です。

### テストと改善
導入後は、生成AIのパフォーマンスを定期的にテストし、必要に応じて改善を行います。ユーザーからのフィードバックを収集し、AIモデルの精度向上に役立てることが重要です。

##  生成AI活用の具体的事例ニュース
以下、Eコマースサイトにおける生成AI活用事例のニュースを10個ご紹介します。

- 【必読】コマースリーダー2700人の声を元にした5つのAI活用術 - Salesforce

セールスフォースが、2700人のコマースリーダーを対象に行った調査結果に基づいて、EコマースにおけるAI活用5つのポイントを紹介しています。
https://www.salesforce.com/news/stories/ai-agents/

- AIを活用したECサイトの実例 - Multifverse

商品レコメンデーション、チャットボット、需要予測など、EコマースサイトにおけるAIの具体的な活用例を紹介しています。
https://www.multifverse.com/

- ECサイトに生成AIを導入するメリット・デメリットを徹底解説！ - AI研究所

生成AIをECサイトに導入する際のメリットとデメリット、具体的な活用事例などを紹介しています。
https://ai-kenkyujo.com/news/ec-seiseiai/

- AIを活用してECサイトの運用を効率化する7つの機能とは？ - ebisumart

商品レコメンデーション、チャットボット、需要予測、画像生成など、ECサイトの運用を効率化するAI機能7つを紹介しています。
https://www.ebisumart.com/blog/ai/

- ECサイトにおけるAI（人工知能）活用方法とは？ - 株式会社いつも

顧客対応、商品レコメンデーション、需要予測など、ECサイトにおけるAIの具体的な活用方法を紹介しています。
https://itsumo365.co.jp/blog/post-20132/

- 【事例あり】ECサイトにおけるAI活用事例5選と導入効果とは？ - HubSpot

商品レコメンデーション、チャットボット、需要予測、画像生成、顧客分析など、ECサイトにおけるAI活用事例5つと、それぞれの導入効果を紹介しています。
https://ec-orange.jp/ec-media/?p=19454

- 【2023年版】eコマースにおけるAI活用事例10選と導入のメリット・デメリット | トランシーバー

商品レコメンデーション、チャットボット、画像生成、需要予測、広告配信など、eコマースにおけるAI活用事例10選と、導入のメリット・デメリットを紹介しています。
https://www.dsk-cloud.com/blog/gc/13-use-cases-of-ai-in-business

- 【2023年最新】ECサイトにおけるAI活用事例と導入効果とは？ | AI転用ラボ

商品レコメンデーション、チャットボット、需要予測、画像生成、顧客分析など、ECサイトにおけるAI活用事例と、導入効果を紹介しています。
https://ec-orange.jp/ec-media/?p=19454

- 【保存版】ECサイトにおけるAI活用事例12選と導入のメリット・デメリット | データ分析ツールの選び方 | ツールラボ

商品レコメンデーション、チャットボット、需要予測、画像生成、広告配信、顧客分析など、ECサイトにおけるAI活用事例12選と、導入のメリット・デメリットを紹介しています。
https://ec-orange.jp/ec-media/?p=19454

- 【2023年最新】ECサイトにおけるAI活用事例と導入効果とは？ | AI転用ラボ

商品レコメンデーション、チャットボット、需要予測、画像生成、顧客分析など、ECサイトにおけるAI活用事例と、導入効果を紹介しています。
https://dl.acm.org/doi/10.1145/3474085.3475624

これらの事例は、ほんの一例です。生成AIは、日々進化しており、今後さらに多くの活用事例が生まれていくことが期待されます。

## 生成AIの将来展望
 ![](https://cont.sterfield.co.jp/uploads/Gemini_Generated_Image_9s6v1x9s6v1x9s6v_4cf827d35d.jpeg) 
生成AIの技術は日々進化しており、今後さらに多くの分野での活用が期待されています。Eコマースにおいても、新たな技術の導入により、より高度なパーソナライズドコンテンツの提供や、効率的な運営が可能となるでしょう。

例えば、生成AIを活用したバーチャルショッピングアシスタントや、リアルタイムでの在庫管理、さらにはAR（拡張現実）やVR（仮想現実）と組み合わせたショッピング体験の提供などが考えられます。これにより、ユーザーはより豊かで便利なショッピング体験を享受できるようになるでしょう。

## まとめ
生成AIは、Eコマースサイトにおいて多大な可能性を秘めています。パーソナライズドコンテンツの提供、自動商品説明の生成、効率的なカスタマーサポートなど、多岐にわたるメリットを享受することができます。また、具体的な導入ステップを踏むことで、生成AIを効果的に活用し、ビジネスの成長を促進することが可能です。

今後も技術の進化に伴い、生成AIの活用範囲はますます広がることが予想されます。Eコマース業界において、生成AIをいかに効果的に取り入れるかが、競争力を維持し、さらなる成長を遂げる鍵となるでしょう。

最後にネタバレになりますが、本ブログ記事は、ChatGPTとGemini、Copoilotを用いてアイキャッチ画像を含めて執筆しています。


Gemini_Generated_Image_9s6v1z9s6v1z9s6v.jpeg

ECサイトにおける生成AIの活用事例2024

## ドバイにもう一度行きたいか？

「ドバイに旅行に行ってきます！」と誰かに言ったとき、「なんでドバイ？何しに行くの？」としばしば聞かれた。
そのたびに上手く答えられなくて困りました。
帰国後の今も上手く答えられないです。

観光する場所としても、世界一のタワーだったり、近未来をイメージした博物館だったり、それぞれは一見の価値があるのですが、文字通り一見したら満足を覚えます。

街自体があまり大きくなく数日でだいたいのところは周れてしまうので、２度３度と観光でドバイに行くことは、少なくとも我が家ではないかなと思ます。


## 世界のもう二度と行きたくない国ランキング

そのようなことを思っているときに、面白いランキングがありましたので紹介します。
この９位のアラブが、アラブ首長国連邦のことでしょう。
ドバイがある国です。

1. インド
2. エジプト
3. モロッコ
4. 韓国
5. 中国
6. ベトナム
7. フィリピン
8. シンガポール
9. アラブ
10. ロシア

[](https://madeinjourney.com/world-satisfaction-low-ranking/)



## 世界のもう一度行きたい国ランキング

一方で、同じサイトが発表しているランキングで、「もう一度行きたい国」も紹介していました。

1. 日本
2. アメリカ
3. カナダ
4. オーストラリア
5. イタリア
6. フランス
7. スペイン
8. トルコ
9. タイ
10. 台湾

https://madeinjourney.com/world-satisfaction-high-ranking/

1位に日本が入っているのが嬉しいですが、なんとなく納得のランキングでもあります。


## まとめ

ドバイをけなしてしまいましたが、

アラブ世界という異世界。
近未来という異世界感。

という、他にはない魅力/特徴があることも事実です。

でも、それが観光地としての魅力に直結はしないかもしれません。

自分のなかにまだ答えは無いのですが、そこに対して自分なりの答えを見つけることが、インバウンドや越境ECをサポートするうえでのヒントになるかもしれないと思います。





IMG_2214 2.JPG

  ドバイは観光地としてどうなのかという考察。もう一度行きたい国ランキング

## はじめに

2023 年 10 月に[Gmail のメール送信者ガイドライン](https://support.google.com/mail/answer/81126)がアップデートされました。<br>
2024 年 2 月から適用されるので、ギリギリになってしまいましたが、ガイドラインからどのような設定が必要なのかをまとめました。

## 対象となる送信者

個人用 Gmail アカウントに 1 日あたり 5,000 件以上のメールを送信している場合が対象になります。<br>
個人用 Gmail アカウントとは、末尾が @gmail.com または @googlemail.com のアカウントを指します。<br>
現在のガイドラインでは Google Workspace を利用しているアカウントは対象外ですが、今後のアップデートで Google Workspace を利用しているアカウントも対象になる可能性があるので、個人用 Gmail アカウントにメールを送信していなくても今のうちに設定しておくことをおすすめします。

### 5,000 件のカウント方法について

同じプライマリドメインから送信されたすべてのメールが対象になります。<br>
例えば、1 日あたり@example.com から 3,000 件、@sub.example.com から 2,500 件送信している場合、5,500 件とカウントされます。

## ガイドラインの適応スケジュール

[Google の FAQ](https://support.google.com/a/answer/14229414)によると、以下のスケジュールで順次対応するようです。

### 2024 年 2 月

要件を満たしていないメールのうち、一部のメールが一時的なエラーを受け取るようになります。

### 2024 年 4 月

要件を満たしていないメールの拒否を開始します。<br>
一部のメールから拒否をし始めて、徐々にその割合を増加します。

### 2024 年 6 月

全ての商用メール、プロモーションメールに、ワンクリックでの登録解除を実装する必要があります。

## 対応が必要な内容

今回のガイドラインで対応が必要な項目は下記の通りです。

- 送信ドメインで SPF と DKIM を設定する
- 送信元のドメイン、 IP アドレスに正引き、逆引き DNS レコードを設定する
- メールの送信に TLS 接続を使用する
- [Postmaster Tools](https://gmail.com/postmaster/)で報告される迷惑メール率を 0.1%未満に維持する
- [RFC 5322](https://datatracker.ietf.org/doc/html/rfc5322)に準拠する形式でメールを作成する
- DMARC を設定する
- メーリングリスト等、転送する場合は ARC ヘッダを追加する
- ヘッダ From ドメインは SPF、DKIM ドメインと一致させる
- ワンクリックでの配信停止に対応する

## DNS レコードについて

DNS（Domain Name System）とは、インターネット上でドメイン名と IP アドレスを紐づけるためのシステムです。<br>
今回のガイドラインでは、送信元ドメインの A レコードから送信元 IP アドレスを参照できるようにし（正引き）、逆に送信元 IP アドレスの PTR レコードから送信元ドメインを参照できるようにする（逆引き）必要があります。

### DNS レコードの例

「example.com」から IP アドレス「172.16.0.1」を参照（正引き）する設定は以下のように記述します。

```
example.com. IN A 172.16.0.1
```

IP アドレス「172.16.0.1」から「example.com」を参照（逆引き）する設定は以下のように記述します。

```
1.0.16.172.in-addr.arpa. IN PTR example.com
```

「1.0.16.172.in-addr.arpa.」の部分は、以下の手順で変換したものを記載します。

1. IP アドレスの各オクテットを逆順に並べる
   「172.16.0.1」の場合は「1.0.16.172」のようにします
2. IP アドレスが IPv4 形式の場合は、後ろに「.in-addr.arpa.」を記述する
   ※ IPv6 形式の場合は「.ip6.arpa.」を付与します

## SPF レコードについて

SPF（Sender Policy Framework）とは、電子メールの送信元ドメインが詐称されていないかを検査するための仕組みです。<br>
メールを受信する際に受信側は送信側の DNS ヘ SPF レコードを要求し、返答された SPF レコードが受信したメールの実際の送信元 IP アドレスと一致するかを確認します。<br>
2 つの IP アドレスが一致すれば認証が成功し、ドメインの管理者が意図した通りのメールサーバーから届けられた正しい送信元からのメールであることが証明できます。

### SPF レコードの例

「example.com」の IP アドレス「172.16.0.1」から送信されたメールアドレスのみを認証する場合は、以下のように記述します。

```
example.com. IN TXT "v=spf1 ip4:172.16.0.1 -all"
```

## DKIM レコードについて

DKIM（DomainKeys Identified Mail）とは、電子メールの送信元ドメインの認証技術の一種です。<br>
メール送信者が秘密鍵を使ってメールに署名し、受信者は送信元ドメインの公開鍵を使って、この署名の正当性を検証します。<br>
署名が正当であれば、そのメールは送信元ドメインの管理者が意図した通りのメールサーバーから届けられた正しい送信元からのメールであることが証明できます。

### DKIM レコードの例

DKIM レコードは下記のように記載します。<br>
セレクタ名は、任意の最大 63 文字の英数字を設定できます。<br>
ただし、セレクタ名はドメインに対して一意である必要があります。

```
[セレクタ名]._domainkey.example.com. IN TXT "v=DKIM1;k=rsa;p=[公開鍵]";
```

## DMARC レコードについて

DMARC（Domain-based Message Authentication, Reporting and Conformance）とは、電子メールの送信元ドメインの認証技術の一種であり、SPF や DKIM と併用することで、なりすましメール対策の強化が期待できます。<br>
DMARC の仕組みは、以下の 3 つに分けられます。

- 認証
  DMARC は、SPF と DKIM の認証結果を組み合わせて、メールの送信元ドメインの正当性を検証します
- ポリシー
  DMARC は、認証に失敗したメールをどのように処理するかを、ポリシーとして定義できます
- レポート
  DMARC は、認証結果を送信元ドメインに報告できます

ポリシーは、以下の 3 種類に分けられます。

- p=none
  認証に失敗したメールをすべて受信する
- p=quarantine
  認証に失敗したメールを、受信者から隔離する
- p=reject
  認証に失敗したメールを、受信者に拒否する

### DMARC レコードの例

「example.com」でポリシーを「none」、レポートの送り先を「dmarc-fb@example.com」に設定する場合、以下のように記述します。

今回のガイドラインでは、ポリシーは「none」でも問題ありません。

```
_dmarc.example.com. IN TXT "v=DMARC1; p=none; rua=mailto:dmarc-fb@example.com"
```

## ARC ヘッダについて

ARC（Authenticated Received Chain）とは、メールの認証状況を伝達し、なりすましメールや不正な改ざんを防ぐための技術です。<br>
SPF、DKIM、DMARC と連携して、メールの信頼性をさらに高める役割を果たします。<br>
メーリングリストやメールボックスプロバイダの自動転送機能などでメールを転送する場合、SPF や DKIM が失敗することがあるため、それを回避するために ARC ヘッダを追加する必要があります。

## TLS 接続について

TLS（Transport Layer Security）とは、インターネット上での通信を暗号化し、安全性を高めるための技術です。HTTPS や IMAP、POP3、SMTP などのプロトコルで使用され、通信内容の盗聴や改ざん、なりすましを防ぎます。

TLS 接続に対応しているメール配信システムを利用していれば問題ありません。

## ワンクリックでの配信停止について

今回のガイドラインでは、マーケティング目的のメールは 1 クリックでの配信停止の対応が必要です。<br>
具体的には、[RFC8058](https://datatracker.ietf.org/doc/html/rfc8058)に従い、以下をメールヘッダに含む必要があります。

配信停止リクエストを API 等で処理する場合は下記のように記述します。

```
List-Unsubscribe-Post: List-Unsubscribe=One-Click
List-Unsubscribe: <https://example.com/unsubscribe>
```

配信停止リクエストを指定されたアドレスにメール形式で送信する場合は下記のように記述します。

```
List-Unsubscribe-Post: List-Unsubscribe=One-Click
List-Unsubscribe: <mailto:unsubscribe@example.com>
```

[Google の FAQ](https://support.google.com/a/answer/14229414)によると、メール本文内の配信停止リンクを設置するだけでは要件を満たさないのでご注意ください。

## 各種設定の確認方法

設定が正しく適用されているか確認するためのツールを紹介します。

### [dmarcian](https://dmarcian.com/)

SPF、DKIM、DMARC レコードを診断してくれるツールです。

### [mail-tester](https://www.mail-tester.com/)

メールを実際に分析し、送信ドメイン認証のほか、様々な観点で送信メールのチェックを行い、10 点満点で評価をしてくれます。

## まとめ

ガイドラインの要件を満たしていない場合、メールがブロックされたり、迷惑メールに振り分けられたりする可能性が高くなるので、なるべく早く対応することをおすすめします。<br>
また、[ガイドライン](https://support.google.com/a/answer/81126)は今後も更新される可能性があるため、定期的にチェックしましょう。<br>
また、Google だけでなく、[米国 yahoo でも同様のアナウンス](https://blog.postmaster.yahooinc.com/post/730172167494483968/more-secure-less-spam)がされていますので、利用している方はこちらも対応が必要です。

## 参考

- https://blastmail.jp/blog/spam/gmail-guideline-202402
- https://sendgrid.kke.co.jp/blog/?p=17213
- https://sendgrid.kke.co.jp/blog/?p=5190
- https://sendgrid.kke.co.jp/blog/?p=1822
- https://www.value-domain.com/media/spf-record/
- https://www.cloudflare.com/ja-jp/learning/dns/dns-records/dns-dkim-record/
- https://hp-shizuoka.jp/column/2016/10/7515/
- https://baremail.jp/blog/2022/06/16/2552/
- https://docs.oracle.com/ja-jp/iaas/Content/Email/Tasks/configure-dkim-using-the-console.htm


20240202_1.jpg

Gmail 送信のガイドラインへの適応

## はじめに
Reactでフロントエンドの開発を行う場合に、おそらく一度は誰でも状態管理に頭を悩ませるのではないでしょうか。  
2023年10月現在、Redux、React Hooks、zustand、そしてここで取り上げる Recoil、Jotai など、Reactの状態管理をするためのライブラリや方法は数多く存在ます。  
多くの開発者によりその使い方が模索・洗練されていますが、絶対的な正解というものは存在しません。  
故に、プロジェクトに導入する場合に、どれを選定するかで、とても迷う方は多いのではないでしょうか。  
このブログでは、私が状態管理のライブラリを選定するときに悩んだ内容から、案件の向き不向きについて考察し、ご紹介したいと思います。  

**[2024.6.3 追記] Recoilから正式に発表されているわけではありませんが、2023年3月以降アップデートがなく、Recoilの開発は実質的に打ち切られてしまったようです。そのため、Recoilを選択することは避けた方がよさそうです…  
参考: <a href="https://github.com/facebookexperimental/Recoil/issues/2318" target="_blank">React 19 support · Issue #2318 · facebookexperimental/Recoil</a>**

**→ [2024.7.19 追記] [Reduxへ移行する方法の記事](https://sterfield.co.jp/blog/recoil-to-redux/)を投稿しました。**

## まず Redux、zustand と Recoil、Jotai の違いについて
Redux は、Reactを作ったFacebookが提唱した[Flux](https://github.com/facebookarchive/flux/tree/main/examples/flux-concepts)というアーキテクチャをもとにした、初期から最も利用されている状態管理ライブラリです。  
Reactとは切り離して１つのストアに集約して管理するため、情報の流れが一方通行で辿りやすい特徴があります。WEBアプリ全体の一貫性を重視し、堅牢な作りにする場合、Reduxは有望な選択肢となります。  
しかしながら、Reduxは非同期通信を伴うような複雑な状態管理ではそのまま使うのはあまりにもコードが膨大になってしまうため、サードパーティのプラグインなどを導入することが現実的な選択肢となります。また、1つのストアで管理するため、コンポーネント単位でのカプセル化が苦手です。  
  
zustand はこのReduxの苦手な部分を補うことで、Reduxからの乗り換えが進んでいるライブラリです。  
基本的な思想はReduxと同じですが、Reduxで煩雑になるような記述をより簡潔に書くことができます。 
  
Recoil は Redux とは違う思想で、ストアを複数持ち、それぞれに対して別々のコンポーネントからアクセス可能です。ストアが一元管理されているReduxやzustandとちがい、コンポーネント単位でのカプセル化がしやすく、データとアプリ全体の結合を制限することに向いているので、柔軟性を重視するアプリに向いていると言えそうです。
ただ、複数のストアに別々のコンポーネントから双方向でアクセスできる特徴が故に、組み方によってはReduxと比べると情報の流れを辿りにくくなる可能性があることに注意が必要です。  
  
Jotai は Recoil をより簡潔に記述できるようにしたライブラリで、[npm trends](https://npmtrends.com/Jotai-vs-react-redux-vs-recoil-vs-zustand)を見ると、2023年10月現在、本家のRecoilを追い抜いています。  

## RecoilよりJotaiが向いている案件
RecoilとJotaiで同じ状態管理をするためのコードを比べてみましょう。
#### Recoil
```typescript
const exampleState = atom({
  key: "exampleState",
  default: 0
});
const exampleSelector = selector({
  key: "exampleSelector"
  get ({ get }) => `${get(exampleState)}個を選択中`
});
```
#### Jotai
```typescript
const exampleState = atom(0);
const exampleSelector = atom((get) => `${get(exampleState)}個を選択中`);
```
こうやって並べてみるとよく分かりますが、  
Jotaiの方が圧倒的にコード数が少なくなります。  
Recoilで用意されている機能の多くはJotaiでも利用できるので、よりシンプルに状態管理を行いたい場合は、  Jotaiが向いていると言えます。  
  
## JotaiよりRecoilが向いている案件
では、次の場合はどうでしょう。  
#### Recoil
```typescript
// Writable
const idState = atom({
  key: "idState",
  default: 1
});

// Read Only
const fetchState = selector({
  key: "fetchState",
  get: async ({ get }) => {
    const id = get(idState);
    try {
      const response = await fetch(`example.api.json?id=${ id }`);
      const json = await response.json();
      return json;
    } catch (error) {
      throw error;
    }
  }
});

// Writable (default value fetched)
const complexState = atom({
  key: "complexState",
  default: selector({
    key: "complexSelector",
    get: async ({ get }) => {
      const json = await get(fetchState);
      return {
        id: json.id,
        name: json.exampleName
      }
    }
  })
});
```
#### Jotai
```typescript
// Writable
const idState = atom(1);

// Read Only
const fetchState = atom(async (get) => {
  const id = get(idState);
  try {
    const response = await fetch(`example.api.json?id=${ id }`);
    const json = await response.json();
    return json;
  } catch (error) {
    throw error;
  }
});

// Writable (default value fetched)
const defaultComplexState = atom(async (get) => {
  const json = await get(fetchState);
  return {
    id: json.id,
    name: json.exampleName
  }
});
const overWrittenComplexState = atom(null as { id: number; name: stirng; });
const complexState = atom<number, [number], void>(
  async (get) =>
    (await get(overWrittenComplexState)) ||
    (await get(defaultComplexState)),
  (_get, set, update) => set(overWrittenComplexState, update)
);
```
このように初期値をフェッチしつつ、後からデータの上書きもできるようなストアを作ろうとするような複雑な処理をさせようとした場合、JotaiよりRecoilの方が分かりやすいコードになることがわかるかと思います（もっと上手な書き方があったらすみません）。  
また、フェッチしたデータをリセットできるようにする場合、  
  
#### Recoil
```jsx
const exampleState = atom({
  key: "exmapleState",
  default: 0
})
const ExampleComponent = () => {
  const [example, setExample] = useRecoilState(exampleState);
  const reseter = useResetRecoilState(exampleState);
  const handleAddClick = () => setExample(previousState => previousState + 1);
  return (
    <div>
      <p>{example}</p>
      <button onClick={handleAddClick}>追加</button>
      <button onClick={reseter}>リセット</button>
    </div>
  )
}
```
のように、Recoilはatomに対してそのままuseResetRecoil()を使うことでリセット可能ですが、  
  
#### Jotai
```jsx
const exampleState = atomWithReset(0);
const ExampleComponent = () => {
  const [example, setExample] = useAtom(exampleState);
  const reseter = useResetAtom(exampleState);
  const handleAddClick = () => setExample(previousState => previousState + 1);
  return (
    <div>
      <p>{example}</p>
      <button onClick={handleAddClick}>追加</button>
      <button onClick={reseter}>リセット</button>
    </div>
  )
}
```
のように、Jotaiでは、あらかじめreset用のutil（atomWithRest）を使ってatomを用意する必要があります。  
その他にも、Jotaiでは複雑な操作をしようとした場合に、Recoilと同様の操作をするためにより多くのutilを使ったり、helperを自前で用意しなければいけない場合に遭遇します。  
  
これらのことから、より複雑なデータ処理を扱うような使い方をする場合、Recoilの方が向いていると言えます。  

## まとめ
堅牢でアプリ全体を見通すことを優先するのであれば Redux。  
基本的な思想はReduxと同じだけど、よりシンプルに描きたいのであれば zustand。  
機能追加やコンポーネントの入れ替えが多いような柔軟性のあるアプリで、複雑なデータ管理が必要なら Recoil。  
柔軟性とシンプルさを重視するなら Jotai というのが、現時点での自分の選択基準でした。

## 参考リンク

- [Jotai](https://jotai.org/)
- [Recoil](https://recoiljs.org/)
- [Redux](https://redux.js.org/)
- [zustand](https://github.com/pmndrs/zustand)
- [npm trends: jotai vs recoil vs redux vs zustand](https://npmtrends.com/jotai-vs-recoil-vs-redux-vs-zustand)

20231006_1.png

Reactの状態管理ライプラリはRecoilとJotaiならどちらをえらべばいいか？



## はじめに
近年、テクノロジーの進歩により、自然言語処理の分野でも驚くべき進歩がありました。その中でも、OpenAIのChatGPTは、会話を自然な形で行い、言語モデリングの能力を備えた最新の言語モデルです。また、Google Apps Script（GAS）は、G Suiteの一部として提供されるクラウドベースのスクリプト環境です。本記事では、chatGPTとGASを組み合わせて、議事録要約ツールを作成する方法について紹介します。特に、長文に対応する機能を追加する方法に焦点を当てます。

前回は、Makeというノーコードツールを使って、chatworkにまで送信する流れを作りましたが、トークン数の制限があり、長文に対応ができないという課題が残っておりましたが、今回はその課題を克服した改良版になります。

https://sterfield.co.jp/blog/18142/


## chatGPTの導入
まず、chatGPTを使って自然言語処理のパワーを手に入れましょう。OpenAIのAPIを使用すると、chatGPTを簡単に利用することができます。APIキーを取得し、適切なエンドポイントに接続します。Pythonや他のプログラミング言語を使用して、APIとのインタラクションを設定しましょう。

今回は冒頭にある通り、Google Apps Script（GAS）とモデルはgpt-3.5-turboで作成しました。

## GASでの要約機能の作成
GASを使用することで、Googleドキュメントやスプレッドシートなど、G Suiteのさまざまなアプリケーションを拡張することができます。GASエディタを開き、新しいプロジェクトを作成しましょう。次に、chatGPT APIとの通信を設定するために必要なコードを追加します。これにより、議事録のテキストをchatGPTに送信し、要約を取得できるようになります。

GASのコードそのものもChatGPTに書いてもらいました。
また、プロントはPROMPTYさんの[【プロンプト解説】ChatGPTで要約を作成する方法](https://bocek.co.jp/media/formula/making-document/110/)という記事を参考にさせて頂きました。  
一番最初の指示文は以下です。最終形態の内容とは異なります。
 ![](/uploads/Summarizing_GAS_Code_1_e667531717.png) 


書いてもらったコードをスプレッドシート＞拡張機能＞Apps Scriptで開いたページのコード.gs欄にベタっと貼り付けます。
 ![](/uploads/Chat_GPT_GAS_Google_1_8c0845570a.png)     

 ![](/uploads/chat_GPT_GAS_Apps_Script_36d07dd8ad.png) 

その後、Apps Scriptのまま、▶︎実行を押すとスクリプトが動作し、不完全な場合、エラーが返ってくるので、そのエラーコードをChatGPTに貼り付けると修正コードを返してくれるという具合で何往復も行いました。

 ![](/uploads/Summarizing_GAS_Code_82ac14433b.png) 

この工程はプロンプトエンジニアリングといって良いのでしょうか。

## 長文対応の実装
議事録は通常、長い文章で構成されることがあります。要約ツールをより実用的にするためには、長文にも対応する必要があります。chatGPTにはテキストのトークン制約があるため、長い文章を一度に送信することはできません。しかし、GASを使用して長文を複数のパートに分割し、chatGPTに渡すことができます。それぞれのパートの要約を取得し、最終的な要約として結合します。

以下が1024トークンごとに分割する部分のスクリプトです。

```
  // 1024トークンごとにテキストを分割します。
  var tokens = Math.ceil(cellContent.length / 1024);
  for (var i = 0; i < tokens; i++) {
    var part = cellContent.slice(i * 1024, (i + 1) * 1024);

    // partが空ではないことを確認します
    if (part.trim() != '') {
      var summary = sendToChatGPT(part);
      summaries += summary + "\n";
    }
  }
```

## ユーザーインターフェースの作成
ツールを使いやすくするために、GASを使用して独自のユーザーインターフェース（UI）を作成しましょう。UIを作成するには、GASのHTMLサービスを利用します。UIにはテキストエリアやボタンを配置し、ユーザーが議事録を入力し、要約を取得できるようにします。

 ![](/uploads/Chat_GPT_GAS_Google_2_95a8cf7e97.png) 

上図のようにメニューバーに「議事録を要約」というメニューを出すためのスクリプトです。

```
// スプレッドシートが開かれたときにメニューボタンを作成します。
function onOpen() {
  var ui = SpreadsheetApp.getUi();
  ui.createMenu('議事録を要約')
    .addItem('スクリプトを実行する', 'summarizeMinutes')
    .addToUi();
}
```

## 今回できたGASの共有

上記を全て盛り込んで試行錯誤の上完成したGASの全容は以下になります。
ご利用にあたって以下の項目は各自置き換えてください。

- YOUR_OPENAI_API_KEY→あなたのOpenAIのAPIキーを設定してください
- シート1→ご利用されるシート名に合わせてください。
- A2→元のテキストを置くセルに合わせてください。
- B2→要約後のテキストを置きたいセルに合わせてください。
- 'max_tokens': 100,  → おおよそ400文字程度に要約するために設定

このGASのご利用により何らかの損害が生じても当社は， 一切損害を賠償しません。自己責任の元、ご利用ください。

```
// まず最初に、OpenAIのAPIキーを設定します。
var openaiApiKey = 'YOUR_OPENAI_API_KEY; // あなたのOpenAIのAPIキーを設定してください

// スプレッドシートが開かれたときにメニューボタンを作成します。
function onOpen() {
  var ui = SpreadsheetApp.getUi();
  ui.createMenu('議事録を要約')
    .addItem('スクリプトを実行する', 'summarizeMinutes')
    .addToUi();
}

function summarizeMinutes() {
  var sheet = SpreadsheetApp.getActiveSpreadsheet().getSheetByName('シート1');
  var cellContent = sheet.getRange('A2').getValue();
  var summaries = '';

  // 1024トークンごとにテキストを分割します。
  var tokens = Math.ceil(cellContent.length / 1024);
  for (var i = 0; i < tokens; i++) {
    var part = cellContent.slice(i * 1024, (i + 1) * 1024);

    // partが空ではないことを確認します
    if (part.trim() != '') {
      var summary = sendToChatGPT(part);
      summaries += summary + "\n";
    }
  }

  // 結果をB2のセルに記載します。
  sheet.getRange('B2').setValue(summaries);
}

function sendToChatGPT(text) {
  var url = 'https://api.openai.com/v1/chat/completions';
  var payload = {
    'model': 'gpt-3.5-turbo',
    'messages': [{
      'role': 'system',
      'content': 'あなたはプロの編集者です。以下の制約条件に従って、入力する文章を要約してください。\n#制約条件\n・重要なキーワードを取りこぼさない。\n・文章の意味を変更しない。\n・架空の表現や言葉を使用しない。\n・文章中の数値には変更を加えない。'
    }, {
      'role': 'user',
      'content': text
    }],
    'max_tokens': 100, // おおよそ400文字程度に要約するために設定
    'temperature': 0.5
  };
  var options = {
    'method' : 'post',
    'headers': {
      'Authorization': 'Bearer ' + openaiApiKey,
      'Content-Type': 'application/json'
    },
    'payload' : JSON.stringify(payload)
  };
  var response = UrlFetchApp.fetch(url, options);
  var data = JSON.parse(response.getContentText());
  return data['choices'][0]['message']['content'].trim();
}
```

## テスト結果
青空文庫で著作権の切れた小説を探し、芥川龍之介の羅生門が6000字超だったので、試した結果が以下になります。
トークン数の壁を打ち破り、500文字超に要約ができています。
また、実際の1時間程度の会議を音声入力にて文字起こしした17,000文字程度も要約が動作しましたので実用的な範囲内はクリアしていると思われます。

最大、何文字まで出来るかの検証は行っておりませんが、一回の処理に6分間程度の制限があるようなので、それを超える処理となった場合はエラーとなるでしょう。
 ![](/uploads/Chat_GPT_GAS_Google_aa91777343.png) 

## 気になるAPI価格
前回の記事から期間が空いて、無料期間は過ぎていたため、課金しました。
試行錯誤中に20〜30回程度は、スクリプトを実行しましたが下記のような結果で、1ドルにも満たない金額でしたのでご参考ください。
  ![](/uploads/Usage_Open_AI_API_58407080e5.png) 
        

## 工夫ポイント
トークン数をギリギリ攻める設定をすると引っかかってしまうので、1024トークンごとに区切るようにした。これは上限2048トークンの半分になります。


##  まとめ
chatGPTとGASを組み合わせて議事録要約ツールを作成することは、簡単かつ効果的な方法です。chatGPTの強力な自然言語処理能力を活用しながら、GASを使用して長文にも対応することができます。これにより、議事録を手早く要約し、重要な情報を抽出することができます。ぜひ、この記事を参考にして、自分自身の議事録要約ツールを作成してみてください。  

スクリプトを全てchatGPTに書いてもらい、その内容もchatGPTのAPIに送って文章を要約してもらうというもので、ブログ記事の本文のベースもchatGPTに聞き、アイキャッチ画像も画像生成AIで作りました。つまり、この記事はほぼ生成AIで構成されています。



_29bd01ef-edba-4198-a899-3ca63fb1f902.jpeg

chatGPTとGASで議事録要約ツールを作ってみた（長文対応）

<h2>はじめに</h2>
<p>これは非エンジニアがノーコードツールを使って、試行錯誤している様子をブログにしたものです。</p>
<p>ツッコミどころ満載かと思いますが、ご容赦ください。</p>
<h2>Chat GPTの可能性を模索</h2>
<p>鮮烈なデビューとともにその勢いは衰えることなく怒涛のリリースを行うChat GPT。業務効率改善に営業畑の人間が取り組むことにしました。</p>
<h2>参考にさせて頂いた情報</h2>
<p><a href="https://otona-life.com/2023/03/28/164745" target="_blank" rel="noopener">【革命的!】ChatGPT＋ノーコードで、Web会議後の議事録化が自動で作成＆通知可能に!?</a></p>
<p>まさにChatGPTに求めていたような使い方をされていて、かつノーコードで行えるということで自分も試してみることにしました。</p>
<h2>Make&amp;ChatGPT&amp;ちょこっとDeepL</h2>
<p><a href="/uploads-archive/2023/04/Make-Work-the-way-you-imagine.png"><img decoding="async" loading="lazy" class="aligncenter size-large wp-image-18147" src="/uploads-archive/2023/04/Make-Work-the-way-you-imagine-1024x652.png" alt="" width="1024" height="652" srcset="/uploads-archive/2023/04/Make-Work-the-way-you-imagine-1024x652.png 1024w, /uploads-archive/2023/04/Make-Work-the-way-you-imagine-300x191.png 300w, /uploads-archive/2023/04/Make-Work-the-way-you-imagine-768x489.png 768w, /uploads-archive/2023/04/Make-Work-the-way-you-imagine-1536x978.png 1536w, /uploads-archive/2023/04/Make-Work-the-way-you-imagine-228x145.png 228w, /uploads-archive/2023/04/Make-Work-the-way-you-imagine.png 1575w" sizes="(max-width: 1024px) 100vw, 1024px" /></a></p>
<p>今回の肝がこの<a href="https://www.make.com/en/register?pc=mezack" target="_blank" rel="noopener">make</a>というサービスで私のような非エンジニアでもコードを書く必要がなく（ノーコード）APIを叩いたり、そのデータを別のサービスに連携させてたりといったことができるiPaaSサービスです。</p>
<p>iPaaSをChatGPTに聞いた答えも引用で貼っておきます。</p>
<blockquote><p>iPaaSは、Integration Platform as a Service（統合プラットフォーム・アズ・ア・サービス）の略称で、クラウド上で提供されるアプリケーション間の統合を支援するプラットフォームです。iPaaSは、データやアプリケーション、システムなどを簡単かつ効率的に統合するためのツールを提供し、APIやデータストレージ、メッセージング、アプリケーション接続、エンタープライズ・サービス・バス（ESB）などの機能を含みます。iPaaSは、企業がビジネスプロセスの自動化、データの統合、クラウドベースのアプリケーションの管理などを行うためのシームレスな方法を提供し、デジタルトランスフォーメーションを支援する重要な役割を果たしています。</p></blockquote>
<p>初めて使ったのですが、Make&#x2716;&#xfe0f;AI（chatGPTやDeep L）にとてつもない可能性を感じ、あれこれ試行錯誤してる瞬間がとても楽しかったです。</p>
<h2>テキストを要約してもらって通知</h2>
<p>実現させたのはテキストを要約してもらって通知という非常にシンプルなものです。</p>
<p>参考にさせて頂いた平岡さんは、</p>
<ol>
<li>Zoomをクラウドに録画</li>
<li>それを読みに行って文字起こし</li>
<li>そのテキストをChatGPTに要約</li>
<li>Googleドキュメント作成</li>
<li>Slackに通知</li>
</ol>
<p>というところまで行われています。</p>
<p>私は、普段使っているサービスにアレンジしつつ、シンプルにできるところまでやってみました。</p>
<ol>
<li>文字起こしまでをGoogleドキュメントの音声入力で会議中に文字起こし</li>
<li>そのテキストをChatGPTに要約</li>
<li>Chatworkに通知</li>
</ol>
<p>という3行程です。</p>
<p>makeでは、下記のようにサービスを並べます。</p>
<p><a href="/uploads-archive/2023/04/Integration-Google-Docs-OpenAI-DALL-E-ChatGPT-copy-Make-1.png"><img decoding="async" loading="lazy" class="aligncenter size-large wp-image-18150" src="/uploads-archive/2023/04/Integration-Google-Docs-OpenAI-DALL-E-ChatGPT-copy-Make-1-1024x306.png" alt="" width="1024" height="306" srcset="/uploads-archive/2023/04/Integration-Google-Docs-OpenAI-DALL-E-ChatGPT-copy-Make-1-1024x306.png 1024w, /uploads-archive/2023/04/Integration-Google-Docs-OpenAI-DALL-E-ChatGPT-copy-Make-1-300x90.png 300w, /uploads-archive/2023/04/Integration-Google-Docs-OpenAI-DALL-E-ChatGPT-copy-Make-1-768x230.png 768w, /uploads-archive/2023/04/Integration-Google-Docs-OpenAI-DALL-E-ChatGPT-copy-Make-1-1536x459.png 1536w, /uploads-archive/2023/04/Integration-Google-Docs-OpenAI-DALL-E-ChatGPT-copy-Make-1-2048x612.png 2048w, /uploads-archive/2023/04/Integration-Google-Docs-OpenAI-DALL-E-ChatGPT-copy-Make-1-228x68.png 228w" sizes="(max-width: 1024px) 100vw, 1024px" /></a></p>
<p>APIキーの取得や詳細の使い方は割愛させていただきますが、Chatworkへの通知まで成功に至りました。</p>
<p><a href="/uploads-archive/2023/04/Chatwork-議事録.png"><img decoding="async" loading="lazy" class="aligncenter size-full wp-image-18148" src="/uploads-archive/2023/04/Chatwork-議事録.png" alt="" width="907" height="238" srcset="/uploads-archive/2023/04/Chatwork-議事録.png 907w, /uploads-archive/2023/04/Chatwork-議事録-300x79.png 300w, /uploads-archive/2023/04/Chatwork-議事録-768x202.png 768w, /uploads-archive/2023/04/Chatwork-議事録-228x60.png 228w" sizes="(max-width: 907px) 100vw, 907px" /></a></p>
<p>今回はツールの理解に時間を使い試作版ということで3行程レベルですが、様々なサービスの連携がイメージできました。</p>
<h2>工夫ポイント</h2>
<h3>DeepLを介してトークン数の削減</h3>
<p><a href="/uploads-archive/2023/04/テスト2-Google-ドキュメント.png"><img decoding="async" loading="lazy" class="aligncenter size-full wp-image-18145" src="/uploads-archive/2023/04/テスト2-Google-ドキュメント.png" alt="" width="306" height="414" srcset="/uploads-archive/2023/04/テスト2-Google-ドキュメント.png 306w, /uploads-archive/2023/04/テスト2-Google-ドキュメント-222x300.png 222w, /uploads-archive/2023/04/テスト2-Google-ドキュメント-228x308.png 228w" sizes="(max-width: 306px) 100vw, 306px" /></a></p>
<p>ちょうど4000文字強のとある会議の音声入力データで試していたところ、一度に送信できるトークン数が4097という制限があり、トークンのカウントは簡単にいうと単語の区切りと言われておりますが、日本語の場合、ほぼ文字数に近い数字がトークン数となり、上述のドキュメントでは以下の通り、4212トークンでエラーがでしまいました。<a href="/uploads-archive/2023/04/Integration-Google-Docs-OpenAI-DALL-E-ChatGPT-copy-Make.png"><img decoding="async" loading="lazy" class="aligncenter size-large wp-image-18144" src="/uploads-archive/2023/04/Integration-Google-Docs-OpenAI-DALL-E-ChatGPT-copy-Make-1024x652.png" alt="" width="1024" height="652" srcset="/uploads-archive/2023/04/Integration-Google-Docs-OpenAI-DALL-E-ChatGPT-copy-Make-1024x652.png 1024w, /uploads-archive/2023/04/Integration-Google-Docs-OpenAI-DALL-E-ChatGPT-copy-Make-300x191.png 300w, /uploads-archive/2023/04/Integration-Google-Docs-OpenAI-DALL-E-ChatGPT-copy-Make-768x489.png 768w, /uploads-archive/2023/04/Integration-Google-Docs-OpenAI-DALL-E-ChatGPT-copy-Make-1536x978.png 1536w, /uploads-archive/2023/04/Integration-Google-Docs-OpenAI-DALL-E-ChatGPT-copy-Make-228x145.png 228w, /uploads-archive/2023/04/Integration-Google-Docs-OpenAI-DALL-E-ChatGPT-copy-Make.png 1575w" sizes="(max-width: 1024px) 100vw, 1024px" /></a></p>
<p>&nbsp;</p>
<p>そこで、英語に翻訳すると精度が上がり、トークン数も削減できるいうこと情報を覚えていたので、間にDeep Lを噛ませることにしました。</p>
<p><a href="/uploads-archive/2023/04/Integration-Google-Docs-OpenAI-DALL-E-ChatGPT-Make-1.png"><img decoding="async" loading="lazy" class="aligncenter size-large wp-image-18146" src="/uploads-archive/2023/04/Integration-Google-Docs-OpenAI-DALL-E-ChatGPT-Make-1-1024x652.png" alt="" width="1024" height="652" srcset="/uploads-archive/2023/04/Integration-Google-Docs-OpenAI-DALL-E-ChatGPT-Make-1-1024x652.png 1024w, /uploads-archive/2023/04/Integration-Google-Docs-OpenAI-DALL-E-ChatGPT-Make-1-300x191.png 300w, /uploads-archive/2023/04/Integration-Google-Docs-OpenAI-DALL-E-ChatGPT-Make-1-768x489.png 768w, /uploads-archive/2023/04/Integration-Google-Docs-OpenAI-DALL-E-ChatGPT-Make-1-1536x978.png 1536w, /uploads-archive/2023/04/Integration-Google-Docs-OpenAI-DALL-E-ChatGPT-Make-1-228x145.png 228w, /uploads-archive/2023/04/Integration-Google-Docs-OpenAI-DALL-E-ChatGPT-Make-1.png 1575w" sizes="(max-width: 1024px) 100vw, 1024px" /></a></p>
<p>そうすることで、4212トークンが、1567トークンまで圧縮され、理論上は、さらに倍の日本語文字数でも耐えられることが分かりました。</p>
<p>ただし、日本語の精度が落ちてしまっている感は否めず、現状だとそのままオフィシャルに議事録として扱うというよりは、自分のメモ書きの代わり程度に留めておくのが良さそうな具合だという結論になりました。</p>
<h2>処理時間</h2>
<p><div style="width: 1280px;" class="wp-video">
<video class="wp-video-shortcode" id="video-18142-1" width="1280" height="720" preload="metadata" controls="controls"><source type="video/mp4" src="/uploads-archive/2023/04/Integration-Google-Docs-OpenAI-DALL-E-ChatGPT-_-Make.mp4?_=1" /><a href="/uploads-archive/2023/04/Integration-Google-Docs-OpenAI-DALL-E-ChatGPT-_-Make.mp4">/uploads-archive/2023/04/Integration-Google-Docs-OpenAI-DALL-E-ChatGPT-_-Make.mp4</a></video></div></p>
<h2>課題</h2>
<h3>1時間前後の会議に対応できるか</h3>
<p>現在APIの制約として、4097トークン上限があり、おおよそ時間にすると10〜15分程度の会議のテキスト量に相当しますので、少なくともこの5倍程度は受け入れられなければ実用に耐えられないと思います。</p>
<p>それを解消するために、一度Deep Lを介して、英語に翻訳しトークン数を下げるという試みをしましたが、日本語の精度が落ちてしまう点とそれでも上限トークン数の制約にはとても足りないので、テキストを分割するといった更なる工夫の必要。</p>
<h3>議事録のテキスト化の方法</h3>
<p>今回は、Googleドキュメントの音声入力をを利用して、そのドキュメントからテキストを抽出しましたが、ここもなるべく自動化したいですね。音声データから文字起こしですとここでもファイル容量の上限もあり、まだまだ、1時間レベルの会議に耐えるものではないので、試行錯誤いたします。</p>
<h2>まとめ</h2>
<p>議事録ツールを完成させる方向性もありますが、もっともっといろいろなことができるのではと、ワクワクしました。</p>

Integration-Google-Docs-OpenAI-DALL-E-ChatGPT-Make-1024x652.png

chatGPTとmakeで議事録要約ツール試作版を作ってみた

<p>以前、<br />
<a href="/programmer/%E7%8A%B6%E6%B3%81%E3%81%AB%E3%82%88%E3%81%A3%E3%81%A6validation%E3%82%92%E5%A4%89%E3%81%88%E3%82%8B%EF%BC%88ruby-on-rails%EF%BC%89/">状況によってvalidationを変える（Ruby on Rails）</a>というブログを書き、on contextで指定するという方法を記事にしました。<br />
今回はその続きです。</p>
<p>on contextという方法は、状況に応じて少し変えるという際には楽だったのですが、<br />
validationがだんだん複雑になってくるにつれて、<br />
かくコードの量が多くなり、煩雑になりがちです。</p>
<p>そこでwith_optionsを用いると綺麗にまとめて書く事ができます。</p>
<p>仮に下記のようなモデルがあったとします（商品モデル）。</p>

		<div id="crayon-6495402645ae0805224652" class="crayon-syntax crayon-theme-monokai crayon-font-monaco crayon-os-mac print-yes notranslate" data-settings=" minimize scroll-mouseover wrap" style=" margin-top: 12px; margin-bottom: 12px; font-size: 13px !important; line-height: 18px !important;">
		
			<div class="crayon-toolbar" data-settings=" mouseover overlay hide delay" style="font-size: 13px !important;height: 19.5px !important; line-height: 19.5px !important;"><span class="crayon-title"></span>
			<div class="crayon-tools" style="font-size: 13px !important;height: 19.5px !important; line-height: 19.5px !important;"><div class="crayon-button crayon-nums-button" title="Toggle Line Numbers"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-plain-button" title="Toggle Plain Code"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-wrap-button" title="Toggle Line Wrap"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-expand-button" title="Expand Code"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-copy-button" title="Copy"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-popup-button" title="Open Code In New Window"><div class="crayon-button-icon"></div></div></div></div>
			<div class="crayon-info" style="min-height: 19.5px !important; line-height: 19.5px !important;"></div>
			<div class="crayon-plain-wrap"><textarea  class="crayon-plain print-no" data-settings="dblclick" readonly style="-moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4; font-size: 13px !important; line-height: 18px !important;">
# == Schema Information                                            
#
# Table name: product
#
#  id                     :integer          not null, primary key
#  product_name           :string(255)
#  price                  :float(24)
#  product_code           :string(255)
#  created_at             :datetime         not null
#  updated_at             :datetime         not null
#
#
class Product &lt; ActiveRecord::Base
end</textarea></div>
			<div class="crayon-main" style="">
				<table class="crayon-table">
					<tr class="crayon-row">
				<td class="crayon-nums " data-settings="show">
					<div class="crayon-nums-content" style="font-size: 13px !important; line-height: 18px !important;"><div class="crayon-num" data-line="crayon-6495402645ae0805224652-1">1</div><div class="crayon-num crayon-striped-num" data-line="crayon-6495402645ae0805224652-2">2</div><div class="crayon-num" data-line="crayon-6495402645ae0805224652-3">3</div><div class="crayon-num crayon-striped-num" data-line="crayon-6495402645ae0805224652-4">4</div><div class="crayon-num" data-line="crayon-6495402645ae0805224652-5">5</div><div class="crayon-num crayon-striped-num" data-line="crayon-6495402645ae0805224652-6">6</div><div class="crayon-num" data-line="crayon-6495402645ae0805224652-7">7</div><div class="crayon-num crayon-striped-num" data-line="crayon-6495402645ae0805224652-8">8</div><div class="crayon-num" data-line="crayon-6495402645ae0805224652-9">9</div><div class="crayon-num crayon-striped-num" data-line="crayon-6495402645ae0805224652-10">10</div><div class="crayon-num" data-line="crayon-6495402645ae0805224652-11">11</div><div class="crayon-num crayon-striped-num" data-line="crayon-6495402645ae0805224652-12">12</div><div class="crayon-num" data-line="crayon-6495402645ae0805224652-13">13</div><div class="crayon-num crayon-striped-num" data-line="crayon-6495402645ae0805224652-14">14</div></div>
				</td>
						<td class="crayon-code"><div class="crayon-pre" style="font-size: 13px !important; line-height: 18px !important; -moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4;"><div class="crayon-line" id="crayon-6495402645ae0805224652-1"><span class="crayon-p"># == Schema Information&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span></div><div class="crayon-line crayon-striped-line" id="crayon-6495402645ae0805224652-2"><span class="crayon-p">#</span></div><div class="crayon-line" id="crayon-6495402645ae0805224652-3"><span class="crayon-p"># Table name: product</span></div><div class="crayon-line crayon-striped-line" id="crayon-6495402645ae0805224652-4"><span class="crayon-p">#</span></div><div class="crayon-line" id="crayon-6495402645ae0805224652-5"><span class="crayon-p">#&nbsp;&nbsp;id&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; :integer&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;not null, primary key</span></div><div class="crayon-line crayon-striped-line" id="crayon-6495402645ae0805224652-6"><span class="crayon-p">#&nbsp;&nbsp;product_name&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; :string(255)</span></div><div class="crayon-line" id="crayon-6495402645ae0805224652-7"><span class="crayon-p">#&nbsp;&nbsp;price&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;:float(24)</span></div><div class="crayon-line crayon-striped-line" id="crayon-6495402645ae0805224652-8"><span class="crayon-p">#&nbsp;&nbsp;product_code&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; :string(255)</span></div><div class="crayon-line" id="crayon-6495402645ae0805224652-9"><span class="crayon-p">#&nbsp;&nbsp;created_at&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; :datetime&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; not null</span></div><div class="crayon-line crayon-striped-line" id="crayon-6495402645ae0805224652-10"><span class="crayon-p">#&nbsp;&nbsp;updated_at&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; :datetime&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; not null</span></div><div class="crayon-line" id="crayon-6495402645ae0805224652-11"><span class="crayon-p">#</span></div><div class="crayon-line crayon-striped-line" id="crayon-6495402645ae0805224652-12"><span class="crayon-p">#</span></div><div class="crayon-line" id="crayon-6495402645ae0805224652-13"><span class="crayon-t">class</span><span class="crayon-h"> </span><span class="crayon-i">Product</span><span class="crayon-h"> </span><span class="crayon-h">&lt;</span><span class="crayon-h"> </span><span class="crayon-i">ActiveRecord</span><span class="crayon-sy">:</span><span class="crayon-sy">:</span><span class="crayon-e">Base</span></div><div class="crayon-line crayon-striped-line" id="crayon-6495402645ae0805224652-14"><span class="crayon-st">end</span></div></div></td>
					</tr>
				</table>
			</div>
		</div>

<p></p>
<p>いろいろと省略しますが、システムとして登録される商品の値段の通貨が日本円のときだけ、priceの型をintegerにしたいというvalidationがあれば下記のようにします。</p>
<p></p>

		<div id="crayon-6495402645ae5672348118" class="crayon-syntax crayon-theme-monokai crayon-font-monaco crayon-os-mac print-yes notranslate" data-settings=" minimize scroll-mouseover wrap" style=" margin-top: 12px; margin-bottom: 12px; font-size: 13px !important; line-height: 18px !important;">
		
			<div class="crayon-toolbar" data-settings=" mouseover overlay hide delay" style="font-size: 13px !important;height: 19.5px !important; line-height: 19.5px !important;"><span class="crayon-title"></span>
			<div class="crayon-tools" style="font-size: 13px !important;height: 19.5px !important; line-height: 19.5px !important;"><div class="crayon-button crayon-nums-button" title="Toggle Line Numbers"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-plain-button" title="Toggle Plain Code"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-wrap-button" title="Toggle Line Wrap"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-expand-button" title="Expand Code"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-copy-button" title="Copy"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-popup-button" title="Open Code In New Window"><div class="crayon-button-icon"></div></div></div></div>
			<div class="crayon-info" style="min-height: 19.5px !important; line-height: 19.5px !important;"></div>
			<div class="crayon-plain-wrap"><textarea  class="crayon-plain print-no" data-settings="dblclick" readonly style="-moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4; font-size: 13px !important; line-height: 18px !important;">
# == Schema Information                                            
#
# Table name: product
#
#  id                     :integer          not null, primary key
#  product_name           :string(255)
#  price                  :float(24)
#  product_code           :string(255)
#  created_at             :datetime         not null
#  updated_at             :datetime         not null
#
#
class Product &lt; ActiveRecord::Base
　　with_options if: :jpy? do
　　　　validates :price, presence: true, numericality: { only_integer: true }
　　end

　　def jpy?
　　　　return true if 基軸通貨が日本円かどうか
　　　　false
　　end
end</textarea></div>
			<div class="crayon-main" style="">
				<table class="crayon-table">
					<tr class="crayon-row">
				<td class="crayon-nums " data-settings="show">
					<div class="crayon-nums-content" style="font-size: 13px !important; line-height: 18px !important;"><div class="crayon-num" data-line="crayon-6495402645ae5672348118-1">1</div><div class="crayon-num crayon-striped-num" data-line="crayon-6495402645ae5672348118-2">2</div><div class="crayon-num" data-line="crayon-6495402645ae5672348118-3">3</div><div class="crayon-num crayon-striped-num" data-line="crayon-6495402645ae5672348118-4">4</div><div class="crayon-num" data-line="crayon-6495402645ae5672348118-5">5</div><div class="crayon-num crayon-striped-num" data-line="crayon-6495402645ae5672348118-6">6</div><div class="crayon-num" data-line="crayon-6495402645ae5672348118-7">7</div><div class="crayon-num crayon-striped-num" data-line="crayon-6495402645ae5672348118-8">8</div><div class="crayon-num" data-line="crayon-6495402645ae5672348118-9">9</div><div class="crayon-num crayon-striped-num" data-line="crayon-6495402645ae5672348118-10">10</div><div class="crayon-num" data-line="crayon-6495402645ae5672348118-11">11</div><div class="crayon-num crayon-striped-num" data-line="crayon-6495402645ae5672348118-12">12</div><div class="crayon-num" data-line="crayon-6495402645ae5672348118-13">13</div><div class="crayon-num crayon-striped-num" data-line="crayon-6495402645ae5672348118-14">14</div><div class="crayon-num" data-line="crayon-6495402645ae5672348118-15">15</div><div class="crayon-num crayon-striped-num" data-line="crayon-6495402645ae5672348118-16">16</div><div class="crayon-num" data-line="crayon-6495402645ae5672348118-17">17</div><div class="crayon-num crayon-striped-num" data-line="crayon-6495402645ae5672348118-18">18</div><div class="crayon-num" data-line="crayon-6495402645ae5672348118-19">19</div><div class="crayon-num crayon-striped-num" data-line="crayon-6495402645ae5672348118-20">20</div><div class="crayon-num" data-line="crayon-6495402645ae5672348118-21">21</div><div class="crayon-num crayon-striped-num" data-line="crayon-6495402645ae5672348118-22">22</div></div>
				</td>
						<td class="crayon-code"><div class="crayon-pre" style="font-size: 13px !important; line-height: 18px !important; -moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4;"><div class="crayon-line" id="crayon-6495402645ae5672348118-1"><span class="crayon-p"># == Schema Information&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span></div><div class="crayon-line crayon-striped-line" id="crayon-6495402645ae5672348118-2"><span class="crayon-p">#</span></div><div class="crayon-line" id="crayon-6495402645ae5672348118-3"><span class="crayon-p"># Table name: product</span></div><div class="crayon-line crayon-striped-line" id="crayon-6495402645ae5672348118-4"><span class="crayon-p">#</span></div><div class="crayon-line" id="crayon-6495402645ae5672348118-5"><span class="crayon-p">#&nbsp;&nbsp;id&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; :integer&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;not null, primary key</span></div><div class="crayon-line crayon-striped-line" id="crayon-6495402645ae5672348118-6"><span class="crayon-p">#&nbsp;&nbsp;product_name&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; :string(255)</span></div><div class="crayon-line" id="crayon-6495402645ae5672348118-7"><span class="crayon-p">#&nbsp;&nbsp;price&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;:float(24)</span></div><div class="crayon-line crayon-striped-line" id="crayon-6495402645ae5672348118-8"><span class="crayon-p">#&nbsp;&nbsp;product_code&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; :string(255)</span></div><div class="crayon-line" id="crayon-6495402645ae5672348118-9"><span class="crayon-p">#&nbsp;&nbsp;created_at&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; :datetime&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; not null</span></div><div class="crayon-line crayon-striped-line" id="crayon-6495402645ae5672348118-10"><span class="crayon-p">#&nbsp;&nbsp;updated_at&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; :datetime&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; not null</span></div><div class="crayon-line" id="crayon-6495402645ae5672348118-11"><span class="crayon-p">#</span></div><div class="crayon-line crayon-striped-line" id="crayon-6495402645ae5672348118-12"><span class="crayon-p">#</span></div><div class="crayon-line" id="crayon-6495402645ae5672348118-13"><span class="crayon-t">class</span><span class="crayon-h"> </span><span class="crayon-i">Product</span><span class="crayon-h"> </span><span class="crayon-h">&lt;</span><span class="crayon-h"> </span><span class="crayon-i">ActiveRecord</span><span class="crayon-sy">:</span><span class="crayon-sy">:</span><span class="crayon-i">Base</span></div><div class="crayon-line crayon-striped-line" id="crayon-6495402645ae5672348118-14">　　<span class="crayon-e">with_options </span><span class="crayon-st">if</span><span class="crayon-sy">:</span><span class="crayon-h"> </span><span class="crayon-sy">:</span><span class="crayon-i">jpy</span><span class="crayon-sy">?</span><span class="crayon-h"> </span><span class="crayon-st">do</span></div><div class="crayon-line" id="crayon-6495402645ae5672348118-15">　　　　<span class="crayon-i">validates</span><span class="crayon-h"> </span><span class="crayon-sy">:</span><span class="crayon-i">price</span><span class="crayon-sy">,</span><span class="crayon-h"> </span><span class="crayon-i">presence</span><span class="crayon-sy">:</span><span class="crayon-h"> </span><span class="crayon-t">true</span><span class="crayon-sy">,</span><span class="crayon-h"> </span><span class="crayon-i">numericality</span><span class="crayon-sy">:</span><span class="crayon-h"> </span><span class="crayon-sy">{</span><span class="crayon-h"> </span><span class="crayon-i">only_integer</span><span class="crayon-sy">:</span><span class="crayon-h"> </span><span class="crayon-t">true</span><span class="crayon-h"> </span><span class="crayon-sy">}</span></div><div class="crayon-line crayon-striped-line" id="crayon-6495402645ae5672348118-16">　　<span class="crayon-st">end</span></div><div class="crayon-line" id="crayon-6495402645ae5672348118-17">&nbsp;</div><div class="crayon-line crayon-striped-line" id="crayon-6495402645ae5672348118-18">　　<span class="crayon-e">def </span><span class="crayon-i">jpy</span><span class="crayon-sy">?</span></div><div class="crayon-line" id="crayon-6495402645ae5672348118-19">　　　　<span class="crayon-st">return</span><span class="crayon-h"> </span><span class="crayon-t">true</span><span class="crayon-h"> </span><span class="crayon-st">if</span><span class="crayon-h"> </span>基軸通貨が日本円かどうか</div><div class="crayon-line crayon-striped-line" id="crayon-6495402645ae5672348118-20">　　　　<span class="crayon-t">false</span></div><div class="crayon-line" id="crayon-6495402645ae5672348118-21">　　<span class="crayon-st">end</span></div><div class="crayon-line crayon-striped-line" id="crayon-6495402645ae5672348118-22"><span class="crayon-st">end</span></div></div></td>
					</tr>
				</table>
			</div>
		</div>

<p>のような形で書く事ができます。on contextより汎用性が高いと思います。</p>

状況によってvalidationを変える（Ruby on Rails）その2

RailsにCapistranoによる自動デプロイの導入

<p>CI（circle integration： 継続的インテグレーション）を図る上で、昨今ではCircleCi、Jenkins、Travis Ciなどが存在するが、<br />
合わせてRuby On RailsではRSpecを使用している人が多い。</p>
<p>導入方法としては以下の通り。</p>
<h2>導入</h2>
<p></p>

		<div id="crayon-6495402643029348902993" class="crayon-syntax crayon-theme-monokai crayon-font-monaco crayon-os-mac print-yes notranslate" data-settings=" minimize scroll-mouseover wrap" style=" margin-top: 12px; margin-bottom: 12px; font-size: 13px !important; line-height: 18px !important;">
		
			<div class="crayon-toolbar" data-settings=" mouseover overlay hide delay" style="font-size: 13px !important;height: 19.5px !important; line-height: 19.5px !important;"><span class="crayon-title"></span>
			<div class="crayon-tools" style="font-size: 13px !important;height: 19.5px !important; line-height: 19.5px !important;"><div class="crayon-button crayon-nums-button" title="Toggle Line Numbers"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-plain-button" title="Toggle Plain Code"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-wrap-button" title="Toggle Line Wrap"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-expand-button" title="Expand Code"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-copy-button" title="Copy"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-popup-button" title="Open Code In New Window"><div class="crayon-button-icon"></div></div></div></div>
			<div class="crayon-info" style="min-height: 19.5px !important; line-height: 19.5px !important;"></div>
			<div class="crayon-plain-wrap"><textarea  class="crayon-plain print-no" data-settings="dblclick" readonly style="-moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4; font-size: 13px !important; line-height: 18px !important;">
group :development, :test do
  gem 'rspec-rails', '~&gt; 3.5'
end</textarea></div>
			<div class="crayon-main" style="">
				<table class="crayon-table">
					<tr class="crayon-row">
				<td class="crayon-nums " data-settings="show">
					<div class="crayon-nums-content" style="font-size: 13px !important; line-height: 18px !important;"><div class="crayon-num" data-line="crayon-6495402643029348902993-1">1</div><div class="crayon-num crayon-striped-num" data-line="crayon-6495402643029348902993-2">2</div><div class="crayon-num" data-line="crayon-6495402643029348902993-3">3</div></div>
				</td>
						<td class="crayon-code"><div class="crayon-pre" style="font-size: 13px !important; line-height: 18px !important; -moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4;"><div class="crayon-line" id="crayon-6495402643029348902993-1"><span class="crayon-i">group</span><span class="crayon-h"> </span><span class="crayon-sy">:</span><span class="crayon-i">development</span><span class="crayon-sy">,</span><span class="crayon-h"> </span><span class="crayon-sy">:</span><span class="crayon-e">test </span><span class="crayon-st">do</span></div><div class="crayon-line crayon-striped-line" id="crayon-6495402643029348902993-2"><span class="crayon-h">&nbsp;&nbsp;</span><span class="crayon-i">gem</span><span class="crayon-h"> </span><span class="crayon-s">'rspec-rails'</span><span class="crayon-sy">,</span><span class="crayon-h"> </span><span class="crayon-s">'~&gt; 3.5'</span></div><div class="crayon-line" id="crayon-6495402643029348902993-3"><span class="crayon-st">end</span></div></div></td>
					</tr>
				</table>
			</div>
		</div>

<p>Gemfileに上記を追加し、bundle installを実施する。</p>

		<div id="crayon-649540264302d589884612" class="crayon-syntax crayon-theme-monokai crayon-font-monaco crayon-os-mac print-yes notranslate" data-settings=" minimize scroll-mouseover wrap" style=" margin-top: 12px; margin-bottom: 12px; font-size: 13px !important; line-height: 18px !important;">
		
			<div class="crayon-toolbar" data-settings=" mouseover overlay hide delay" style="font-size: 13px !important;height: 19.5px !important; line-height: 19.5px !important;"><span class="crayon-title"></span>
			<div class="crayon-tools" style="font-size: 13px !important;height: 19.5px !important; line-height: 19.5px !important;"><div class="crayon-button crayon-nums-button" title="Toggle Line Numbers"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-plain-button" title="Toggle Plain Code"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-wrap-button" title="Toggle Line Wrap"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-expand-button" title="Expand Code"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-copy-button" title="Copy"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-popup-button" title="Open Code In New Window"><div class="crayon-button-icon"></div></div></div></div>
			<div class="crayon-info" style="min-height: 19.5px !important; line-height: 19.5px !important;"></div>
			<div class="crayon-plain-wrap"><textarea  class="crayon-plain print-no" data-settings="dblclick" readonly style="-moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4; font-size: 13px !important; line-height: 18px !important;">
bundle install</textarea></div>
			<div class="crayon-main" style="">
				<table class="crayon-table">
					<tr class="crayon-row">
				<td class="crayon-nums " data-settings="show">
					<div class="crayon-nums-content" style="font-size: 13px !important; line-height: 18px !important;"><div class="crayon-num" data-line="crayon-649540264302d589884612-1">1</div></div>
				</td>
						<td class="crayon-code"><div class="crayon-pre" style="font-size: 13px !important; line-height: 18px !important; -moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4;"><div class="crayon-line" id="crayon-649540264302d589884612-1"><span class="crayon-e">bundle </span><span class="crayon-i">install</span></div></div></td>
					</tr>
				</table>
			</div>
		</div>

<p>そのあと、下記によりconfigファイルを生成する。</p>

		<div id="crayon-649540264302e876660649" class="crayon-syntax crayon-theme-monokai crayon-font-monaco crayon-os-mac print-yes notranslate" data-settings=" minimize scroll-mouseover wrap" style=" margin-top: 12px; margin-bottom: 12px; font-size: 13px !important; line-height: 18px !important;">
		
			<div class="crayon-toolbar" data-settings=" mouseover overlay hide delay" style="font-size: 13px !important;height: 19.5px !important; line-height: 19.5px !important;"><span class="crayon-title"></span>
			<div class="crayon-tools" style="font-size: 13px !important;height: 19.5px !important; line-height: 19.5px !important;"><div class="crayon-button crayon-nums-button" title="Toggle Line Numbers"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-plain-button" title="Toggle Plain Code"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-wrap-button" title="Toggle Line Wrap"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-expand-button" title="Expand Code"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-copy-button" title="Copy"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-popup-button" title="Open Code In New Window"><div class="crayon-button-icon"></div></div></div></div>
			<div class="crayon-info" style="min-height: 19.5px !important; line-height: 19.5px !important;"></div>
			<div class="crayon-plain-wrap"><textarea  class="crayon-plain print-no" data-settings="dblclick" readonly style="-moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4; font-size: 13px !important; line-height: 18px !important;">
rails generate rspec:install</textarea></div>
			<div class="crayon-main" style="">
				<table class="crayon-table">
					<tr class="crayon-row">
				<td class="crayon-nums " data-settings="show">
					<div class="crayon-nums-content" style="font-size: 13px !important; line-height: 18px !important;"><div class="crayon-num" data-line="crayon-649540264302e876660649-1">1</div></div>
				</td>
						<td class="crayon-code"><div class="crayon-pre" style="font-size: 13px !important; line-height: 18px !important; -moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4;"><div class="crayon-line" id="crayon-649540264302e876660649-1"><span class="crayon-e">rails </span><span class="crayon-e">generate </span><span class="crayon-i">rspec</span><span class="crayon-sy">:</span><span class="crayon-i">install</span></div></div></td>
					</tr>
				</table>
			</div>
		</div>

<p></p>
<p>以上で、導入は完了する。</p>
<p>ここで、</p>

		<div id="crayon-649540264302f897744725" class="crayon-syntax crayon-theme-monokai crayon-font-monaco crayon-os-mac print-yes notranslate" data-settings=" minimize scroll-mouseover wrap" style=" margin-top: 12px; margin-bottom: 12px; font-size: 13px !important; line-height: 18px !important;">
		
			<div class="crayon-toolbar" data-settings=" mouseover overlay hide delay" style="font-size: 13px !important;height: 19.5px !important; line-height: 19.5px !important;"><span class="crayon-title"></span>
			<div class="crayon-tools" style="font-size: 13px !important;height: 19.5px !important; line-height: 19.5px !important;"><div class="crayon-button crayon-nums-button" title="Toggle Line Numbers"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-plain-button" title="Toggle Plain Code"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-wrap-button" title="Toggle Line Wrap"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-expand-button" title="Expand Code"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-copy-button" title="Copy"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-popup-button" title="Open Code In New Window"><div class="crayon-button-icon"></div></div></div></div>
			<div class="crayon-info" style="min-height: 19.5px !important; line-height: 19.5px !important;"></div>
			<div class="crayon-plain-wrap"><textarea  class="crayon-plain print-no" data-settings="dblclick" readonly style="-moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4; font-size: 13px !important; line-height: 18px !important;">
rails g rspec:model user</textarea></div>
			<div class="crayon-main" style="">
				<table class="crayon-table">
					<tr class="crayon-row">
				<td class="crayon-nums " data-settings="show">
					<div class="crayon-nums-content" style="font-size: 13px !important; line-height: 18px !important;"><div class="crayon-num" data-line="crayon-649540264302f897744725-1">1</div></div>
				</td>
						<td class="crayon-code"><div class="crayon-pre" style="font-size: 13px !important; line-height: 18px !important; -moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4;"><div class="crayon-line" id="crayon-649540264302f897744725-1"><span class="crayon-i">rails</span><span class="crayon-h"> </span><span class="crayon-i">g</span><span class="crayon-h"> </span><span class="crayon-i">rspec</span><span class="crayon-sy">:</span><span class="crayon-e">model </span><span class="crayon-i">user</span></div></div></td>
					</tr>
				</table>
			</div>
		</div>

<p>を実行すれば、<br />
spec/models/user_spec.rb<br />
のようなファイルが生成されるので、ここにテストコードを書いていく。</p>
<p>RSpecのテストコードの書き方は独自のものが存在する。<br />
書き方は下記がわかりやすい。<br />
<a href="http://qiita.com/jnchito/items/3a590480ee291a70027c">RSpec</a><br />
<a href="https://leanpub.com/everydayrailsrspec-jp/read#leanpub-auto-section-15">Everyday Rails &#8211; RSpecによるRailsテスト入門</a></p>
<h2>参考</h2>
<p><a href="https://github.com/rspec/rspec-rails">GitHub &#8211; rspec/rspec-rails: RSpec for Rails-3+</a></p>

Ruby On RailsにRSpecを導入する

Railsで階層構造を簡単に作ってみる

<p>Railsのアプリケーションでバリデーションを行うときは、model内に定義します。<br />
例えば、必須入力であれば、</p>

		<div id="crayon-64954026414da534546014" class="crayon-syntax crayon-theme-monokai crayon-font-monaco crayon-os-mac print-yes notranslate" data-settings=" minimize scroll-mouseover wrap" style=" margin-top: 12px; margin-bottom: 12px; font-size: 13px !important; line-height: 18px !important;">
		
			<div class="crayon-toolbar" data-settings=" mouseover overlay hide delay" style="font-size: 13px !important;height: 19.5px !important; line-height: 19.5px !important;"><span class="crayon-title"></span>
			<div class="crayon-tools" style="font-size: 13px !important;height: 19.5px !important; line-height: 19.5px !important;"><div class="crayon-button crayon-nums-button" title="Toggle Line Numbers"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-plain-button" title="Toggle Plain Code"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-wrap-button" title="Toggle Line Wrap"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-expand-button" title="Expand Code"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-copy-button" title="Copy"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-popup-button" title="Open Code In New Window"><div class="crayon-button-icon"></div></div></div></div>
			<div class="crayon-info" style="min-height: 19.5px !important; line-height: 19.5px !important;"></div>
			<div class="crayon-plain-wrap"><textarea  class="crayon-plain print-no" data-settings="dblclick" readonly style="-moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4; font-size: 13px !important; line-height: 18px !important;">
validates :name, presence: true</textarea></div>
			<div class="crayon-main" style="">
				<table class="crayon-table">
					<tr class="crayon-row">
				<td class="crayon-nums " data-settings="show">
					<div class="crayon-nums-content" style="font-size: 13px !important; line-height: 18px !important;"><div class="crayon-num" data-line="crayon-64954026414da534546014-1">1</div></div>
				</td>
						<td class="crayon-code"><div class="crayon-pre" style="font-size: 13px !important; line-height: 18px !important; -moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4;"><div class="crayon-line" id="crayon-64954026414da534546014-1"><span class="crayon-i">validates</span><span class="crayon-h"> </span><span class="crayon-sy">:</span><span class="crayon-i">name</span><span class="crayon-sy">,</span><span class="crayon-h"> </span><span class="crayon-i">presence</span><span class="crayon-sy">:</span><span class="crayon-h"> </span><span class="crayon-t">true</span></div></div></td>
					</tr>
				</table>
			</div>
		</div>

<p>一意性を担保するものであれば、</p>

		<div id="crayon-64954026414de519728300" class="crayon-syntax crayon-theme-monokai crayon-font-monaco crayon-os-mac print-yes notranslate" data-settings=" minimize scroll-mouseover wrap" style=" margin-top: 12px; margin-bottom: 12px; font-size: 13px !important; line-height: 18px !important;">
		
			<div class="crayon-toolbar" data-settings=" mouseover overlay hide delay" style="font-size: 13px !important;height: 19.5px !important; line-height: 19.5px !important;"><span class="crayon-title"></span>
			<div class="crayon-tools" style="font-size: 13px !important;height: 19.5px !important; line-height: 19.5px !important;"><div class="crayon-button crayon-nums-button" title="Toggle Line Numbers"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-plain-button" title="Toggle Plain Code"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-wrap-button" title="Toggle Line Wrap"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-expand-button" title="Expand Code"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-copy-button" title="Copy"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-popup-button" title="Open Code In New Window"><div class="crayon-button-icon"></div></div></div></div>
			<div class="crayon-info" style="min-height: 19.5px !important; line-height: 19.5px !important;"></div>
			<div class="crayon-plain-wrap"><textarea  class="crayon-plain print-no" data-settings="dblclick" readonly style="-moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4; font-size: 13px !important; line-height: 18px !important;">
validates :name, presence: true</textarea></div>
			<div class="crayon-main" style="">
				<table class="crayon-table">
					<tr class="crayon-row">
				<td class="crayon-nums " data-settings="show">
					<div class="crayon-nums-content" style="font-size: 13px !important; line-height: 18px !important;"><div class="crayon-num" data-line="crayon-64954026414de519728300-1">1</div></div>
				</td>
						<td class="crayon-code"><div class="crayon-pre" style="font-size: 13px !important; line-height: 18px !important; -moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4;"><div class="crayon-line" id="crayon-64954026414de519728300-1"><span class="crayon-i">validates</span><span class="crayon-h"> </span><span class="crayon-sy">:</span><span class="crayon-i">name</span><span class="crayon-sy">,</span><span class="crayon-h"> </span><span class="crayon-i">presence</span><span class="crayon-sy">:</span><span class="crayon-h"> </span><span class="crayon-t">true</span></div></div></td>
					</tr>
				</table>
			</div>
		</div>

<p>のような形式です。</p>
<p>しかし、特定の状況ではバリデーションを効かせたいけど、それ以外の状況ではバリデーションを効かせたくないという状況が存在します。<br />
その場合は、いくつか方法が存在するのですが、今日は2つ紹介致します。</p>
<h2>1. on, contextで指定をしていする</h2>
<p>特定の状況かだけバリデーションを効かせるというときに使用します。<br />
方法は簡単で、上記にて記したバリーデーション記法の末尾に、どういう状況で効かせるかonで指定します。<br />
例えば、その特定の状況をuserとして定義するならば下記のようになります。</p>

		<div id="crayon-64954026414df237191314" class="crayon-syntax crayon-theme-monokai crayon-font-monaco crayon-os-mac print-yes notranslate" data-settings=" minimize scroll-mouseover wrap" style=" margin-top: 12px; margin-bottom: 12px; font-size: 13px !important; line-height: 18px !important;">
		
			<div class="crayon-toolbar" data-settings=" mouseover overlay hide delay" style="font-size: 13px !important;height: 19.5px !important; line-height: 19.5px !important;"><span class="crayon-title"></span>
			<div class="crayon-tools" style="font-size: 13px !important;height: 19.5px !important; line-height: 19.5px !important;"><div class="crayon-button crayon-nums-button" title="Toggle Line Numbers"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-plain-button" title="Toggle Plain Code"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-wrap-button" title="Toggle Line Wrap"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-expand-button" title="Expand Code"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-copy-button" title="Copy"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-popup-button" title="Open Code In New Window"><div class="crayon-button-icon"></div></div></div></div>
			<div class="crayon-info" style="min-height: 19.5px !important; line-height: 19.5px !important;"></div>
			<div class="crayon-plain-wrap"><textarea  class="crayon-plain print-no" data-settings="dblclick" readonly style="-moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4; font-size: 13px !important; line-height: 18px !important;">
validates :name, presence: true, on: user</textarea></div>
			<div class="crayon-main" style="">
				<table class="crayon-table">
					<tr class="crayon-row">
				<td class="crayon-nums " data-settings="show">
					<div class="crayon-nums-content" style="font-size: 13px !important; line-height: 18px !important;"><div class="crayon-num" data-line="crayon-64954026414df237191314-1">1</div></div>
				</td>
						<td class="crayon-code"><div class="crayon-pre" style="font-size: 13px !important; line-height: 18px !important; -moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4;"><div class="crayon-line" id="crayon-64954026414df237191314-1"><span class="crayon-i">validates</span><span class="crayon-h"> </span><span class="crayon-sy">:</span><span class="crayon-i">name</span><span class="crayon-sy">,</span><span class="crayon-h"> </span><span class="crayon-i">presence</span><span class="crayon-sy">:</span><span class="crayon-h"> </span><span class="crayon-t">true</span><span class="crayon-sy">,</span><span class="crayon-h"> </span><span class="crayon-i">on</span><span class="crayon-sy">:</span><span class="crayon-h"> </span><span class="crayon-i">user</span></div></div></td>
					</tr>
				</table>
			</div>
		</div>

<p></p>
<p>そして、上記バリデーションを効かせるには、<br />
Railsにて保存する際に、contextというオプションで指定します。<br />
例えば、userという特定のオプションをもったバリデーションを効かせたい場合であれば、</p>

		<div id="crayon-64954026414e1720164220" class="crayon-syntax crayon-theme-monokai crayon-font-monaco crayon-os-mac print-yes notranslate" data-settings=" minimize scroll-mouseover wrap" style=" margin-top: 12px; margin-bottom: 12px; font-size: 13px !important; line-height: 18px !important;">
		
			<div class="crayon-toolbar" data-settings=" mouseover overlay hide delay" style="font-size: 13px !important;height: 19.5px !important; line-height: 19.5px !important;"><span class="crayon-title"></span>
			<div class="crayon-tools" style="font-size: 13px !important;height: 19.5px !important; line-height: 19.5px !important;"><div class="crayon-button crayon-nums-button" title="Toggle Line Numbers"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-plain-button" title="Toggle Plain Code"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-wrap-button" title="Toggle Line Wrap"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-expand-button" title="Expand Code"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-copy-button" title="Copy"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-popup-button" title="Open Code In New Window"><div class="crayon-button-icon"></div></div></div></div>
			<div class="crayon-info" style="min-height: 19.5px !important; line-height: 19.5px !important;"></div>
			<div class="crayon-plain-wrap"><textarea  class="crayon-plain print-no" data-settings="dblclick" readonly style="-moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4; font-size: 13px !important; line-height: 18px !important;">
save(context: :user)</textarea></div>
			<div class="crayon-main" style="">
				<table class="crayon-table">
					<tr class="crayon-row">
				<td class="crayon-nums " data-settings="show">
					<div class="crayon-nums-content" style="font-size: 13px !important; line-height: 18px !important;"><div class="crayon-num" data-line="crayon-64954026414e1720164220-1">1</div></div>
				</td>
						<td class="crayon-code"><div class="crayon-pre" style="font-size: 13px !important; line-height: 18px !important; -moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4;"><div class="crayon-line" id="crayon-64954026414e1720164220-1"><span class="crayon-e">save</span><span class="crayon-sy">(</span><span class="crayon-i">context</span><span class="crayon-sy">:</span><span class="crayon-h"> </span><span class="crayon-sy">:</span><span class="crayon-i">user</span><span class="crayon-sy">)</span></div></div></td>
					</tr>
				</table>
			</div>
		</div>

<p>のような形になります。</p>

		<div id="crayon-64954026414e2424605556" class="crayon-syntax crayon-theme-monokai crayon-font-monaco crayon-os-mac print-yes notranslate" data-settings=" minimize scroll-mouseover wrap" style=" margin-top: 12px; margin-bottom: 12px; font-size: 13px !important; line-height: 18px !important;">
		
			<div class="crayon-toolbar" data-settings=" mouseover overlay hide delay" style="font-size: 13px !important;height: 19.5px !important; line-height: 19.5px !important;"><span class="crayon-title"></span>
			<div class="crayon-tools" style="font-size: 13px !important;height: 19.5px !important; line-height: 19.5px !important;"><div class="crayon-button crayon-nums-button" title="Toggle Line Numbers"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-plain-button" title="Toggle Plain Code"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-wrap-button" title="Toggle Line Wrap"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-expand-button" title="Expand Code"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-copy-button" title="Copy"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-popup-button" title="Open Code In New Window"><div class="crayon-button-icon"></div></div></div></div>
			<div class="crayon-info" style="min-height: 19.5px !important; line-height: 19.5px !important;"></div>
			<div class="crayon-plain-wrap"><textarea  class="crayon-plain print-no" data-settings="dblclick" readonly style="-moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4; font-size: 13px !important; line-height: 18px !important;">
invalid(context: :user)</textarea></div>
			<div class="crayon-main" style="">
				<table class="crayon-table">
					<tr class="crayon-row">
				<td class="crayon-nums " data-settings="show">
					<div class="crayon-nums-content" style="font-size: 13px !important; line-height: 18px !important;"><div class="crayon-num" data-line="crayon-64954026414e2424605556-1">1</div></div>
				</td>
						<td class="crayon-code"><div class="crayon-pre" style="font-size: 13px !important; line-height: 18px !important; -moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4;"><div class="crayon-line" id="crayon-64954026414e2424605556-1"><span class="crayon-e">invalid</span><span class="crayon-sy">(</span><span class="crayon-i">context</span><span class="crayon-sy">:</span><span class="crayon-h"> </span><span class="crayon-sy">:</span><span class="crayon-i">user</span><span class="crayon-sy">)</span></div></div></td>
					</tr>
				</table>
			</div>
		</div>

<p>なども同様に使用できます。</p>
<h2>2. あらゆるバリデーションを無視する</h2>
<p>model内にバリデーションを指定していた場合でも、そのバリデーションを無視して保存させたい場合が存在しますが、<br />
その場合は、</p>

		<div id="crayon-64954026414e3256844877" class="crayon-syntax crayon-theme-monokai crayon-font-monaco crayon-os-mac print-yes notranslate" data-settings=" minimize scroll-mouseover wrap" style=" margin-top: 12px; margin-bottom: 12px; font-size: 13px !important; line-height: 18px !important;">
		
			<div class="crayon-toolbar" data-settings=" mouseover overlay hide delay" style="font-size: 13px !important;height: 19.5px !important; line-height: 19.5px !important;"><span class="crayon-title"></span>
			<div class="crayon-tools" style="font-size: 13px !important;height: 19.5px !important; line-height: 19.5px !important;"><div class="crayon-button crayon-nums-button" title="Toggle Line Numbers"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-plain-button" title="Toggle Plain Code"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-wrap-button" title="Toggle Line Wrap"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-expand-button" title="Expand Code"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-copy-button" title="Copy"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-popup-button" title="Open Code In New Window"><div class="crayon-button-icon"></div></div></div></div>
			<div class="crayon-info" style="min-height: 19.5px !important; line-height: 19.5px !important;"></div>
			<div class="crayon-plain-wrap"><textarea  class="crayon-plain print-no" data-settings="dblclick" readonly style="-moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4; font-size: 13px !important; line-height: 18px !important;">
save(validate: false)</textarea></div>
			<div class="crayon-main" style="">
				<table class="crayon-table">
					<tr class="crayon-row">
				<td class="crayon-nums " data-settings="show">
					<div class="crayon-nums-content" style="font-size: 13px !important; line-height: 18px !important;"><div class="crayon-num" data-line="crayon-64954026414e3256844877-1">1</div></div>
				</td>
						<td class="crayon-code"><div class="crayon-pre" style="font-size: 13px !important; line-height: 18px !important; -moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4;"><div class="crayon-line" id="crayon-64954026414e3256844877-1"><span class="crayon-e">save</span><span class="crayon-sy">(</span><span class="crayon-i">validate</span><span class="crayon-sy">:</span><span class="crayon-h"> </span><span class="crayon-t">false</span><span class="crayon-sy">)</span></div></div></td>
					</tr>
				</table>
			</div>
		</div>

<p>のような形で保存させることが可能です。</p>

状況によってvalidationを変える（Ruby on Rails）

<p>何度か実装したので記事にしてみました。</p>
<h2>gemの追加</h2>
<p>Gemfileの中にtwitterのgemを追加します。</p>

		<div id="crayon-6495402640a56943537714" class="crayon-syntax crayon-theme-monokai crayon-font-monaco crayon-os-mac print-yes notranslate" data-settings=" minimize scroll-mouseover wrap" style=" margin-top: 12px; margin-bottom: 12px; font-size: 13px !important; line-height: 18px !important;">
		
			<div class="crayon-toolbar" data-settings=" mouseover overlay hide delay" style="font-size: 13px !important;height: 19.5px !important; line-height: 19.5px !important;"><span class="crayon-title"></span>
			<div class="crayon-tools" style="font-size: 13px !important;height: 19.5px !important; line-height: 19.5px !important;"><div class="crayon-button crayon-nums-button" title="Toggle Line Numbers"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-plain-button" title="Toggle Plain Code"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-wrap-button" title="Toggle Line Wrap"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-expand-button" title="Expand Code"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-copy-button" title="Copy"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-popup-button" title="Open Code In New Window"><div class="crayon-button-icon"></div></div></div></div>
			<div class="crayon-info" style="min-height: 19.5px !important; line-height: 19.5px !important;"></div>
			<div class="crayon-plain-wrap"><textarea  class="crayon-plain print-no" data-settings="dblclick" readonly style="-moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4; font-size: 13px !important; line-height: 18px !important;">
bundle install</textarea></div>
			<div class="crayon-main" style="">
				<table class="crayon-table">
					<tr class="crayon-row">
				<td class="crayon-nums " data-settings="show">
					<div class="crayon-nums-content" style="font-size: 13px !important; line-height: 18px !important;"><div class="crayon-num" data-line="crayon-6495402640a56943537714-1">1</div></div>
				</td>
						<td class="crayon-code"><div class="crayon-pre" style="font-size: 13px !important; line-height: 18px !important; -moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4;"><div class="crayon-line" id="crayon-6495402640a56943537714-1"><span class="crayon-e">bundle </span><span class="crayon-i">install</span></div></div></td>
					</tr>
				</table>
			</div>
		</div>

<p></p>
<h2>taskの生成</h2>
<p>今回はtaskコマンドを使ってつぶやくという実装をします。<br />
twitterというタスクを追加します。</p>

		<div id="crayon-6495402640a5b756876059" class="crayon-syntax crayon-theme-monokai crayon-font-monaco crayon-os-mac print-yes notranslate" data-settings=" minimize scroll-mouseover wrap" style=" margin-top: 12px; margin-bottom: 12px; font-size: 13px !important; line-height: 18px !important;">
		
			<div class="crayon-toolbar" data-settings=" mouseover overlay hide delay" style="font-size: 13px !important;height: 19.5px !important; line-height: 19.5px !important;"><span class="crayon-title"></span>
			<div class="crayon-tools" style="font-size: 13px !important;height: 19.5px !important; line-height: 19.5px !important;"><div class="crayon-button crayon-nums-button" title="Toggle Line Numbers"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-plain-button" title="Toggle Plain Code"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-wrap-button" title="Toggle Line Wrap"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-expand-button" title="Expand Code"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-copy-button" title="Copy"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-popup-button" title="Open Code In New Window"><div class="crayon-button-icon"></div></div></div></div>
			<div class="crayon-info" style="min-height: 19.5px !important; line-height: 19.5px !important;"></div>
			<div class="crayon-plain-wrap"><textarea  class="crayon-plain print-no" data-settings="dblclick" readonly style="-moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4; font-size: 13px !important; line-height: 18px !important;">
rake g task twitter</textarea></div>
			<div class="crayon-main" style="">
				<table class="crayon-table">
					<tr class="crayon-row">
				<td class="crayon-nums " data-settings="show">
					<div class="crayon-nums-content" style="font-size: 13px !important; line-height: 18px !important;"><div class="crayon-num" data-line="crayon-6495402640a5b756876059-1">1</div></div>
				</td>
						<td class="crayon-code"><div class="crayon-pre" style="font-size: 13px !important; line-height: 18px !important; -moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4;"><div class="crayon-line" id="crayon-6495402640a5b756876059-1"><span class="crayon-i">rake</span><span class="crayon-h"> </span><span class="crayon-i">g</span><span class="crayon-h"> </span><span class="crayon-e">task </span><span class="crayon-i">twitter</span></div></div></td>
					</tr>
				</table>
			</div>
		</div>

<p></p>
<h2>api keyの取得</h2>
<p>https://apps.twitter.comにアクセスし、<br />
Consumer Key (API Key)<br />
Consumer Secret (API Secret)<br />
Access Token<br />
Access Token Secret<br />
を取得します。</p>
<p>&nbsp;</p>
<h2>taskの記述</h2>
<p>上で取得したapi keyをtaskの中に書き込みます。</p>

		<div id="crayon-6495402640a5c952880882" class="crayon-syntax crayon-theme-monokai crayon-font-monaco crayon-os-mac print-yes notranslate" data-settings=" minimize scroll-mouseover wrap" style=" margin-top: 12px; margin-bottom: 12px; font-size: 13px !important; line-height: 18px !important;">
		
			<div class="crayon-toolbar" data-settings=" mouseover overlay hide delay" style="font-size: 13px !important;height: 19.5px !important; line-height: 19.5px !important;"><span class="crayon-title">task</span>
			<div class="crayon-tools" style="font-size: 13px !important;height: 19.5px !important; line-height: 19.5px !important;"><div class="crayon-button crayon-nums-button" title="Toggle Line Numbers"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-plain-button" title="Toggle Plain Code"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-wrap-button" title="Toggle Line Wrap"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-expand-button" title="Expand Code"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-copy-button" title="Copy"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-popup-button" title="Open Code In New Window"><div class="crayon-button-icon"></div></div></div></div>
			<div class="crayon-info" style="min-height: 19.5px !important; line-height: 19.5px !important;"></div>
			<div class="crayon-plain-wrap"><textarea  class="crayon-plain print-no" data-settings="dblclick" readonly style="-moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4; font-size: 13px !important; line-height: 18px !important;">
namespace :twitter do
  desc "post tweet"
  task :tweet =&gt; :environment do
    str = "test"
    client = twitter_client
    client.update(str)
    p str
  end
end

def twitter_client
  client = Twitter::REST::Client.new do |config|
    config.consumer_key        = ""
    config.consumer_secret     = ""
    config.access_token        = ""
    config.access_token_secret = ""
  end
end</textarea></div>
			<div class="crayon-main" style="">
				<table class="crayon-table">
					<tr class="crayon-row">
				<td class="crayon-nums " data-settings="show">
					<div class="crayon-nums-content" style="font-size: 13px !important; line-height: 18px !important;"><div class="crayon-num" data-line="crayon-6495402640a5c952880882-1">1</div><div class="crayon-num crayon-striped-num" data-line="crayon-6495402640a5c952880882-2">2</div><div class="crayon-num" data-line="crayon-6495402640a5c952880882-3">3</div><div class="crayon-num crayon-striped-num" data-line="crayon-6495402640a5c952880882-4">4</div><div class="crayon-num" data-line="crayon-6495402640a5c952880882-5">5</div><div class="crayon-num crayon-striped-num" data-line="crayon-6495402640a5c952880882-6">6</div><div class="crayon-num" data-line="crayon-6495402640a5c952880882-7">7</div><div class="crayon-num crayon-striped-num" data-line="crayon-6495402640a5c952880882-8">8</div><div class="crayon-num" data-line="crayon-6495402640a5c952880882-9">9</div><div class="crayon-num crayon-striped-num" data-line="crayon-6495402640a5c952880882-10">10</div><div class="crayon-num" data-line="crayon-6495402640a5c952880882-11">11</div><div class="crayon-num crayon-striped-num" data-line="crayon-6495402640a5c952880882-12">12</div><div class="crayon-num" data-line="crayon-6495402640a5c952880882-13">13</div><div class="crayon-num crayon-striped-num" data-line="crayon-6495402640a5c952880882-14">14</div><div class="crayon-num" data-line="crayon-6495402640a5c952880882-15">15</div><div class="crayon-num crayon-striped-num" data-line="crayon-6495402640a5c952880882-16">16</div><div class="crayon-num" data-line="crayon-6495402640a5c952880882-17">17</div><div class="crayon-num crayon-striped-num" data-line="crayon-6495402640a5c952880882-18">18</div></div>
				</td>
						<td class="crayon-code"><div class="crayon-pre" style="font-size: 13px !important; line-height: 18px !important; -moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4;"><div class="crayon-line" id="crayon-6495402640a5c952880882-1"><span class="crayon-t">namespace</span><span class="crayon-h"> </span><span class="crayon-sy">:</span><span class="crayon-e">twitter </span><span class="crayon-st">do</span></div><div class="crayon-line crayon-striped-line" id="crayon-6495402640a5c952880882-2"><span class="crayon-h">&nbsp;&nbsp;</span><span class="crayon-i">desc</span><span class="crayon-h"> </span><span class="crayon-s">"post tweet"</span></div><div class="crayon-line" id="crayon-6495402640a5c952880882-3"><span class="crayon-h">&nbsp;&nbsp;</span><span class="crayon-i">task</span><span class="crayon-h"> </span><span class="crayon-sy">:</span><span class="crayon-i">tweet</span><span class="crayon-h"> </span>=<span class="crayon-h">&gt;</span><span class="crayon-h"> </span><span class="crayon-sy">:</span><span class="crayon-e">environment </span><span class="crayon-st">do</span></div><div class="crayon-line crayon-striped-line" id="crayon-6495402640a5c952880882-4"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-i">str</span><span class="crayon-h"> </span>=<span class="crayon-h"> </span><span class="crayon-s">"test"</span></div><div class="crayon-line" id="crayon-6495402640a5c952880882-5"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-i">client</span><span class="crayon-h"> </span>=<span class="crayon-h"> </span><span class="crayon-e">twitter_client</span></div><div class="crayon-line crayon-striped-line" id="crayon-6495402640a5c952880882-6"><span class="crayon-e">&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-i">client</span><span class="crayon-sy">.</span><span class="crayon-e">update</span><span class="crayon-sy">(</span><span class="crayon-i">str</span><span class="crayon-sy">)</span></div><div class="crayon-line" id="crayon-6495402640a5c952880882-7"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-i">p</span><span class="crayon-h"> </span><span class="crayon-e">str</span></div><div class="crayon-line crayon-striped-line" id="crayon-6495402640a5c952880882-8"><span class="crayon-e">&nbsp;&nbsp;</span><span class="crayon-st">end</span></div><div class="crayon-line" id="crayon-6495402640a5c952880882-9"><span class="crayon-st">end</span></div><div class="crayon-line crayon-striped-line" id="crayon-6495402640a5c952880882-10">&nbsp;</div><div class="crayon-line" id="crayon-6495402640a5c952880882-11"><span class="crayon-e">def </span><span class="crayon-e">twitter_client</span></div><div class="crayon-line crayon-striped-line" id="crayon-6495402640a5c952880882-12"><span class="crayon-e">&nbsp;&nbsp;</span><span class="crayon-i">client</span><span class="crayon-h"> </span>=<span class="crayon-h"> </span><span class="crayon-i">Twitter</span><span class="crayon-sy">:</span><span class="crayon-sy">:</span><span class="crayon-i">REST</span><span class="crayon-sy">:</span><span class="crayon-sy">:</span><span class="crayon-i">Client</span><span class="crayon-sy">.</span><span class="crayon-e">new </span><span class="crayon-st">do</span><span class="crayon-h"> </span><span class="crayon-sy">|</span><span class="crayon-i">config</span><span class="crayon-sy">|</span></div><div class="crayon-line" id="crayon-6495402640a5c952880882-13"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-i">config</span><span class="crayon-sy">.</span><span class="crayon-i">consumer_key</span><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>=<span class="crayon-h"> </span><span class="crayon-s">""</span></div><div class="crayon-line crayon-striped-line" id="crayon-6495402640a5c952880882-14"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-i">config</span><span class="crayon-sy">.</span><span class="crayon-i">consumer_secret</span><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp; </span>=<span class="crayon-h"> </span><span class="crayon-s">""</span></div><div class="crayon-line" id="crayon-6495402640a5c952880882-15"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-i">config</span><span class="crayon-sy">.</span><span class="crayon-i">access_token</span><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>=<span class="crayon-h"> </span><span class="crayon-s">""</span></div><div class="crayon-line crayon-striped-line" id="crayon-6495402640a5c952880882-16"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-i">config</span><span class="crayon-sy">.</span><span class="crayon-i">access_token_secret</span><span class="crayon-h"> </span>=<span class="crayon-h"> </span><span class="crayon-s">""</span></div><div class="crayon-line" id="crayon-6495402640a5c952880882-17"><span class="crayon-h">&nbsp;&nbsp;</span><span class="crayon-st">end</span></div><div class="crayon-line crayon-striped-line" id="crayon-6495402640a5c952880882-18"><span class="crayon-st">end</span></div></div></td>
					</tr>
				</table>
			</div>
		</div>

<p>&nbsp;</p>
<h2>完成！</h2>
<p>以上で、完成です。<br />
コンソール上で、<br />
rake twitter:tweet<br />
とたたけば、tweetがされます。</p>

Ruby On Railsのアプリケーションからツイートするには

Ruby On Railsから既存アプリケーションのデーターベースに接続する

<p>Railsとwordpressを一つのドメインで使用するという実装を行ったのでその導入方法のログを記事にしてみました。</p>
<p>passenger + apacheを利用している前提です。<br />
Railsアプリとwordpressを全く別のディレクトリに保存することも可能ですが、wordpressと同じディレクトリ内にインストールすれば、gitなど一つのリポジトリで管理できるので、同じディレトリ内に保存する方が楽だと思います。</p>
<h2>1 phpのインストール</h2>
<p>記事作成時点では公式の推奨phpのバージョンは5.6以降でしたので、今回インストールしたバージョンは5.6にいたしました。</p>

		<div id="crayon-649540263ec79405829604" class="crayon-syntax crayon-theme-monokai crayon-font-monaco crayon-os-mac print-yes notranslate" data-settings=" minimize scroll-mouseover wrap" style=" margin-top: 12px; margin-bottom: 12px; font-size: 13px !important; line-height: 18px !important;">
		
			<div class="crayon-toolbar" data-settings=" mouseover overlay hide delay" style="font-size: 13px !important;height: 19.5px !important; line-height: 19.5px !important;"><span class="crayon-title">add repository</span>
			<div class="crayon-tools" style="font-size: 13px !important;height: 19.5px !important; line-height: 19.5px !important;"><div class="crayon-button crayon-nums-button" title="Toggle Line Numbers"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-plain-button" title="Toggle Plain Code"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-wrap-button" title="Toggle Line Wrap"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-expand-button" title="Expand Code"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-copy-button" title="Copy"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-popup-button" title="Open Code In New Window"><div class="crayon-button-icon"></div></div></div></div>
			<div class="crayon-info" style="min-height: 19.5px !important; line-height: 19.5px !important;"></div>
			<div class="crayon-plain-wrap"><textarea  class="crayon-plain print-no" data-settings="dblclick" readonly style="-moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4; font-size: 13px !important; line-height: 18px !important;">
rpm -Uvh http://dl.fedoraproject.org/pub/epel/6/x86_64/epel-release-6-8.noarch.rpm
rpm -Uvh http://dl.iuscommunity.org/pub/ius/stable/Redhat/6/x86_64/ius-release-1.0-11.ius.el6.noarch.rpm
rpm -Uvh http://rpms.famillecollet.com/enterprise/remi-release-6.rpm</textarea></div>
			<div class="crayon-main" style="">
				<table class="crayon-table">
					<tr class="crayon-row">
				<td class="crayon-nums " data-settings="show">
					<div class="crayon-nums-content" style="font-size: 13px !important; line-height: 18px !important;"><div class="crayon-num" data-line="crayon-649540263ec79405829604-1">1</div><div class="crayon-num crayon-striped-num" data-line="crayon-649540263ec79405829604-2">2</div><div class="crayon-num" data-line="crayon-649540263ec79405829604-3">3</div></div>
				</td>
						<td class="crayon-code"><div class="crayon-pre" style="font-size: 13px !important; line-height: 18px !important; -moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4;"><div class="crayon-line" id="crayon-649540263ec79405829604-1"><span class="crayon-i">rpm</span><span class="crayon-h"> </span>-<span class="crayon-e">Uvh </span><span class="crayon-i">http</span><span class="crayon-sy">:</span><span class="crayon-c">//dl.fedoraproject.org/pub/epel/6/x86_64/epel-release-6-8.noarch.rpm</span></div><div class="crayon-line crayon-striped-line" id="crayon-649540263ec79405829604-2"><span class="crayon-i">rpm</span><span class="crayon-h"> </span>-<span class="crayon-e">Uvh </span><span class="crayon-i">http</span><span class="crayon-sy">:</span><span class="crayon-c">//dl.iuscommunity.org/pub/ius/stable/Redhat/6/x86_64/ius-release-1.0-11.ius.el6.noarch.rpm</span></div><div class="crayon-line" id="crayon-649540263ec79405829604-3"><span class="crayon-i">rpm</span><span class="crayon-h"> </span>-<span class="crayon-e">Uvh </span><span class="crayon-i">http</span><span class="crayon-sy">:</span><span class="crayon-c">//rpms.famillecollet.com/enterprise/remi-release-6.rpm</span></div></div></td>
					</tr>
				</table>
			</div>
		</div>

<p></p>

		<div id="crayon-649540263ec7d797314086" class="crayon-syntax crayon-theme-monokai crayon-font-monaco crayon-os-mac print-yes notranslate" data-settings=" minimize scroll-mouseover wrap" style=" margin-top: 12px; margin-bottom: 12px; font-size: 13px !important; line-height: 18px !important;">
		
			<div class="crayon-toolbar" data-settings=" mouseover overlay hide delay" style="font-size: 13px !important;height: 19.5px !important; line-height: 19.5px !important;"><span class="crayon-title">install php 5.6</span>
			<div class="crayon-tools" style="font-size: 13px !important;height: 19.5px !important; line-height: 19.5px !important;"><div class="crayon-button crayon-nums-button" title="Toggle Line Numbers"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-plain-button" title="Toggle Plain Code"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-wrap-button" title="Toggle Line Wrap"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-expand-button" title="Expand Code"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-copy-button" title="Copy"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-popup-button" title="Open Code In New Window"><div class="crayon-button-icon"></div></div></div></div>
			<div class="crayon-info" style="min-height: 19.5px !important; line-height: 19.5px !important;"></div>
			<div class="crayon-plain-wrap"><textarea  class="crayon-plain print-no" data-settings="dblclick" readonly style="-moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4; font-size: 13px !important; line-height: 18px !important;">
yum -y install --enablerepo=remi-php56 php</textarea></div>
			<div class="crayon-main" style="">
				<table class="crayon-table">
					<tr class="crayon-row">
				<td class="crayon-nums " data-settings="show">
					<div class="crayon-nums-content" style="font-size: 13px !important; line-height: 18px !important;"><div class="crayon-num" data-line="crayon-649540263ec7d797314086-1">1</div></div>
				</td>
						<td class="crayon-code"><div class="crayon-pre" style="font-size: 13px !important; line-height: 18px !important; -moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4;"><div class="crayon-line" id="crayon-649540263ec7d797314086-1"><span class="crayon-i">yum</span><span class="crayon-h"> </span>-<span class="crayon-i">y</span><span class="crayon-h"> </span><span class="crayon-i">install</span><span class="crayon-h"> </span>--<span class="crayon-i">enablerepo</span>=<span class="crayon-i">remi</span>-<span class="crayon-e">php56 </span><span class="crayon-i">php</span></div></div></td>
					</tr>
				</table>
			</div>
		</div>

<p></p>
<h2>２ wordpressのインストール</h2>
<p>wordpressをインストールしたいディレクトリで<br />
wget https://ja.wordpress.org/wordpress-4.5.2-ja.tar.gz<br />
tar xfvz wordpress-4.5.2-ja.tar.gz<br />
を実行します。インストールするurlは<a href="https://ja.wordpress.org/" target="_blank">公式サイト</a>で新しいものを指定します。<br />
実行すると、wordpressディレトリが生成されます。<br />
用途に応じてwordpressディレクトリを変更します。</p>
<h2>3 apacheの設定</h2>
<p></p>

		<div id="crayon-649540263ec7e397056332" class="crayon-syntax crayon-theme-monokai crayon-font-monaco crayon-os-mac print-yes notranslate" data-settings=" minimize scroll-mouseover wrap" style=" margin-top: 12px; margin-bottom: 12px; font-size: 13px !important; line-height: 18px !important;">
		
			<div class="crayon-toolbar" data-settings=" mouseover overlay hide delay" style="font-size: 13px !important;height: 19.5px !important; line-height: 19.5px !important;"><span class="crayon-title">edit httpd conf</span>
			<div class="crayon-tools" style="font-size: 13px !important;height: 19.5px !important; line-height: 19.5px !important;"><div class="crayon-button crayon-nums-button" title="Toggle Line Numbers"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-plain-button" title="Toggle Plain Code"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-wrap-button" title="Toggle Line Wrap"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-expand-button" title="Expand Code"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-copy-button" title="Copy"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-popup-button" title="Open Code In New Window"><div class="crayon-button-icon"></div></div></div></div>
			<div class="crayon-info" style="min-height: 19.5px !important; line-height: 19.5px !important;"></div>
			<div class="crayon-plain-wrap"><textarea  class="crayon-plain print-no" data-settings="dblclick" readonly style="-moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4; font-size: 13px !important; line-height: 18px !important;">
Alias /post "/var/www/html/Railsのアプリ名/wordpressをインストールしたディレクトリ/"
&lt;Directory /var/www/html/Railsのアプリ名/wordpressをインストールしたディレクトリ/&gt;
  PassengerEnabled Off
  AllowOverride All                       
&lt;/Directory&gt;</textarea></div>
			<div class="crayon-main" style="">
				<table class="crayon-table">
					<tr class="crayon-row">
				<td class="crayon-nums " data-settings="show">
					<div class="crayon-nums-content" style="font-size: 13px !important; line-height: 18px !important;"><div class="crayon-num" data-line="crayon-649540263ec7e397056332-1">1</div><div class="crayon-num crayon-striped-num" data-line="crayon-649540263ec7e397056332-2">2</div><div class="crayon-num" data-line="crayon-649540263ec7e397056332-3">3</div><div class="crayon-num crayon-striped-num" data-line="crayon-649540263ec7e397056332-4">4</div><div class="crayon-num" data-line="crayon-649540263ec7e397056332-5">5</div></div>
				</td>
						<td class="crayon-code"><div class="crayon-pre" style="font-size: 13px !important; line-height: 18px !important; -moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4;"><div class="crayon-line" id="crayon-649540263ec7e397056332-1"><span class="crayon-i">Alias</span><span class="crayon-h"> </span>/<span class="crayon-i">post</span><span class="crayon-h"> </span><span class="crayon-s">"/var/www/html/Railsのアプリ名/wordpressをインストールしたディレクトリ/"</span></div><div class="crayon-line crayon-striped-line" id="crayon-649540263ec7e397056332-2"><span class="crayon-h">&lt;</span><span class="crayon-i">Directory</span><span class="crayon-h"> </span>/<span class="crayon-t">var</span>/<span class="crayon-i">www</span>/<span class="crayon-i">html</span>/<span class="crayon-i">Rails</span>のアプリ名/<span class="crayon-i">wordpress</span>をインストールしたディレクトリ/<span class="crayon-h">&gt;</span></div><div class="crayon-line" id="crayon-649540263ec7e397056332-3"><span class="crayon-h">&nbsp;&nbsp;</span><span class="crayon-e">PassengerEnabled </span><span class="crayon-e">Off</span></div><div class="crayon-line crayon-striped-line" id="crayon-649540263ec7e397056332-4"><span class="crayon-e">&nbsp;&nbsp;</span><span class="crayon-e">AllowOverride </span><span class="crayon-i">All</span><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; </span></div><div class="crayon-line" id="crayon-649540263ec7e397056332-5"><span class="crayon-h">&lt;</span>/<span class="crayon-i">Directory</span><span class="crayon-h">&gt;</span></div></div></td>
					</tr>
				</table>
			</div>
		</div>

<p></p>
<p>今回はroot_url/postというアドレスにアクセスしたときにrailsではなくwordpressにアクセスするという設定にいたしました。</p>
<p>以上で設定は完了です。root_url/postにアクセスすれば、wordpressのいつものインストール画面が表示されます。</p>

Railsとwordpressを共存させる

<p>Ruby on Railsにbootstrapを使用したいときは、通常<br />
<a class="link" href="https://github.com/twbs/bootstrap-sass#a-ruby-on-rails" target="_blank">Bootstrap for Sass &#8211; GitHub</a><br />
のように、gemを利用することが多いですが、<br />
<em><strong>諸々の事情により</strong></em>、公式サイトよりインストールしたソース（しかもcss）を使用したい場合があるかと思いますが、そのときの設置方法を記事にしました。</p>
<h2>1. ファイルのインストール及び設置</h2>
<p>公式サイトよりダウンロードし、css、javascriptをそれぞれ<br />
app/assets/stylesheet<br />
app/assets/javascript<br />
に設置。また、glyphiconsのフォントを<br />
app/assets/font<br />
配下に配置する。</p>
<p>また、configにてconfig.assets.precompileによりcompileするassetsを指定している場合は、下記を追加する。</p>

		<div id="crayon-649540263e840651931066" class="crayon-syntax crayon-theme-monokai crayon-font-monaco crayon-os-mac print-yes notranslate" data-settings=" minimize scroll-mouseover wrap" style=" margin-top: 12px; margin-bottom: 12px; font-size: 13px !important; line-height: 18px !important;">
		
			<div class="crayon-toolbar" data-settings=" mouseover overlay hide delay" style="font-size: 13px !important;height: 19.5px !important; line-height: 19.5px !important;"><span class="crayon-title">add config.assets.precompile</span>
			<div class="crayon-tools" style="font-size: 13px !important;height: 19.5px !important; line-height: 19.5px !important;"><div class="crayon-button crayon-nums-button" title="Toggle Line Numbers"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-plain-button" title="Toggle Plain Code"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-wrap-button" title="Toggle Line Wrap"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-expand-button" title="Expand Code"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-copy-button" title="Copy"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-popup-button" title="Open Code In New Window"><div class="crayon-button-icon"></div></div></div></div>
			<div class="crayon-info" style="min-height: 19.5px !important; line-height: 19.5px !important;"></div>
			<div class="crayon-plain-wrap"><textarea  class="crayon-plain print-no" data-settings="dblclick" readonly style="-moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4; font-size: 13px !important; line-height: 18px !important;">
config.assets.precompile += %w(.eot .ttf .woff .woff2)</textarea></div>
			<div class="crayon-main" style="">
				<table class="crayon-table">
					<tr class="crayon-row">
				<td class="crayon-nums " data-settings="show">
					<div class="crayon-nums-content" style="font-size: 13px !important; line-height: 18px !important;"><div class="crayon-num" data-line="crayon-649540263e840651931066-1">1</div></div>
				</td>
						<td class="crayon-code"><div class="crayon-pre" style="font-size: 13px !important; line-height: 18px !important; -moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4;"><div class="crayon-line" id="crayon-649540263e840651931066-1"><span class="crayon-i">config</span><span class="crayon-sy">.</span><span class="crayon-i">assets</span><span class="crayon-sy">.</span><span class="crayon-i">precompile</span><span class="crayon-h"> </span>+=<span class="crayon-h"> </span><span class="crayon-sy">%</span><span class="crayon-e">w</span><span class="crayon-sy">(</span><span class="crayon-sy">.</span><span class="crayon-i">eot</span><span class="crayon-h"> </span><span class="crayon-sy">.</span><span class="crayon-i">ttf</span><span class="crayon-h"> </span><span class="crayon-sy">.</span><span class="crayon-i">woff</span><span class="crayon-h"> </span><span class="crayon-sy">.</span><span class="crayon-i">woff2</span><span class="crayon-sy">)</span></div></div></td>
					</tr>
				</table>
			</div>
		</div>

<p></p>
<h2>２. cssの書き換えを行う。</h2>
<p>上記のような設置方法の場合、glyphiconsのフォントは読み込まれないので、bootstrap.cssの書き換えを行う必要がある。<br />
まず、bootstrap.cssをbootstrap.css.erbにrenameを行う。<br />
その後、cssにてフォントをしている箇所にて、</p>

		<div id="crayon-649540263e844216893607" class="crayon-syntax crayon-theme-monokai crayon-font-monaco crayon-os-mac print-yes notranslate" data-settings=" minimize scroll-mouseover wrap" style=" margin-top: 12px; margin-bottom: 12px; font-size: 13px !important; line-height: 18px !important;">
		
			<div class="crayon-toolbar" data-settings=" mouseover overlay hide delay" style="font-size: 13px !important;height: 19.5px !important; line-height: 19.5px !important;"><span class="crayon-title"></span>
			<div class="crayon-tools" style="font-size: 13px !important;height: 19.5px !important; line-height: 19.5px !important;"><div class="crayon-button crayon-nums-button" title="Toggle Line Numbers"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-plain-button" title="Toggle Plain Code"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-wrap-button" title="Toggle Line Wrap"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-expand-button" title="Expand Code"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-copy-button" title="Copy"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-popup-button" title="Open Code In New Window"><div class="crayon-button-icon"></div></div></div></div>
			<div class="crayon-info" style="min-height: 19.5px !important; line-height: 19.5px !important;"></div>
			<div class="crayon-plain-wrap"><textarea  class="crayon-plain print-no" data-settings="dblclick" readonly style="-moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4; font-size: 13px !important; line-height: 18px !important;">
src: url('../fonts/glyphicons-halflings-regular.eot');</textarea></div>
			<div class="crayon-main" style="">
				<table class="crayon-table">
					<tr class="crayon-row">
				<td class="crayon-nums " data-settings="show">
					<div class="crayon-nums-content" style="font-size: 13px !important; line-height: 18px !important;"><div class="crayon-num" data-line="crayon-649540263e844216893607-1">1</div></div>
				</td>
						<td class="crayon-code"><div class="crayon-pre" style="font-size: 13px !important; line-height: 18px !important; -moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4;"><div class="crayon-line" id="crayon-649540263e844216893607-1"><span class="crayon-i">src</span><span class="crayon-sy">:</span><span class="crayon-h"> </span><span class="crayon-e">url</span><span class="crayon-sy">(</span><span class="crayon-s">'../fonts/glyphicons-halflings-regular.eot'</span><span class="crayon-sy">)</span><span class="crayon-sy">;</span></div></div></td>
					</tr>
				</table>
			</div>
		</div>

<p>から</p>

		<div id="crayon-649540263e846068373465" class="crayon-syntax crayon-theme-monokai crayon-font-monaco crayon-os-mac print-yes notranslate" data-settings=" minimize scroll-mouseover wrap" style=" margin-top: 12px; margin-bottom: 12px; font-size: 13px !important; line-height: 18px !important;">
		
			<div class="crayon-toolbar" data-settings=" mouseover overlay hide delay" style="font-size: 13px !important;height: 19.5px !important; line-height: 19.5px !important;"><span class="crayon-title"></span>
			<div class="crayon-tools" style="font-size: 13px !important;height: 19.5px !important; line-height: 19.5px !important;"><div class="crayon-button crayon-nums-button" title="Toggle Line Numbers"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-plain-button" title="Toggle Plain Code"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-wrap-button" title="Toggle Line Wrap"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-expand-button" title="Expand Code"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-copy-button" title="Copy"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-popup-button" title="Open Code In New Window"><div class="crayon-button-icon"></div></div></div></div>
			<div class="crayon-info" style="min-height: 19.5px !important; line-height: 19.5px !important;"></div>
			<div class="crayon-plain-wrap"><textarea  class="crayon-plain print-no" data-settings="dblclick" readonly style="-moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4; font-size: 13px !important; line-height: 18px !important;">
src: url(&lt;%= asset_path 'glyphicons-halflings-regular.eot' %&gt;);</textarea></div>
			<div class="crayon-main" style="">
				<table class="crayon-table">
					<tr class="crayon-row">
				<td class="crayon-nums " data-settings="show">
					<div class="crayon-nums-content" style="font-size: 13px !important; line-height: 18px !important;"><div class="crayon-num" data-line="crayon-649540263e846068373465-1">1</div></div>
				</td>
						<td class="crayon-code"><div class="crayon-pre" style="font-size: 13px !important; line-height: 18px !important; -moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4;"><div class="crayon-line" id="crayon-649540263e846068373465-1"><span class="crayon-i">src</span><span class="crayon-sy">:</span><span class="crayon-h"> </span><span class="crayon-e">url</span><span class="crayon-sy">(</span><span class="crayon-ta">&lt;%=</span><span class="crayon-h"> </span><span class="crayon-i">asset_path</span><span class="crayon-h"> </span><span class="crayon-s">'glyphicons-halflings-regular.eot'</span><span class="crayon-h"> </span><span class="crayon-ta">%&gt;</span><span class="crayon-sy">)</span><span class="crayon-sy">;</span></div></div></td>
					</tr>
				</table>
			</div>
		</div>

<p>のような書き換えを行う。</p>
<p>以上により、設置は完了です。<br />
こちらを参考に致しました。<br />
<a href="https://gist.github.com/anotheruiguy/7379570" target="_blank" class="link">anotheruiguy/web-fonts-asset-pipeline.md &#8211; GitHub</a></p>

Company

Our Solutions

Support

News

Blog

Blogブログ

カテゴリーから探す

年別から見る

記事一覧 - タグ: #ai

2024/10/30

2024/08/30

2024/06/07

2024/06/06

2024/04/26

2024/02/02

2023/10/05

2023/06/30

2023/04/28

2016/10/26

2016/10/12

2016/08/24

2016/08/24

2016/07/20

2016/07/06

2016/06/15

2016/06/08

2016/06/01