Suche senden
Hochladen
五行完成網頁多國語系
•
Als ODP, PDF herunterladen
•
15 gefällt mir
•
15,800 views
A
amostsai
Folgen
Unterhaltung & Humor
Technologie
Design
Melden
Teilen
Melden
Teilen
1 von 43
Jetzt herunterladen
Empfohlen
SQIP2015講演資料「チケット駆動開発の運用パターン集~問題はチケットに分割して統治せよ」
SQIP2015講演資料「チケット駆動開発の運用パターン集~問題はチケットに分割して統治せよ」
akipii Oga
Redmineの活用事例‐多様なプロジェクト管理に対するツールの適用
Redmineの活用事例‐多様なプロジェクト管理に対するツールの適用
Reiko Rikuno
VMware ESXi トラブルシューティング
VMware ESXi トラブルシューティング
Kazuhito Ohkawa
Kubernetes 基盤における非機能試験の deepdive(Kubernetes Novice Tokyo #17 発表資料)
Kubernetes 基盤における非機能試験の deepdive(Kubernetes Novice Tokyo #17 発表資料)
NTT DATA Technology & Innovation
Alpine.jsハンズオン
Alpine.jsハンズオン
AyakaNishiyama
Steam ゲーム内購入 サーバーサイド実装について
Steam ゲーム内購入 サーバーサイド実装について
KLab Inc. / Tech
今さら聞けない人のためのGitLabの始め方 Ubuntu編
今さら聞けない人のためのGitLabの始め方 Ubuntu編
VirtualTech Japan Inc./Begi.net Inc.
CyberAgent における OSS の CI/CD 基盤開発 myshoes #CICD2021
CyberAgent における OSS の CI/CD 基盤開発 myshoes #CICD2021
whywaita
Empfohlen
SQIP2015講演資料「チケット駆動開発の運用パターン集~問題はチケットに分割して統治せよ」
SQIP2015講演資料「チケット駆動開発の運用パターン集~問題はチケットに分割して統治せよ」
akipii Oga
Redmineの活用事例‐多様なプロジェクト管理に対するツールの適用
Redmineの活用事例‐多様なプロジェクト管理に対するツールの適用
Reiko Rikuno
VMware ESXi トラブルシューティング
VMware ESXi トラブルシューティング
Kazuhito Ohkawa
Kubernetes 基盤における非機能試験の deepdive(Kubernetes Novice Tokyo #17 発表資料)
Kubernetes 基盤における非機能試験の deepdive(Kubernetes Novice Tokyo #17 発表資料)
NTT DATA Technology & Innovation
Alpine.jsハンズオン
Alpine.jsハンズオン
AyakaNishiyama
Steam ゲーム内購入 サーバーサイド実装について
Steam ゲーム内購入 サーバーサイド実装について
KLab Inc. / Tech
今さら聞けない人のためのGitLabの始め方 Ubuntu編
今さら聞けない人のためのGitLabの始め方 Ubuntu編
VirtualTech Japan Inc./Begi.net Inc.
CyberAgent における OSS の CI/CD 基盤開発 myshoes #CICD2021
CyberAgent における OSS の CI/CD 基盤開発 myshoes #CICD2021
whywaita
Kubernetes環境に対する性能試験(Kubernetes Novice Tokyo #2 発表資料)
Kubernetes環境に対する性能試験(Kubernetes Novice Tokyo #2 発表資料)
NTT DATA Technology & Innovation
Cognitive Complexity でコードの複雑さを定量的に計測しよう
Cognitive Complexity でコードの複雑さを定量的に計測しよう
Shuto Suzuki
Redmineをちょっと便利に! プログラミング無しで使ってみるREST API
Redmineをちょっと便利に! プログラミング無しで使ってみるREST API
Go Maeda
いつやるの?Git入門
いつやるの?Git入門
Masakazu Matsushita
「電車でGO!!」アーケード大型3画面筐体で実在の街並みを表現するUE4開発事例
「電車でGO!!」アーケード大型3画面筐体で実在の街並みを表現するUE4開発事例
エピック・ゲームズ・ジャパン Epic Games Japan
C++でできる!OS自作入門
C++でできる!OS自作入門
uchan_nos
【Unite Tokyo 2019】【あら簡単】インテルのGPAを使ってあなたのUnityタイトルを高速化
【Unite Tokyo 2019】【あら簡単】インテルのGPAを使ってあなたのUnityタイトルを高速化
UnityTechnologiesJapan002
ドメイン駆動設計のプラクティスでカバーできること、できないこと[DDD]
ドメイン駆動設計のプラクティスでカバーできること、できないこと[DDD]
Koichiro Matsuoka
深入理解 CVE-2022-24765 漏洞的攻擊與防護策略 (Git v2.35.2)
深入理解 CVE-2022-24765 漏洞的攻擊與防護策略 (Git v2.35.2)
Will Huang
Nutanix Community Edition 5.18 徹底解説
Nutanix Community Edition 5.18 徹底解説
Satoshi Shimazaki
最近のOpenStackを振り返ってみよう
最近のOpenStackを振り返ってみよう
Takashi Kajinami
MySQLと正規形のはなし
MySQLと正規形のはなし
yoku0825
SCUGJ第22回勉強会:オンプレのL2 NetworkをAzureに延伸? Azure Extended Network
SCUGJ第22回勉強会:オンプレのL2 NetworkをAzureに延伸? Azure Extended Network
wind06106
Redmineでメトリクスを見える化する方法
Redmineでメトリクスを見える化する方法
Hidehisa Matsutani
スケーラブル SwiftUI プロジェクトにおける実用的な TCA モジュラー化
スケーラブル SwiftUI プロジェクトにおける実用的な TCA モジュラー化
규영 허
View customize pluginを使いこなす
View customize pluginを使いこなす
onozaty
RabbitMQ can scale out!!(jp ops-workshop-3)
RabbitMQ can scale out!!(jp ops-workshop-3)
NTT Communications Technology Development
GPU最適化入門
GPU最適化入門
Takahiro KOGUCHI
Agile Quality アジャイル品質パターン (QA2AQ)
Agile Quality アジャイル品質パターン (QA2AQ)
Hironori Washizaki
C#でOpenCL with OpenTK + Cloo
C#でOpenCL with OpenTK + Cloo
aokomoriuta
July.2011.w3ctech
July.2011.w3ctech
Kai Cui
Web设计 3 java_script初探(程序员与设计师的双重眼光)
Web设计 3 java_script初探(程序员与设计师的双重眼光)
ziggear
Weitere ähnliche Inhalte
Was ist angesagt?
Kubernetes環境に対する性能試験(Kubernetes Novice Tokyo #2 発表資料)
Kubernetes環境に対する性能試験(Kubernetes Novice Tokyo #2 発表資料)
NTT DATA Technology & Innovation
Cognitive Complexity でコードの複雑さを定量的に計測しよう
Cognitive Complexity でコードの複雑さを定量的に計測しよう
Shuto Suzuki
Redmineをちょっと便利に! プログラミング無しで使ってみるREST API
Redmineをちょっと便利に! プログラミング無しで使ってみるREST API
Go Maeda
いつやるの?Git入門
いつやるの?Git入門
Masakazu Matsushita
「電車でGO!!」アーケード大型3画面筐体で実在の街並みを表現するUE4開発事例
「電車でGO!!」アーケード大型3画面筐体で実在の街並みを表現するUE4開発事例
エピック・ゲームズ・ジャパン Epic Games Japan
C++でできる!OS自作入門
C++でできる!OS自作入門
uchan_nos
【Unite Tokyo 2019】【あら簡単】インテルのGPAを使ってあなたのUnityタイトルを高速化
【Unite Tokyo 2019】【あら簡単】インテルのGPAを使ってあなたのUnityタイトルを高速化
UnityTechnologiesJapan002
ドメイン駆動設計のプラクティスでカバーできること、できないこと[DDD]
ドメイン駆動設計のプラクティスでカバーできること、できないこと[DDD]
Koichiro Matsuoka
深入理解 CVE-2022-24765 漏洞的攻擊與防護策略 (Git v2.35.2)
深入理解 CVE-2022-24765 漏洞的攻擊與防護策略 (Git v2.35.2)
Will Huang
Nutanix Community Edition 5.18 徹底解説
Nutanix Community Edition 5.18 徹底解説
Satoshi Shimazaki
最近のOpenStackを振り返ってみよう
最近のOpenStackを振り返ってみよう
Takashi Kajinami
MySQLと正規形のはなし
MySQLと正規形のはなし
yoku0825
SCUGJ第22回勉強会:オンプレのL2 NetworkをAzureに延伸? Azure Extended Network
SCUGJ第22回勉強会:オンプレのL2 NetworkをAzureに延伸? Azure Extended Network
wind06106
Redmineでメトリクスを見える化する方法
Redmineでメトリクスを見える化する方法
Hidehisa Matsutani
スケーラブル SwiftUI プロジェクトにおける実用的な TCA モジュラー化
スケーラブル SwiftUI プロジェクトにおける実用的な TCA モジュラー化
규영 허
View customize pluginを使いこなす
View customize pluginを使いこなす
onozaty
RabbitMQ can scale out!!(jp ops-workshop-3)
RabbitMQ can scale out!!(jp ops-workshop-3)
NTT Communications Technology Development
GPU最適化入門
GPU最適化入門
Takahiro KOGUCHI
Agile Quality アジャイル品質パターン (QA2AQ)
Agile Quality アジャイル品質パターン (QA2AQ)
Hironori Washizaki
C#でOpenCL with OpenTK + Cloo
C#でOpenCL with OpenTK + Cloo
aokomoriuta
Was ist angesagt?
(20)
Kubernetes環境に対する性能試験(Kubernetes Novice Tokyo #2 発表資料)
Kubernetes環境に対する性能試験(Kubernetes Novice Tokyo #2 発表資料)
Cognitive Complexity でコードの複雑さを定量的に計測しよう
Cognitive Complexity でコードの複雑さを定量的に計測しよう
Redmineをちょっと便利に! プログラミング無しで使ってみるREST API
Redmineをちょっと便利に! プログラミング無しで使ってみるREST API
いつやるの?Git入門
いつやるの?Git入門
「電車でGO!!」アーケード大型3画面筐体で実在の街並みを表現するUE4開発事例
「電車でGO!!」アーケード大型3画面筐体で実在の街並みを表現するUE4開発事例
C++でできる!OS自作入門
C++でできる!OS自作入門
【Unite Tokyo 2019】【あら簡単】インテルのGPAを使ってあなたのUnityタイトルを高速化
【Unite Tokyo 2019】【あら簡単】インテルのGPAを使ってあなたのUnityタイトルを高速化
ドメイン駆動設計のプラクティスでカバーできること、できないこと[DDD]
ドメイン駆動設計のプラクティスでカバーできること、できないこと[DDD]
深入理解 CVE-2022-24765 漏洞的攻擊與防護策略 (Git v2.35.2)
深入理解 CVE-2022-24765 漏洞的攻擊與防護策略 (Git v2.35.2)
Nutanix Community Edition 5.18 徹底解説
Nutanix Community Edition 5.18 徹底解説
最近のOpenStackを振り返ってみよう
最近のOpenStackを振り返ってみよう
MySQLと正規形のはなし
MySQLと正規形のはなし
SCUGJ第22回勉強会:オンプレのL2 NetworkをAzureに延伸? Azure Extended Network
SCUGJ第22回勉強会:オンプレのL2 NetworkをAzureに延伸? Azure Extended Network
Redmineでメトリクスを見える化する方法
Redmineでメトリクスを見える化する方法
スケーラブル SwiftUI プロジェクトにおける実用的な TCA モジュラー化
スケーラブル SwiftUI プロジェクトにおける実用的な TCA モジュラー化
View customize pluginを使いこなす
View customize pluginを使いこなす
RabbitMQ can scale out!!(jp ops-workshop-3)
RabbitMQ can scale out!!(jp ops-workshop-3)
GPU最適化入門
GPU最適化入門
Agile Quality アジャイル品質パターン (QA2AQ)
Agile Quality アジャイル品質パターン (QA2AQ)
C#でOpenCL with OpenTK + Cloo
C#でOpenCL with OpenTK + Cloo
Ähnlich wie 五行完成網頁多國語系
July.2011.w3ctech
July.2011.w3ctech
Kai Cui
Web设计 3 java_script初探(程序员与设计师的双重眼光)
Web设计 3 java_script初探(程序员与设计师的双重眼光)
ziggear
TypeScript
TypeScript
Jason Tseng
给聚划算后端开发的前端培训
给聚划算后端开发的前端培训
j5726
浅析浏览器解析和渲染
浅析浏览器解析和渲染
Ailsa126
前端開發學習簡介
前端開發學習簡介
peterju
构建可维护的Javascript 小米网
构建可维护的Javascript 小米网
yang alex
日新培训
日新培训
pan quanjin
Exam 98-375 HTML5 Application Development Fundamentals
Exam 98-375 HTML5 Application Development Fundamentals
Chieh Lin
Node.js 進攻桌面開發
Node.js 進攻桌面開發
Fred Chien
从无阻塞并行脚本加载(Lab.js)到浏览器消息模型
从无阻塞并行脚本加载(Lab.js)到浏览器消息模型
Jackson Tian
移动Web开发框架jqm探讨
移动Web开发框架jqm探讨
newker
Dynamic JS Loader
Dynamic JS Loader
feifeipan
Web设计 2 工欲善其事(开发web项目工具的选择)
Web设计 2 工欲善其事(开发web项目工具的选择)
ziggear
使用Javascript及HTML5打造協同運作系統
使用Javascript及HTML5打造協同運作系統
Hsu Ping Feng
Html5
Html5
cazhfe
Cocoa on Rails 4th
Cocoa on Rails 4th
Xiaochun Shen
Web Development Roadmap
Web Development Roadmap
Alexander Shieh
React.js what do you really mean?
React.js what do you really mean?
昱安 周
Elixir 好用的編輯器
Elixir 好用的編輯器
bobo52310
Ähnlich wie 五行完成網頁多國語系
(20)
July.2011.w3ctech
July.2011.w3ctech
Web设计 3 java_script初探(程序员与设计师的双重眼光)
Web设计 3 java_script初探(程序员与设计师的双重眼光)
TypeScript
TypeScript
给聚划算后端开发的前端培训
给聚划算后端开发的前端培训
浅析浏览器解析和渲染
浅析浏览器解析和渲染
前端開發學習簡介
前端開發學習簡介
构建可维护的Javascript 小米网
构建可维护的Javascript 小米网
日新培训
日新培训
Exam 98-375 HTML5 Application Development Fundamentals
Exam 98-375 HTML5 Application Development Fundamentals
Node.js 進攻桌面開發
Node.js 進攻桌面開發
从无阻塞并行脚本加载(Lab.js)到浏览器消息模型
从无阻塞并行脚本加载(Lab.js)到浏览器消息模型
移动Web开发框架jqm探讨
移动Web开发框架jqm探讨
Dynamic JS Loader
Dynamic JS Loader
Web设计 2 工欲善其事(开发web项目工具的选择)
Web设计 2 工欲善其事(开发web项目工具的选择)
使用Javascript及HTML5打造協同運作系統
使用Javascript及HTML5打造協同運作系統
Html5
Html5
Cocoa on Rails 4th
Cocoa on Rails 4th
Web Development Roadmap
Web Development Roadmap
React.js what do you really mean?
React.js what do you really mean?
Elixir 好用的編輯器
Elixir 好用的編輯器
五行完成網頁多國語系
1.
五行完成 網頁多國語系
Amos Tsai August 19, 2012@COSCUP
2.
● 萬華社區大學、救國團
電腦老師 ● 曾經出沒地: H4, CloudTW, GTUG ● 目前擔任 H4 值日生
3.
目前使用的技能 : Nginx, uWSGI,
bottle, Python, MySQL, MySQLdb, Javascript, jQuery, HTML5, CSS3
4.
amos.tsai@gmail.com
amos.tsai amos-tsai.blogspot.com
5.
五行真的可以開發出網頁版多國語系嗎
6.
係真ㄟ
7.
以前用 gettext 好像有點複雜 會不會網頁版也一樣複雜?
8.
不會,反而更簡單!
9.
jQuery.i18n 有什麼優點
10.
●
相依性低 – jquery-1.3.0.min.js 以上 – jquery.i18n.js ● 體積小,載入速度快 - 3.2KB 無壓縮 ● 適合各種 framework ● 開發速度快 ● 學習曲線低
11.
JQuery i18n ●
2009 年由 Bryan W Berry 開發 ● MIT license ● https://github.com/bryanwb/jquery-i18n/
12.
原本的作法
13.
<script type='text/javascript' src='./jquery-1.3.2.min.js'></script> <script
type='text/javascript' src='./jquery.i18n.js'></script> <script type='text/javascript' src='./jquery.ne.json'></script> <script type='text/javascript' src='example.ne.json'></script> <script type='text/javascript'> $(document).ready(function(){ $._.setLocale('ne'); $('#example1').append("<div>" + $._('Welcome')+"</div>"); $('#example1').append("<div>" + $._n(90) + "</div>"); }); </script> <div id='example1'>Example using strings application-wide <br />
14.
現有作法不足之處
15.
●
手動預先加入語系檔 – 就算使用者用不到也要花費流量讀取檔案 ● 手動輸入使用者語系 – 可以直接讀取瀏覽器語系設定 ● 轉換文字必須放在 <script> 中 – 破壞 HTML 文字可閱讀性
16.
OpenSource 的精神
17.
覺得少了些什麼?
18.
自己改
19.
緊張刺激的 Demo
20.
其實只有講者會緊張 ....orz
21.
撰寫一個 HTML 檔 <!DOCTYPE
html> <html> <head> <meta charset="utf-8"> </head> <body> <span>Hello</span><span>World</span> </body> </html>
22.
載入 2 個
javascript 檔案 ● jquery-1.8.0.min.js ● jquery.i18n.js
23.
在要轉換的標籤加上 class='gettext'
24.
執行 genLocaleJson.py
產生語系檔
25.
根據每個語系檔進行翻譯
26.
移動語系檔到 language 資料夾
27.
// 幫 class="gettext"
的元素增加 gettext 屬性 $._.setAnchorByClass( 'gettext' ); // 根據語系設定替換網頁文字 $._.replaceByLocale( "language/hellow orld." + $._.getLocale() + ".json" );
28.
Just this!
29.
線上即時轉換語系
30.
$('.change').click( function() {
// 根據按鈕更改語系設定 $._.setLocale( $(this).text() ) // 根據語系設定替換網頁文字 $._.replaceByLocale( "language/helloworld." + $._.getLocale() + ".json" ); });
31.
製作語系切換鈕 <button class="change">jp</button> <button class="change">zh_TW</button>
32.
It's All
33.
Source Code 下載 https://bitbucket.org/amostsai/jquery.i18n
34.
35.
歡迎加入 Hacking Thursday Welcome
to Hacking Thursday ハッキング木曜日へようこそ
36.
1. 討論
web, network, programming, system, blablah…. 2. 交流系統工具 & 使用技巧 3. 八卦
37.
聚會地點 店家 : MarketPlace
( 市集 台北 站前 ) 地址 : 台北市重慶南路一段 1 號 2 樓 電話 : (02) 7725-2525 時間 : 每週四晚上 19:30-22:00
38.
最後 ...
39.
未來打算建立數位學習平台
40.
如果您對這個計畫有興趣 或是對相關技術有興趣 歡迎在任何場合與我聯繫:)
41.
Amos Tsai
0982-460-210 amos.tsai@gmail.com
42.
Q&A
43.
thank you
Jetzt herunterladen