20190127のHTMLに関する記事は4件です。

投稿日：2019-01-27T21:51:12+09:00

WebページにGoogle Map埋め込む[Google Maps API]

Google Maps APIを使えば場所や経路表示を埋め込める

店や会社のアクセスなどで使われているよく見るMapです。
昔はAPIキーを使わなくても表示できたようですが、今はAPIキーが必要です。
通常のサイト程度なら課金されることはないとのことですが、読み込み回数が一定以上になると課金されます。

ただ、制限をかけられますので設定をミスしなければ課金されなので安心して使いましょう。

登録して使い始める

APIキーを取得するために、まずはGoogle Cloud Platform

Google Cloud

「コンソール」からでもいいみたいですが「使ってみる」クリックして

Mapを使いますので☑

プロジェクトは何でもいいですが名前を決めましょう。

有効化されていなかったら

左上のメニュー　→　APIとサービス　→　ダッシュボード

有効化します。

webアプリに使うのでjavascript使うことにします。

こんな画面なる

APIを使えるようにする

認証情報を作成して使えるようにしていきます。

APIキー選択

自分のキーが出ます。閉じないで「キーを制限」クリック

不正に使われないように制限を付ける

httpリファラーで制限を付けます。
使用するサイトのURL入れる。*はワイルドカード。www.やrootパス以下に適用します。
開発環境ならlocalhostなど。

http://*.example.com/*（http の場合） https://*.example.com/*（https の場合） http://localhost/* とか http://*.localhost/*

複数登録できるので開発環境と本番環境登録しておくとよい思います。

APIの制限もしておきます。

今回はまだJavaScriptしか使っていないので１項目しかなかったですが、複数あった場合は使うものだけ選択します。

割り当て上限を設定する
APIサービス　→　下のほうにある Maps JavaScript API　→ 割り当て

記事作成現在、一か月の読み込み回数が28500回なので28500 / 30 = 950

なので900とか800とか入れておきます。そうすれば課金はされません。
(回数は確認しておきましょう。ちゃんと設定していれば上限を超える方が難しいはずです。)

課金登録

ところで、課金設定していないとこんな画面が出ます。
面倒ですがクレジットの登録が必要です。設定ができていれば課金されることはないですので設定してしまいましょう。

マップを表示させる

サンプルコードを何も書いていないページにコピペすればこんな感じで最初は表示されると思います。

サンプルコード1
サンプルコード2

見たい場所を指定

latとlng：数字を入れれば特定の場所に合わせることができます。緯度と経度です。
ツールを使って数字を調べて入力すればOK

zoom：大きくなるほどズーム。1が世界地図。20が建物レベル。調整しましょう。
経度と緯度を調べる

該当箇所を変更すれば好きな場所にズームできます。
center: {lat: -34.397, lng: 150.644},
zoom: 8
その他のサンプル

Maps Javascript API 以外もありますが経路など表示できるようです。
サンプル：経路


英語ですが他にも様々なパターンがあります。サイドバーから確認して使ってみるといいと思います。

何個も使う場合キーのアクセス回数制限設定に気をつけましょう。

　 Tweet
Qiitaで続きを読む

投稿日：2019-01-27T20:52:28+09:00

ExcelでGoogle Translateを呼び出すマクロ

Google Spread SheetのGoogleTranslate関数ってすごいなーって思い、Excelでも何かしらできないかなと思い作ってみた。
できるだけ汎用的にするためにAPIは使わないようにしようとしてみた。
自分だけの備忘になるのかなと思うのですがご参考までに。

1. で、結局なにができたの？

VBA上で、GoogleTranslate("hello!", lgEnglish, lgJapanese) とすると、英語の"hello!"をGoogle translateで翻訳して"こんにちは！"と返してくれる関数を作ってみた。

2.詳細を教えて？ででてくるのコードを全部vbeに貼り付けて、その後に次のsampleコードをvbeにコピペして実行すると"A1"セルの英語テキストを"B1"に日本語にして返してくれるよ！

Sample

Sub translate_sample()

Set wb = Thisworkbook
Set ws = wb.worksheets("Sheet1")

Dim str_en as String

str_en = ws.Cells(1,1).text
str_jp = GoogleTranslate(str_en, lgEnglish, lgJapanese)

ws.Cells(1,2) = str_jp

End Sub

2. 詳細をおしえて？

まずは、ほとんど以下のサイトにある内容をとってくる。
が、2018年の12月にGoogle Translateのソースが変更されたようで、うまいこと動かない。。

▼Google翻訳で文字列を翻訳するVBAマクロ(IE操作版)
https://www.ka-net.org/blog/?p=7694

そこで、少々修正を加えたものをのせとく。
まずは、引用元のコードを丸パクリして「言語コードを元に適切な翻訳ページを呼ぶ」準備をする。

Enum_Lang

Option Explicit

Private Enum Lang

  lgIcelandic = 0 'アイスランド語
  lgIrish = 1 'アイルランド語
  lgAzerbaijani = 2 'アゼルバイジャン語
  lgAfrikaans = 3 'アフリカーンス語
  lgAmharic = 4 'アムハラ語
  lgArabic = 5 'アラビア語
  lgAlbanian = 6 'アルバニア語
  lgArmenian = 7 'アルメニア語
  lgItalian = 8 'イタリア語
  lgYiddish = 9 'イディッシュ語
  lgIgbo = 10 'イボ語
  lgIndonesian = 11 'インドネシア語
  lgWelsh = 12 'ウェールズ語
  lgUkrainian = 13 'ウクライナ語
  lgUzbek = 14 'ウズベク語
  lgUrdu = 15 'ウルドゥー語
  lgEstonian = 16 'エストニア語
  lgEsperanto = 17 'エスペラント語
  lgDutch = 18 'オランダ語
  lgKazakh = 19 'カザフ語
  lgCatalan = 20 'カタロニア語
  lgGalician = 21 'ガリシア語
  lgKannada = 22 'カンナダ語
  lgGreek = 23 'ギリシャ語
  lgKyrgyz = 24 'キルギス語
  lgGujarati = 25 'グジャラート語
  lgKhmer = 26 'クメール語
  lgKurdish = 27 'クルド語
  lgCroatian = 28 'クロアチア語
  lgXhosa = 29 'コサ語
  lgCorsican = 30 'コルシカ語
  lgSamoan = 31 'サモア語
  lgJavanese = 32 'ジャワ語
  lgGeorgian = 33 'ジョージア語
  lgShona = 34 'ショナ語
  lgSindhi = 35 'シンド語
  lgSinhala = 36 'シンハラ語
  lgSwedish = 37 'スウェーデン語
  lgZulu = 38 'ズールー語
  lgScottishGaelic = 39 'スコットランド・ゲール語
  lgSpanish = 40 'スペイン語
  lgSlovak = 41 'スロバキア語
  lgSlovenian = 42 'スロベニア語
  lgSwahili = 43 'スワヒリ語
  lgSundanese = 44 'スンダ語
  lgCebuano = 45 'セブアノ語
  lgSerbian = 46 'セルビア語
  lgSomali = 47 'ソマリ語
  lgThai = 48 'タイ語
  lgFilipino = 49 'タガログ語
  lgTajik = 50 'タジク語
  lgTamil = 51 'タミル語
  lgCzech = 52 'チェコ語
  lgTelugu = 53 'テルグ語
  lgDanish = 54 'デンマーク語
  lgGerman = 55 'ドイツ語
  lgTurkish = 56 'トルコ語
  lgNyanja = 57 'ニャンジャ語
  lgNepali = 58 'ネパール語
  lgNorwegian = 59 'ノルウェー語
  lgHaitianCreole = 60 'ハイチ語
  lgHausa = 61 'ハウサ語
  lgPashto = 62 'パシュトゥー語
  lgBasque = 63 'バスク語
  lgHawaiian = 64 'ハワイ語
  lgHungarian = 65 'ハンガリー語
  lgPunjabi = 66 'パンジャブ語
  lgBurmese = 67 'ビルマ語
  lgHindi = 68 'ヒンディー語
  lgFinnish = 69 'フィンランド語
  lgFrench = 70 'フランス語
  lgBulgarian = 71 'ブルガリア語
  lgVietnamese = 72 'ベトナム語
  lgHebrew = 73 'ヘブライ語
  lgBelarusian = 74 'ベラルーシ語
  lgPersian = 75 'ペルシア語
  lgBengali = 76 'ベンガル語
  lgPolish = 77 'ポーランド語
  lgBosnian = 78 'ボスニア語
  lgPortuguese = 79 'ポルトガル語
  lgMaori = 80 'マオリ語
  lgMacedonian = 81 'マケドニア語
  lgMalagasy = 82 'マダガスカル語
  lgMarathi = 83 'マラーティー語
  lgMalayalam = 84 'マラヤーラム語
  lgMaltese = 85 'マルタ語
  lgMalay = 86 'マレー語
  lgMongolian = 87 'モンゴル語
  lgHmong = 88 'モン語
  lgYoruba = 89 'ヨルバ語
  lgLao = 90 'ラオ語
  lgLatin = 91 'ラテン語
  lgLatvian = 92 'ラトビア語
  lgLithuanian = 93 'リトアニア語
  lgRomanian = 94 'ルーマニア語
  lgLuxembourgish = 95 'ルクセンブルク語
  lgRussian = 96 'ロシア語
  lgEnglish = 97 '英語
  lgKorean = 98 '韓国語
  lgWesternFrisian = 99 '西フリジア語
  lgChineseSimplified = 100 '中国語（簡体）
  lgChineseTraditional = 101 '中国語（繁体）
  lgJapanese = 102 '日本語
  lgAuto = 103 '言語を検出する

End Enum

Private Function GetActiveIE(ByVal url As String) As Object

'URLを指定して起動中のIE取得

  Dim o As Object

  For Each o In GetObject("new:{9BA05972-F6A8-11CF-A442-00A0C90A8F39}") 'ShellWindows
    If LCase(TypeName(o)) = "iwebbrowser2" Then
      If LCase(TypeName(o.document)) = "htmldocument" Then
        If o.LocationURL Like "*" & url & "*" Then
          Set GetActiveIE = o
          Exit For
        End If
      End If
    End If
  Next
End Function

Private Function GetLangCode(ByVal LangNo As Lang) As String
'言語コード取得
  Dim v As Variant

  v = Array("is", "ga", "az", "af", "am", "ar", "sq", "hy", "it", "yi", _
            "ig", "id", "cy", "uk", "uz", "ur", "et", "eo", "nl", "kk", _
            "ca", "gl", "kn", "el", "ky", "gu", "km", "ku", "hr", "xh", _
            "co", "sm", "jv", "ka", "sn", "sd", "si", "sv", "zu", "gd", _
            "es", "sk", "sl", "sw", "su", "ceb", "sr", "so", "th", "tl", _
            "tg", "ta", "cs", "te", "da", "de", "tr", "ny", "ne", "no", _
            "ht", "ha", "ps", "eu", "haw", "hu", "pa", "my", "hi", "fi", _
            "fr", "bg", "vi", "iw", "be", "fa", "bn", "pl", "bs", "pt", _
            "mi", "mk", "mg", "mr", "ml", "mt", "ms", "mn", "hmn", "yo", _
            "lo", "la", "lv", "lt", "ro", "lb", "ru", "en", "ko", "fy", _
            "zh-CN", "zh-TW", "ja", "auto")

  GetLangCode = v(LangNo)

End Function

そして次に、訳したいテキストをGoogle Translateのページに貼り付けて、翻訳ボタンをクリックして、翻訳後のテキストを取得する関数を作ってみた。

GoogleTranslate

Private Function GoogleTranslate(ByVal TranslateText As String, _
Optional ByVal SourceLanguage As Lang = lgAuto, _
Optional ByVal TargetLanguage As Lang = lgEnglish)

  Dim url As String
  Dim src_cd As String
  Dim target_cd As String
  Dim ie As Object 'Internet Explorer
  Dim elmClear As Object 'HTMLDivElement
  Dim elmOtfSwitch As Object 'HTMLAnchorElement
  Dim elmSourceArea As Object 'HTMLTextAreaElement
  Dim elmSubmit As Object 'HTMLInputElement
  Dim elmResult As Object 'HTMLOutputElement

  Const READYSTATE_COMPLETE = 4

  '言語コード取得

  src_cd = GetLangCode(SourceLanguage)
  target_cd = GetLangCode(TargetLanguage)

  url = "https://translate.google.co.jp/?hl=ja#"; & src_cd & "/" & target_cd & "/"

  Set ie = GetActiveIE("translate.google.co.jp")

  If ie Is Nothing Then
    Set ie = CreateObject("InternetExplorer.Application")

    With ie
      .AddressBar = False
      .MenuBar = False
      .StatusBar = False
      .Toolbar = False
      .Visible = True
    End With

  End If

  With ie

    .Navigate url

    While .Busy Or .readyState <> READYSTATE_COMPLETE
      DoEvents
    Wend

    'テキストを消去ボタンクリック

    On Error Resume Next
    Set elmClear = .document.getElementById("gt-clear")
    On Error GoTo 0

    If Not elmClear Is Nothing Then elmClear.Click

    'リアルタイム翻訳を無効にする

    On Error Resume Next
    Set elmOtfSwitch = .document.getElementById("gt-otf-switch")
    On Error GoTo 0

    If Not elmOtfSwitch Is Nothing Then
      If InStr(elmOtfSwitch.innerText, "無効") Then elmOtfSwitch.Click
    End If

    '翻訳元テキストエリアに値をセット

    On Error Resume Next
    Set elmSourceArea = .document.getElementById("source")
    On Error GoTo 0

    If Not elmSourceArea Is Nothing Then
      elmSourceArea.Value = TranslateText
    End If

    '翻訳ボタンクリック

    On Error Resume Next
    Set elmSubmit = .document.getElementById("gt-submit")
    On Error GoTo 0

    If Not elmSubmit Is Nothing Then elmSubmit.Click
     Application.Wait Now + TimeValue("00:00:05")

    '翻訳後テキストを取得
    On Error Resume Next
    Set elmResult = .document.getElementsByClassName("result-shield-container tlid-copy-target")(0)
    On Error GoTo 0

    If Not elmResult Is Nothing Then
        GoogleTranslate = elmResult.innerText
    Else
        MsgBox "error:" & elmResult.innerText
    End If

  End With

End Function

こんな感じかな。

　 Tweet
Qiitaで続きを読む

投稿日：2019-01-27T12:08:59+09:00

【爆速で習得】Railsでslimを使う方法から基本文法まで

slimは凄い

みなさんはslimを使っていますでしょうか？
slimとは, Ruby製のテンプレートエンジンのことで、
htmlをより簡潔でスマートに書くことができます。

例えば,以下のコード。
*.html
<h1>タイトル</h1>
<div class="content">
 文章
</div>
*.slim
h1 タイトル
.content
 p 文章
どちらの方がスマートなのかは一目瞭然ではないでしょうか？

今回はRubyも含めて説明していきますが、
書き方の特徴と違いとしては以下のようになります。

・<>がいらない
・<%= %>　→　 =
・<% %> → -
・コメント　→　/
・id指定　→　#
・class指定　→　.

例)

html(erb) slim

hoge p hoge

 /

class="content" .content

id="content" #content

<%= hoge %> = hoge

<% if %> - if

この記事では,

・slimの導入と設定
・基本文法

についてシンプルに説明していきます。

slimの導入

まずは以下のコマンドでslimを入れてください.
gem install slim
これで拡張子が.html.slimのslimファイルを、みなさんが普段使っている.html.erbとして変換されるようになります。

次にhtml2slimを入れてください。
gem install html2slim
これでhtml.erb　→　html.slim　に変換させることができるので、早速変換してみましょう。
bundle exec erb2slim app/views app/views
依存のerbファイルに加え, slimファイルが追加されたかと思います。

しかし、これではerbファイルが邪魔なので以下のコマンドを打って削除しましょう。
bundle exec erb2slim app/views app/views -d
今後自動的にslimファイルを作成されるようにするためには　、
config/application.rbにあるconfigを以下のようにslimを指定すればOK。
config/application.rb
module App
 class Application < Rails::Application
 config.generators.template_engine = :slim #slimに変更
 end 
end
このあと、もしフォーマット関係でエラー出た場合は,一旦サーバーを再起動させましょう。

これで準備が整いました。

基本文法

ここからはよく使うslimの文法について紹介します。

見方としては、slimの文法　→　htmlならどうなるかという順になってます。
(色々迷いましたが、逆の方が見やすいよという方いましたらコメントください(m_ _m))

htmlタグ

slimの特徴として、<>がいらないということを覚えておきましょう。(使うこともできます)
もちろんそれに伴い、<>で閉じる必要もありません。
*.slim
p 段落
a アンカー
img src="https://avatars1.githubusercontent.com/u/28925778?v=4"
div
*.html
段落
<a>アンカー</a>
<img src="https://avatars1.githubusercontent.com/u/28925778?v=4" />
クラスやidの指定

クラスやidはそれぞれ、., #で表現することができます。
*.slim
dev.content
 p.title タイトル
dev#content
 p#title タイトル
*.html
<dev class="content">
 タイトル</hoge>
</dev>
<dev id="content">
 タイトル</hoge>
</dev>
また、クラスやidは連続して指定できるので、かなり簡潔になることでしょう。
*.slim
dev.content#article
 p.title.text-center タイトル
*.html
<dev class="content" id="article">
 タイトル</hoge>
</dev>
テキストの書き方

テキストは |(パイプ)を使います。

|より後ろはテキストとして扱われるので、タグの横ではなく、タグの下に記述することで見やすくなるというのが最大のメリット。
*.slim
p
 | テキスト
*.html
テキスト
【注意】タグのすぐ後ろに|をいれると、|も文字として認識されてしまうので注意しましょう。

これは、
*.slim
p | テキスト
こうなっちゃいます。
*.html
| テキスト
また、パイプを使えば、文章が長くなった時でも見やすくなります。
p
 |
 テキストテキストテキストテキストテキスト
 テキストテキストテキストテキストテキスト
テキストテキストテキストテキストテキストテキストテキストテキストテキスト
改行したいときは通常と同様、brを使えばOK。
*.slim
p
 |
 テキストテキストテキストテキストテキスト 
 テキストテキストテキストテキストテキスト 
*.html
テキストテキストテキストテキストテキスト テキストテキストテキストテキストテキスト
brをタグ無しで使いたい！って場合には、以下のように書けます。
*.slim
p
 | テキストテキストテキストテキストテキスト
 br
 | テキストテキストテキストテキストテキスト
br以下は再度|で始めることで、文字として認識させるようにしましょう。

※ 補足
パイプに関して言うと、以下の書き方は上二つが同じで、最後のは改行されません。
*.slim
p
 | テキストテキストテキストテキストテキスト
 テキストテキストテキストテキストテキスト
p
 |
 テキストテキストテキストテキストテキスト
 テキストテキストテキストテキストテキスト
p
 | テキストテキストテキストテキストテキスト
 | テキストテキストテキストテキストテキスト
いろんな書き方を見るかもしれませんが、タグの直後に書かなくても良いというメリットを生かし、自分の見やすいように書くといいかもしれませんね。

| 以下は文字("")として認識されるということを覚えておきましょう。

ifとかの条件式

ここからは少しRubyが絡みますが、少々お付き合いください(m_ _m)

slimでif文を書くときは、-で囲って上げる必要があります。
- if current_user.nil?
 li 新規登録
- else
 li ログイン
<% if current_user.nil? %>
 <li>新規登録</li>
<% else %>
 <li>ログイン</li>
<% end %>
end入れ忘れる心配がなくて最高ですね(・∀・)

参考: https://qiita.com/nishina555/items/8ed180333fbc8f78e91e

結果をテンプレートに表示したい場合

変数とか出力させたい！ってときは、=を使います。
- sum = 1 + 1
= sum
<% sum = 1 + 1 %>
<%= sum %>
この場合、= から始めた2だけが表示されます。

コメントの書き方

コメントは,/をつけます。
/p テキスト
まとめてコメントアウトしたい！って場合は、以下のようにすると簡単。

ネスとしてる場合は親要素だけ。
/.content
 p 文章
行頭が揃ってる場合は/にネストさせる。
/
 - sum = 1 + 1
 = sum
参考: https://qiita.com/scivola/items/c9a79c13688a3444a3cc

まとめ

・<>がいらない
・| 以下は文字("")として認識される
・式は-, 出力は=
・コメントは/

初めは独特の書き方に見えるかもしれませんが、慣れるとあまりのスリムさから戻れなくなることでしょう。

特に現場ではslimというフォーマットで書く所が多いと思うので, 初心者こそ慣れておくと良いかもしれませんね( ´ ▽ ` )

html(erb)	slim
<p>hoge</p>	p hoge
<!-- -->	/
class="content"	.content
id="content"	#content
<%= hoge %>	= hoge
<% if %>	- if

　 Tweet
Qiitaで続きを読む

投稿日：2019-01-27T02:16:36+09:00

A-Frameで始めるWebVR 公式HPのExampleをみてみよう．

公式のExampleは相当面白い．

A-Frameは，Three.jsよりも簡単にWeb3Dをか使うことのできるプラットフォームです．
その反面，複雑なものは作れませんがA-Frameでこんなものが作れるんだと参考にしてもらえるとよいです．

Hello Metaverse

メタバースは、SF作家・ニール・スティーヴンスンによる1992年の著作『スノウ・クラッシュ』の作中で登場するインターネット上の仮想世界のこと。転じて、将来におけるインターネット環境が到達するであろうコンセプトモデルや、仮想空間サービスの通称としても用いられる。
[参考動画]
https://youtu.be/4nixOLPpZzo

360° Image Gallery

[参考動画]
https://youtu.be/6ofkyEoTlaQ

360° Video

[参考動画]
https://youtu.be/8xZlFqYC_-Q

A Saturday Night

個人的にはこのExampleがお気に入りです．
[参考動画]
https://youtu.be/ggczPtr9V3Q

クリスマスツリー

公式のExampleではないですが，A-Frameで作成されたおもしろい作品がありましたので紹介します．
@tspringkj さんによるクリスマスツリー
https://codepen.io/tspringkj/full/QzvXxm

QRコードを読み込んで，スマホで見ることもできます．

3Dをこんなにも手軽に扱えるというのはとても新鮮ですね．ぜひ何か作ってみましょう．