プライバシーポリシー

当サイトに掲載されている広告について

当サイトでは、第三者配信の広告サービス（Googleアドセンス、 もしもアフィリエイト ）を利用しています。

このような広告配信事業者は、ユーザーの興味に応じた商品やサービスの広告を表示するため、当サイトや他サイトへのアクセスに関する情報 『Cookie』(氏名、住所、メール アドレス、電話番号は含まれません) を使用することがあります。

またGoogleアドセンスに関して、このプロセスの詳細やこのような情報が広告配信事業者に使用されないようにする方法については、こちらをクリックしてください。

当サイトが使用しているアクセス解析ツールについて

当サイトでは、Googleによるアクセス解析ツール「Googleアナリティクス」を利用しています。

このGoogleアナリティクスはトラフィックデータの収集のためにCookieを使用しています。

このトラフィックデータは匿名で収集されており、個人を特定するものではありません。

この機能はCookieを無効にすることで収集を拒否することが出来ますので、お使いのブラウザの設定をご確認ください。

この規約に関して、詳しくはこちら、またはこちらをクリックしてください。

当サイトへのコメントについて

当サイトでは、スパム・荒らしへの対応として、コメントの際に使用されたIPアドレスを記録しています。

これはブログの標準機能としてサポートされている機能で、スパム・荒らしへの対応以外にこのIPアドレスを使用することはありません。

また、メールアドレスとURLの入力に関しては、任意となっております。

全てのコメントは管理人であるナブラ・コルタンが事前にその内容を確認し、承認した上での掲載となりますことをあらかじめご了承下さい。
加えて、次の各号に掲げる内容を含むコメントは管理人の裁量によって承認せず、削除する事があります。

• 特定の自然人または法人を誹謗し、中傷するもの。
• 極度にわいせつな内容を含むもの。
• 禁制品の取引に関するものや、他者を害する行為の依頼など、法律によって禁止されている物品、行為の依頼や斡旋などに関するもの。
• その他、公序良俗に反し、または管理人によって承認すべきでないと認められるもの。

Google Apps Scriptを使い、たった一行で翻訳してみる ～再翻訳プログラムの作成～

こんにちは。

皆さん、英語は得意ですか？

僕は、別に苦手ではないけど、特別話せるほど得意なわけではない、という感じです。

英語じゃなくてもいいです。

日本語以外に使える言語は、ありますか？

世界のグローバル化に伴い、現在の僕たちには、英語の力が必要とされています。

それと同時に、コンピューターでは、AIを用いた翻訳技術も発達しています。

Google翻訳が一番有名ですかね。

まだ、こういった翻訳プログラムは、ぎこちない訳ができたりするなど、人間による翻訳にはかなわない面が多いです。

しかし、それでも、この技術は進化し続け、改良されきていますね。

人間による翻訳が不要になるのも、遠い未来のことではないかもしれません。




前置きが少々長くなってしまったので、そろそろ本題に入ります。

今回のテーマは、「Google Apps Scriptで翻訳をし、再翻訳プログラムを作成する」です。

Google Apps Scriptとは

Google Apps Scriptは、Googleが提供する11のサービスをクラウド上でスクリプトを実行することで操作できるサービスです。

略して、「GAS」と表記されることが多いです。

Javascriptベースなので、とてもコードがわかりやすいです。

基本的には無料で使えます。
（回数制限などがあったりするが、個人利用なら全然問題ないスペック）

GASの始め方ですが、2通りあります。

• Standalone Script (ドライブ上に単独で存在するもの)
• Container Bound Script (スプレッドシートに紐づくもの)

今回は、上の、単独で動かす方を用います。
どちらでも、同じようにできますが。

Google Apps Scriptで翻訳するコード

では、いよいよ、Google Apps Scriptを用いて、翻訳してみようと思います。

ここまで、いろいろ長々しく説明してきましたが、翻訳のコードはいたって簡単です。


さすが、Googleさんですね。

翻訳のコード

var result = LanguageApp.translate(メッセージ, 翻訳前の言語, 翻訳後の言語);

ね。簡単でしょ。

「メッセージ」というところには、翻訳したい文章を、「翻訳前の言語」「翻訳後の言語」というところにはそれぞれ、翻訳する前後の言語コードを英語で記入します。

言語コードというのは、この辺のサイトに書いてあるので、見てください。

ISO639で規定されている2文字言語コード

実際に使用してみると、こんな感じです。

var result = LanguageApp.translate("こんにちは。", "ja", "en");

どうでしょうか。

「こんにちは」という日本語を英語に翻訳して、resultという変数に、結果を代入しています。

基礎的な内容なので、これを覚えておけば、いろいろ活用できるはずです。

再翻訳プログラムを作る

まず、ここでいう再翻訳とは、「一度翻訳した言語を、また元の言語に翻訳し直すこと」です。

皆さん、YouTubeとかで観たことありませんか？

「○○○をGoogleで再翻訳して歌ってみた」

みたいなやつです。

Google翻訳などを使用すると、多少文章がくずれて、おかしなことになります。

これを繰り返すことで、同じ言語でも、もとの文章とはちがうものになるんですよね。

ときには、意味がまったく異なる文になることも。


不意に面白い文章ができたりするのが、この再翻訳です。

普通にGoogle翻訳アプリでやろうとすると、2度手間になりがちです。

ということで、GASを用いた再翻訳プログラムを作成したいと思います。

超簡単にできます。

「日本語」⇒「英語」⇒「日本語」

という操作をするだけですから。

完成したコードはこちら。

function ReTranslation(msg){

 var message = msg;
 var tmp = LanguageApp.translate(message , "ja", "en");
 var result = LanguageApp.translate(tmp , "en", "ja");

 return result;

}

あとはこの関数を呼び出すだけです。

引数に文章を渡し、結果を戻り値として受け取ります。

簡単なのでぜひ試してみてください。
いろいろと、応用できるはずです。

では、さようなら。
また、お会いしましょう。

HTMLでブロック要素にリンクを貼りたいなら、無理にdivタグを使うより、aタグをブロックにしたほうが楽かも!

こんにちは。

皆さんは、ブログ・サイトにおいて、ブロック要素にリンクを貼りたいと思ったことはありませんか？

ブロック要素といえば、divタグですよね。
他には、pタグ、ulタグ、tableタグ、hタグ、formタグなどがあります。



こういったブロック要素を使用することで、HTML文章内において、ブロック（まとまり）を作ることができます。

一方、HTMLでリンクを貼る場合、使用するタグは「aタグ」です。

ですが、これはブロック要素ではなく、インライン要素です。

インライン要素には、aタグの他に、imgタグ、inputタグ、textareaタグ、brタグ、などがあります。



普通、サイトでリンクを貼るとすれば、ただのテキストや画像などでしょう。

ただのテキストにリンクを貼るならば、aタグを使用すればいいですし、画像にリンクを貼るならば、imgタグをaタグで囲えばいいです。

画像にリンクを貼るというのは、imgタグがインライン要素であるからこそ、実現可能なのです。

では、ブロック要素にリンクを貼りたい場合は、どうすればよいでしょうか。

ブロック要素にリンクを貼りたい

例えば、「divタグをクリックしたら、別のページに飛ばしたい。」ということを考えたとします。

僕は、このツールを作ろうとしたときに思いました。

LINEスタンプをブログ・サイトで紹介するための埋め込みHTMLタグを自動生成するツール

このツールでは、 「LINEスタンプの紹介タグを生成する」ことができます。

見てもらえばお分かりになると思いますが、生成されたLINEスタンプのタグをクリックすると、対象スタンプのSTOREページが開くような使用になっております。

このLINEスタンプのタグがブロック要素なのです。



普通に考えれば、画像の時と同じように、aタグで対象の要素を囲えばいいと思いますよね。

しかし、HTMLには、こんなルールがあるのです。

インライン要素の中にブロック要素を入れるのはNG

困りましたね。

解決方法

調べてみると、「divタグ、そして、ブロック化されたaタグを用意し、これらをcssで重ねる」みたいな方法が見つかりました。

「aタグをブロック要素化するのならば、わざわざdivタグを用意して重ねる、みたいなことをしなくてもいいのではないか」、と思い、aタグだけでやってみたらできたので、ご紹介します。

＊ひょっとしたら、divタグとaタグを重ねるという方法の方でなければいけない理由があるのかもしれませんが、今回は特に気にせずにいきます。

まず、ブロック要素を用意します。

<a style="display: block;text-decoration:none;" href="ここにurl">

    ～ここが中身～

</a>

aタグのstyleでブロック要素にしています。
ついでに、リンクらしさを消すために、下線を無しにしています。

href=””　のところには、リンク先のサイトのurlを書きます。

このタグの中に、ブロックとして表示したいものを入れればよいわけです。

例えば、こんな感じです。

<a style="padding: 5px; margin-bottom: 5px; border: 1px solid #333333; border-radius: 10px;width:500px;max-width:90%;min-height: 140px;display: block;text-decoration:none;"
    href="ここにurl">

    <img src="画像のurl" style="width:150px;float:right;">
    <div style="color:black;font-size: 20px;font-weight: bold;">Earth Hand ～見る麻薬～</div>
    <p style="color:black;">今から、約666億年前、無の世界の一部に、極めて微小な空間があった。その空間は、プロクルステスと呼ばれ、科学技術が発達した都市を持つ惑星が、多く存在していた。</p>

</a>

実際に、urlなどを含めて表示すると、こうなります。

Earth Hand ～見る麻薬～

今から、約666億年前、無の世界の一部に、極めて微小な空間があった。その空間は、プロクルステスと呼ばれ、科学技術が発達した都市を持つ惑星が、多く存在していた。

クリックすると、Youtubeのページが開くと思います。

いちおう正常に動くので、このやり方で大丈夫だと思います。

ぜひ、やってみてください。

では、さようなら。
また、お会いしましょう。

無料コードエディタなら「Visual Studio Code」がおすすめ！～自動整形機能・画面分割機能など～

こんにちは。
今回は、おすすめのコードエディタをご紹介します。

プログラムを書いたり、ホームページをhtmlで作ったり、普通の文章を書いたり、など、パソコンでは「テキストエディタ」を使う場面があると思ます。

そんなとき、皆さんはどんなエディタ使用していますか？

Windows標準搭載の「メモ帳」なんかを使っていませんか？

簡単なテキストなら、Windowsの「メモ帳」でも十分だと思います。

しかし、複雑なプログラムになったり、長ーいテキストなんかだと、「メモ帳」では不便だと思われます。


Windowsの「メモ帳」は、文章を書く必要最低限度の機能しかなく、複雑な処理には向かないからです。

じゃあどうすればいいのかと言うと、もっと高機能なテキストエディタを使用すればいいのです。

ということで、今回はおすすめな無料コードエディタ「Visual Studio Code」をご紹介します。

ちなみに、有名な無料テキストエディタだと、次のようなものがあります。

• Visual Studio Code
• Sublime Text
• Atom
• サクラエディタ
• Notepad++
• TeraPad

他にもいろいろありますが、今回は「Visual Studio Code」を紹介することが目的なので、このくらいにしておきます。

Visual Studio Codeとは

Visual Studio Codeは、マイクロソフトにより開発されたソースコードエディタで、Windows、Linux、macOS上で動作します。

デバッグ、Gitクライアントの統合、シンタックスハイライト、インテリセンス、スニペット、リファクタリングなどの機能を持ちます。

拡張機能を入れることによって、機能を増やすことができます。

また、カスタマイズもでき、利用者はエディタのテーマやキーボードショートカット等を変更できます。

ざっとこんな感じですね。

「Visual Studio Code」がおすすめな理由

では、なぜこのソフトがおすすめなのかを説明していきます。

動作がとても軽い

起動から編集、そして終了までのすべての操作が、軽くて速いです。

テキストエディタというのは、思い立ったらすぐ書ける、そんな起動の速さがとても重要です。

起動やその他の動作が遅いエディタでは、作業効率が悪くなるだけではなく、やる気や意欲なども低下してしまいます。

例えば、「Visual Studio Community」です。
（これは、シンプルなテキストエディタとはちょっと違いますが。コードエディタというよりは、IDEですね。）

このソフト、高機能すぎるだけに、起動が少々重いです。
（PCの性能にもよりますね。）

起動が遅いと、その間に、やる気・しようとしていたことの記憶なども薄れていくことでしょう。

つまり、動作は速いほうがいいのです。


「Visual Studio Code」は、そういった面で優れています。

コードの自動色付け（ハイライト）

これは、プログラミングをする人には、欲しい機能ですね。

Visual Studio Codeでは、入力したプログラミング言語に応じて、ソースコードを色分けしてくれます。

例えば、こんな感じです。

<HTMLの例>

<Javascriptの例>

どうでしょうか。

きっと見やすいはずです。

プログラミングや、タグうちによるホームページ作成などにとって、ソースコードの見やすさというのは、重要なポイントとなります。

見直しなどの作業がやりやすいですからね。

入力支援機能

続いて、「入力支援機能」です。

プログラミングをする人などにとって、長い構文をすべて自分で打つのには、少し時間がかかることですよね。

そんな入力を補助してくれるのが、この機能です。

編集しているファイルの形式に応じて、入力途中に「入力候補」を出してくれます。

Tabキーなどで、その候補を選択するだけで、長い命令なども一発で入力できます。

これにより、入力ミスなども、各段に減りますね。

自動整形機能

皆さんは、プログラムを書くとき、「見やすさ」にこだわっていますか？

プログラムコードというのは、基本的に、どんなに汚くても（文字が詰まっているなど）動きます。

Pythonは、ちょっと例外ですが。
（インデントに注意しなければ、エラーがでるんですね。）

ただ、動作は正常だからと言って、ソースが汚いと、見栄えは悪いし、後での修正もしにくいです。

そんなコードの整形を助けてくれるのが、この機能です。

ということで、この機能を使ってみましょう。

まず、この機能を有効にします。

「ファイル」⇒「基本設定」⇒「設定」を開きます。

上に検索窓があると思うので、そこから「formaton」で検索します。

「editor.formatOn～」となっている項目すべてにおいて、左側のチェックボックスにチェックをいれ、有効にします。

これで準備は完了です。

あとは普通にコードを書いていくだけです。

「コード入力時」もしくは「ファイル上書き保存時」に、コードが自動整形されます。

[Before]

⇩

[After]

見やすくなりました。

画面分割機能

これは、同じウインドウ内で、複数のファイルを並べて表示できる機能です。

こんな感じに。

これにより、「複数のファイルの比較」、「見本を見ながら打つ」など、他様々なことに応用できます。

エラー部分の表示

このように、間違っている箇所に赤波線がでます。


これにより、どこで間違えているのかが、一発でわかりますね。

ローカルサーバー機能

これは、HTML5 + Javascript でWebアプリを作っている人などには、欲しい機能ですね。

Javascriptで作ったものには、ローカルで動かすのと、サーバーで動かすのでは、挙動が異なってしまうようなものがあります。

WebGLなどがその例です。

実際に公開する際は、サーバー上で動かすのですから、そちらのテストをしなければなりません。

しかし、いちいちサーバーにアップロードしてテストをしていたのでは、面倒くさいし、効率が悪いですよね。

そこで役立つのが、このローカルサーバーです。

ローカルにサーバーを立てることで、これらの問題点を解決できます。

では、使っていきましょう。

ローカルサーバー機能は「Live Server」という拡張機能を入れることで利用できるようになりますので、まず、この機能を追加しましょう。

「ファイル」⇒「基本設定」⇒「拡張機能」を選択します。

そうしたら、検索窓から「Live Server」で検索し、インストールします。
（僕は既にインストール済みです。）

その後、「Visual Studio Code」を再起動させておきましょう。

これで準備はできました。

あとは、対象のHTMLファイルを開きましょう。

この時、注意しなくてはならないのは、そのファイルは、「ファイルを開く」からではなく、「フォルダーを開く」というところから、開いてください。

単にHTMLファイルを開いただけでは、このローカルサーバー機能は作動しません。

HTMLファイルが置いてあるフォルダーごと、読み込んでください。

それができたら、あとは、エクスプローラーからファイルを右クリックして、サーバーを起動するだけです。


ブラウザが開いて、実行してくれます。

ソースコードを右クリックして、「Stop ～」みたいなやつを選択すれば、サーバーを停止することもできます。

パソコンのipアドレスを調べておけば、そのパソコン内だけでなく、同じネットワーク環境内のデバイス（スマホ、タブレット、その他のPCなど）からもアクセスすることもできます。

もちろん、ポート開放などを行っていなければ、外部のネットワークからアクセスすることはできませんので、ご安心ください。

「Visual Studio Code」の不便な点

今のところ、特に困った点は、ございません。

もし何かデメリットがあるのであれば、コメント欄にお願いします。

終わりに

とにかく、素晴らしいテキストエディタです。

この「Visual Studio Code」を使用して、作業効率を上げてきましょう。

以上です。

さようなら。
また次回、お会いしましょう。