2019-11-17

オウンドメディアを作るには〜趣味から地域貢献の自前メディア〜

ほぼ「我思う〜」の領域ですが、「オウンドメディア」「DIY」などのキーワードから世間の人たちは「自主的に何かをしたい」と思っているように感じます。

自分自身にしてもそうです。

自分の作りたいもの

自分が作りたいのは「趣味でやったこと、作ったものなど、を販売してそれを収益化できる仕組み」を作りたいと思っています。まだ絵空事の領域を出ていません。

そのためにレンタルサーバーを使用してモチョモチョと作業をしている最中です。

内容に関してはヒミツです、できたら公開しますので(笑)

地域貢献の自前メディア？

「は？何言ってんの？」と突っ込まれそうですが、これは前回の記事にて記載しましたが「情報化社会なのに必要な情報(教育)が行き届かない」事件に対しての解決策として、これはどうだろうか？というアイディアです。

＜解決策１＞

現代は文字情報はたくさんあるが「実経験」が不足しているので、実経験を増やす機会を文字情報で発信、「やってみよう」につなげる。

一見万能なインターネットですが、情報過多な時代なので「知っている」もしくは「キーワードにひもづく」情報しか取得することができません。表示するのは文字、音声、動画だけです。あくまでも「こんなのがあるよ？」というのを「情報」として発信、デバイス(パソコンやスマホ)に表示するだけです。

きっかけにはなるのですが、実際に行動へ移そうとするときに色々な弊害があります。

これを打破する方法や気持ちの整理方法などは「経験談」が一番の薬になると思うのでオウンドメディア(自前メディア)の発信が地域の役に立つのではなかろうかと思うわけです。

オウンドメディア＝経験談

経験は「文字情報」だけでは伝えきれないし、動画も同様です。しかし、昔から伝える方法は「自分がやって見せて、それをやらせてみる」というところだと思います。

これは直接そばにいて手ほどきを行うのが最も確実な方法ですが、これを行うのには大変な労力とお金が必要になります。(生活もしないといけないので・・・)

だからメディア(文字、音声、動画の情報)を使用して発信すると良いと感じています。

すでにインターネット上にはたくさんのものがあるので「今更感」はありますが、何かが足りないのでしょうか？当然インターネット上だけでは解決できない問題なので「プラスアルファ」がないとどうしようもないと思います。

プラスアルファをどうするか？

ここがテーマになります。発信した情報を実践する場所が必要です。自分は「プログラミング」に関して発信しているのでそれに関するコミニティ(団体)に参加しています。

では、他の事柄ではどうすれば良いか？

やってみるなら「体験イベント」を見つけることができればよい。。。

簡単に行くだろうか？自分一人では答えが出ないのでここで終わりにします。

結論

自治体などでローカル情報の発信場所を見つけられるように何かしらの工夫をする。

自分であれば、上のような発信を行うメリットを時間できるような「何かの仕組み(アプリ)」を作ることだと思っています。

問題提起だけして終わってしまいましたが。。。

「面白いこと」を見つけられるのが一番だと思います。

でわでわ。。。

2019-11-15

オウンドメディアを作るには〜趣味としての自前メディア〜

本日は雪が降っていて、いよいよ本格的な冬の到来を感じているこの頃です。

そんな季節感を感じながらタイトルにあります「オウンドメディア」について記載したいと思います。

オウンドメディア？

今自分が手にしている書籍は下のようなものです。

[商品価格に関しましては、リンクが作成された時点と現時点で情報が変更されている場合がございます。]

自社のブランド力を上げる！オウンドメディア制作・運用ガイド [ 深谷歩 ]
価格：2860円（税込、送料無料) (2019/11/15時点)

楽天で購入

最近は「働き方改革」なんて言葉をよく聞きますが、実際に「どう働くのが理想なのか？」というところは自分自身で答えを見つける必要があります。(自分にしかわからないことなので)

どうやる？

ちょっと話がずれて「商売」的な話になりますが、何かを作って自分で商売(自営業、独立など)をするのにはリスクがあります。一度独立して失敗している自分の経験としては「計画」が足りなかったのと「テスト」をしていなかったことが大きな敗因だと思っています。

「いきなりやって、いきなりうまくいく」というのは虫の良い話だと今更ながら思うわけです。。。

テストする？

言い方がシステム開発っぽいですが、要するに「独立前に小さく初めてしまう」ということです。実際に大きな収入を得るようになってそこから「独立」「会社として運用する」という手順を踏んでも遅くないので

社員で準備を始める＝自前ビジネスを小さく初めるというところが「テスト」です。

このように、始めれば「うまくいってから独立」という手順が踏めるので「独立」を考えている人はそのようにすると良いのではないでしょうか？

ちなみに、サラリーマンでやっています、という方(自分もそうですが。。。)も同様に小さく何かを始めてみるのも良いのではないでしょうか？

今の収入に+αで１０万あると生活が楽になる、余裕ができる。。。などなどいろんなメリットがあると思います。(自分がそう感じています)

今後定年を迎える人も同様に「年金＋１０万」は多少の余裕ができるのではないでしょうか？

アフィリエイトに学ぶ

世間では「アフィリエイター」という稼ぎ方をしている人がいます。シンプルにネットで広告料金を頂戴するというものです。そのためには色々なことを学習、情報収集してやっているようです。自分も少し学習しました。

早い話が、自前のサイト(ブログを含む)に「アクセスを増やすことができればそれでお金になる」ということを学びました。

自分の思うところ

情報化社会と呼ばれる現代ですが、必要な情報(教育)が行き渡らない時代なんだろうな。。。と思ってしまいます。

世間では、情報はたくさんあるのに、昔ながらの普遍的な「常識」というのが改めて騒がれているように見えます。例えば「生活力」とか「モラル」とか。。。生きていく上で最低限必要な「教育」というのが見直されているという事実があります。

おかしな話ですよね？

オウンドメディア

現在自分の考えでは、「普遍的な常識」という言い方をしましたがとても当たり前なことを指します。

具体的には「人を殴れば、自分の手も痛い」というようなことです。

違う言い方をすると「実際にやってみないとわからないこと」を「文字情報」だけでわかったように感じている人には「普遍的な常識」がわからない。ということです。

では、問題です

どんな方法で「普遍的な常識」を後世に伝えていくか？この問題が大きなテーマだと思います。

自分が思うには「オウンドメディア」がキーワードだと思います。上記に述べたように「普遍的な常識」は言葉で表現できるほど簡単ではないと思うので、「経験」が必要になります。そして「経験」を伝える、学ばせるにはやはり「経験させる」ということが必要だと思います。

早い話が「やってみればわかる」というところです。「理論が先に来る人」には嫌われそうな言い方ですが(笑)、しかしどちらも必要ですし、どちらの人間がいても良いと思います。だから

オウンドメディアなのです。

具体的に

まず、参考にした上記の書籍にある記載、「自社で保有するメディア」＝「オウンドメディア」というところを「自分で保有するメディア」に読み替えます。

そして上記の書籍は「自社ブランドを広める」ことがテーマになっていますが、これを「持論を伝える」ことをテーマにして考えながら読むと何かしらの答えに結びつくと思います。

そして、何かを続けるためには「モチベーションを保つ」ことが必須となりますが、これを「収益を得る」というところに置くとやる気が出るのではないでしょうか？

自分は今それを目指して試行錯誤しています。

お後がよろしいようで。。。

でわでわ。。。

2019-10-28

プログラミングエッセイ〜Shellスクリプトとの戦い〜

前回に引き続き、火炎現場の洗礼を受けた時の話から始めます。

前回の話で自分が(身にしみて)学習したものは以下の通りです。

前回学習したもの

目的を明確にする
目的を実現するまでの手順を一覧にする
手作業で行う場合の実行手順を確認
確認した手順をプログラムで再現する
作成したプログラムをテストする
あとは何回でも同じ作業はダブルクリックで行うことができる

これはプログラムを作るときだけでなく、作業にも共通することです。例えば。。。

引っ越し作業をする場合

正直のところわざわざ明確にするまでもないようなことですが、意識してやると作業効率が全然違います。

目的を明確にする：荷物を梱包→運び出しトラックに積む→引っ越し先に運び出し→指定された位置にものを配置する
目的の作業手順を明確にする：荷物の梱包→食器、家電などをそれぞれの品物を入れるための段ボールなどの個数を大まかに見積もるetc...
手作業で行う場合の実行手順を確認：実際に引っ越しを行う作業フローをシュミレートしてみる。
確認した手順をプログラムで再現する：実際に現場でその通りに動いてみる
作成したプログラムをテストする：作業中にやって見てうまくいくいかないを判断して、その場で方法を改善していく
あとは何回でも同じ作業はダブルクリックで行うことができる：出来上がった作業方法を次の現場でも同じようにやる

最終的にはこのやり方が作業をする人の「やり方」になり、いわゆるノウハウになります。

Shellスクリプト

引っ越し作業の方がわかっている自分としては、実際にプログラムで上のようなやり方をプログラムに落とし込むのには時間がかかりました。

火炎現場だったので、日数はそれほどでもありませんが費やした時間はマァマァなものでした。

当時の自分にとてもしっくりきたのが「Shellスクリプト」です。

具体的には、引っ越し作業の作業手順を例に記載したいと思います。

引っ越しの場合はやることが同じです。実際には現場の環境(マンションや一軒家、家族なのか一人なのか？。。。)パターンは客によるので、ほぼ無限にあります。

しかし行うことは上に記載したようにパターン化できます。

Shellスクリプトで行うときも同様に考えます。

例えば。。。

Shellでの自動化

パソコンを立ち上げて作業を開始しようとしたときには、使用するアプリが決まっていることが多いと思います。なので「パソコンを起動したら特定のアプリを起動する」ということをShellスクリプトなどで行えると楽(作業効率化)ができます。

実際にはWindowsで作業を行うことが多いと思うのでWindowsならば「スタートアップフォルダ」にアプリのショートカットを配置してやればパソコンを立ち上げたときに対象のアプリを起動できます。

じゃShellで何やるの？

上に挙げたようなことも実際にはWindowsのスクリプト(多分コマンドプロンプトで使うバッチ)が起動するようになっていると思うのですが。Shellも同様なことができます。

というかWindowsのコマンドプロンプトもShellも言葉が違うだけでやれることはほぼ同じです。(WinとMac, Linuxで微妙に挙動が違いますが。。。)

そんなときに考えるのは上にあることを考えます。

単純な作業でもとても面倒な作業としてファイル名の変更などがあると思います。

それをプログラムにやらせると早く終わります。

写真のファイル名を日付順に名前を変更する

実際には大した量がありませんが、３ファイルのファイル名を変更しようとしたとき

f:id:Takunoji:20191027222130p:plain — 写真の一覧

日付順にファイル名を変更するために、必要な作業は下のようになります。

日付を取得する
ファイル名を変更する

以上です。そしてこれをプログラムにやらせようとすると以下のようなスクリプトになります。

Shellスクリプトon Mac

余談ですが、MacはUNIX系のOSなのでShellが使用できます。Linuxとほぼ同じですのでLinuxでも使用できるコードになると思います。がMacでのShellはちょっとクセがありそうです。ちょっとコーディングしてみたら結構違いました。。。

ちょうどこんな感じで、やることを明確にして処理を書き出し、プログラムを作成

今しがた作成にかかった時間は、だいたい３０分くらいなので２０件以上のファイル名を変更しようとしたときにはプログラムでやった方が早いことになります。

ちなみに、ファイル名を変更したらそれが正しいことを確認する必要もあるので作成したファイルを「ls」コマンドで一覧して確認します。※今回は確認処理を入れていません。コマンドでテキストか何かに出力すればすぐに確認できると思います。(エクセル関数が使用できます)

＜Shellスクリプトのコード＞

#!bin/sh

for file in $(ls); do

newFileName=$(date -r $file)

echo $newFileName

$(mv -f "$file" "$newFileName")

done

実行前

f:id:Takunoji:20191027230542p:plain

実行後

f:id:Takunoji:20191027230427p:plain

実行した後に「test.sh」までファイル名が変わってしまいました。

そのように書いたのだからそーなるか。。。

でわでわ。。。

2019-10-27

プログラミングエッセイ〜システム屋の仕事を知る〜

前回は、IT業界へ転職(ガテン系からの転職でした)の話をベースに「勉強すればなんとかなる」ということを言いたかった次第です。そして、天狗になってもその鼻はすぐに折られるという話でした。

火炎現場の洗礼

当時、自分が理解していたのはフレームワーク(Struts)の使い方とJavaプログラムの書き方ぐらいでした(今にして思えば。。。)

初めて行った作業現場は燃え上がり、毎日終電で帰るような感じでしたが、それはエクセルに表示された10万件のデータの内容の整合性を取るなどの作業をしていた時でした。

当時の、自分の作業方法は「右のデータ(ファイル)と左のデータ(ファイル)を見比べる」というものでした。

ちなみに現在の自分は、十件を超えた時点で自分はもうデータを見比べる気になりません。

そして、数日たった頃に大手企業の社員さんが自分に次のように教えてくれたのでした。

「君の仕事の仕方はいかん！システム屋なんだから『システム(プログラム)』を使わんといかんのだよ。」このように言葉をかけてもらい「エクセル関数」と「Shellスクリプト」の基本を教えてもらいました。

そこらへんから終電で帰ることもなくなり、仕事をするのに、仕事を終わらせるために

「プログラム」を使用して時には自分で処理ツールを作成してデータの整合性を取るなどの作業を行うようにしました。

しかし、基本を習ったからといえなんでもできるわけではないので勉強しながらいろんなものを使用して作業の効率化を行いながら仕事をしていきます。

つまり「作業をプログラム(パソコン)に行わせるにはどうしたら良いか？」を考えながらやるようになったということです。

ポイントはプログラム(システム)は人間みたいに柔軟には動きませんが、プログラムに書いた通りにしか動かないのでその通りに動くことを確認(テスト)して実行してやれば１０万行のデータだろうが１００万行のデータだろうが作業量は変わらないのです。

システム屋の仕事

上記のように「何をどうして、結果を出すか？」というのを考えて、それをPC(プログラム)にやらせる。そうすることで「作ればいくらでもある作業」を短時間で正確に実行することができます。

もちろん、手作業でやったほうが早い場合は手作業でやります。

このように作業を行うためには以下のようにやります。

目的を明確にする
目的を実現するまでの手順を一覧にする
手作業で行う場合の実行手順を確認
確認した手順をプログラムで再現する
作成したプログラムをテストする
あとは何回でも同じ作業はダブルクリックで行うことができる

このように、作業を行なって定時に帰るのが自分の中ではベストだと思います。

ちなみに再起は定時で帰ることが多いです。

そして、定時で帰るためには日々何かしらの学習を行なっていることが大切なのだと思います。

でわでわ。。。

2019-10-26

プログラミングエッセイ〜IT業界へ転身を決める〜

自分の記載しているブログが２つあります。もう片方のブログも「プログラミング」に関して記載しています。

早い話が「内容かぶってるよね？」というところに気がつき、記載するものの内容を変えてみようとなりました。

IT業界へ行く

私ごとですが、自分はもともと。。。いわゆる「ガテン系」の業界で仕事をしていることが多く、まぁフリーターだったんですが。そこから「今の時代はITだな！」と思ったのでこの業界に入りました。

たまたま「ちょうど良い求人があった」ということでもあります。

しかし、当時の自分はパソコンとは「CDを焼ける機械」という認識だったのでHTMLとかCSSなど、おおよそIT関連のものに対する知識がゼロの状態でした。

IT業界１年生

IT業界に入る＝IT会社に所属して研修を受けると言う状況だったので、毎日勉強していました。そして「社員寮」に入り埼玉県から東京に通勤し研修を受ける日々を送っていました。

予想はしていたのですが、この業界に来て最初に思った(感じた)ことは「人種が違うんだな。。。」というものでした。

どういうことかというと、自分のなかの「普通」が周りの人にはまるで通じないので、周りから浮いて、叩かれて。。。まぁ悲惨でした(笑)。

今振り返ると笑えるので、そこまでひどくなかったと思います。しかし、ここで言いたいのは「業界に入った頃できても意味がない」ということです。

当時ITに関して「知識ゼロ」だったので当然のように「こんなことも知らないの？」とよく馬鹿にされたものです。

しかし、半年経ったら立場は逆転していました。負けず嫌いなので「根性」見してやった次第です(笑)。

プログラミングは1日にしてならず

長々と前振りのようなことを記載しましたが、ここからが本題になります。

上記に記載した通り「業界に入った頃できても意味がない」理由を書きたいと思います。

早い話が「技術は毎日進化しているので勉強は続けなくてはいけない」ということです。一度覚えたらもう勉強しなくて良いという認識を持っているのなら大きな勘違いです。しかし、これはどの業界にいても日々、勉強が必要なことは変わらないと思います。

仕事は日進月歩

ここで言う「勉強」とは「何か新しい物事を取り入れる」と言うことです。それは人間の「感性」だったり、「ギターのリフ」「女の子の口説き方」など、どんなものでも「勉強」が必要になるということを言いたかった次第です。

実際には「飲食」でアルバイトをするにも皿の洗い方〜接客まであらゆることを学びますが、それでも「ここまで来たらもう勉強しなくて良い」と言うところはありません。

当然、プログラミングに関しても同じです。

勉強をしなくなった人は人間的に魅力がなくなってくるのではないでしょうか？

井の中の蛙、大海を知らず

そんなわけで、IT業界に入って「研修」期間を終えた自分はちょっとだけ天狗になっていました。「ここまでわかるようになっていれば大丈夫だろう」このように思っていたわけです。

しかし現実は甘くなく、初っ端から「全くわからねぇ〜」と半ばお手上げ状態になり「火炎現場の洗礼」を受けていました。。。

続きは次回というところで。。。

でわでわ。。。

2019-10-25

学会がオススメするIT書籍〜技術ポータルサイトを作る1〜

数学とプログラミングを繋げて記載している書籍の多くは(自分の基準ですが。。。)学者さんの書いた書籍(学会を含む)が多いと思います。そんな中で下のような書籍を見つけたのでこれを参考に色々と模索してみようと思います。

IT研究者のひらめき本棚ビブリオ・トーク：私のオススメ [ 情報処理学会会誌編集委員会 ]
価格：1980円（税込、送料無料) (2019/10/19時点)

楽天で購入

事の発端

技術ポータルサイトを作成しようと考えています。が「何を載せる？」という部分が解決していないので調査をしようと思いました。

流し読みをしてみる(感想)

大雑把に、この書籍を記載した学会(情報処理学会)にいる人々の閃きというか「今日のITに関して感じた事」が記載されていて「科学」という視点からのアプローチ。。。

つまり、理論的アプローチでのIT(情報技術)に対する意見が多くみられました。

そして「この本オススメ」という内容が多くありました。

大変興味を惹かれるものが多くありました。

この本から何を得るか？

はっきり言って「学者さんたちのオススメの本がわかる」くらいのものしかありませんでした。自分の求めるのは「理論」が二の次で「手法」「実践方法」が先に来るのでイマイチな感じでした。

しかし、表面的にしか、もの事を見ないのはさらにイマイチなのでちょっと深掘りして見ます。ポイントは以下の部分です。

書いた人々はどんな人たちで、その人たちのオススメする意図は何か？
紹介されている書籍たちの共通点は何か？＝この書籍にオススメしている学者さんたちの興味ある事柄が推測できる

上記のような観点でもう一度流し読みして見ます。。。と以下のようなキーワードが出てきました。

時代の創造者(先駆者)
プログラムコード＝数式、デザイン(設計理論)
(通信、理論的)ネットワーク
数理(モデル)最適化、待ち行列
IoT(生体センサなど)
プロジェクト=問題解決、理論的思考法

なんだか、世間でよく使用されている言葉が多く感じられます。今後の時代に必要な事柄ではあると思いますが、詳細はそれぞれの紹介されている本を見てみるしかなさそうです。

とはいえ、多くの人の興味や考えの方向を知るのも良い事だと思いますので有意義な時間が過ごせたと思います。

Chromeでサーバーにアクセスできない〜応答時間が長すぎます。〜

つまずき対応

アクセスできない

外出先などで、「応答時間が長すぎます。」などとブラウザに表示されて特定のサイトにアクセスできないことがあります。

今回アクセスできなかったのは自分の使用しているレンタルサーバーにアクセスできない事象がありました。

f:id:Takunoji:20191019100948p:plain — アクセスできない表示

このような表示が出た時の対処方法を記載します。上の表示に「詳細」を表示するボタンがあるのでそれをクリックすると下のような文言が記載されていました。

f:id:Takunoji:20191019101108p:plain

これの内容を実践してみます。

Chromeの設定を行う

調べてみると下のような手順がありました。

f:id:Takunoji:20191019101721p:plain

早速試してみます。目で探していると時間がかかるので検索してみます。

Windowsなら「Ctrl + F」Macなら「Cmd + F」で検索できます。

f:id:Takunoji:20191019101917p:plain — 検索結果

プロキシの設定があったのでそれを開きます。

キーポイント

「ネットワークへのアクセスを許可されたプログラム」かどうか確認、許可されていなければ許可する。というところです。

自分の場合は下のように設定してやり、この設定が反映されたら対象のサーバーへアクセスすることができました。

f:id:Takunoji:20191019103519p:plain

f:id:Takunoji:20191019103522p:plain

f:id:Takunoji:20191019103526p:plain

このプロキシ設定を使用しないホストとドメインにアクセスするホスト名はつけていないのでなし、ドメイン名「zenryokuservice.com」を入力してOKをクリックしてやりました。

f:id:Takunoji:20191019103843p:plain — ログインができました。

こんな感じでいつも通りにアクセスできました。

でわでわ。。。

2019-10-23

AngularJS BootStrap 〜カテゴリと対象企業名一覧(技術ポータルの作制1) 〜

計画と実行

今回はAmgularJSとBootStrapを併用してポータルサイトを作成しようと思います。

今までに、AngularJSとBootStrapのチュートリアルをやりましたので。それを実践しようというわけです。今までやったものは以下に。。。

AngularJS

BootSrap

どんな技術ポータルにするか？

今回のキモになります。どんなものにしようか考えました、以下のようなものを作ろうと考えています。

とりあえず参考にしたサイトから引っ張ってきた「最新技術のカテゴリ」を選択できるようにする(横スライド)下のような感じ

ページレイアウト
各カテゴリ毎の大手企業の最新技術に関するページをリストアップする
対象のURLよりそのページを自分のページに表示する

というような感じで実装する想定ですが、まずは調査から入ります。そして以下のカテゴリ毎に調査します。追伸全て英語で検索しております。基準とするのは世界(地球)になります。

カテゴリー: 企業名(in 2019)

輸送(参考サイト)

Barnhart Crane & Rigging
Bennett Motor Express
ATS Specialized
Daseke
All Erection & Crane Rental
Landstar
Fagioli
Sarens
ALE
Mammoet

エネルギー(参考サイト)

Siemens Gamesa
GE Renewable Energy
Berkshire Hathaway Energy
Cypress Creek Renewables
NextEra Energy Resources

農業(参考サイト)

Arable.
Ceres Imaging.
Gamaya.
AgriData.
Agrowatcher.
AgEagle.
PrecisionHawk.
Aker Technologies.
Aker Technologies Inc

建築(参考サイト)

Mitsubishi Jisho Sekkei.
HOK.
Samoo Architects & Engineers.
HDR Architecture.
Gensler.
Nikken Sekkei.
Aecom.
RSP Architects.

エンターテイメント＆メディア(参考サイト)

AT&T (ATT)
Walt Disney (DIS)
Comcast Corp (CMCSA)
Charter Communications (CHTR)
Twenty-First Century Fox Inc. (FOX)
Thomson Reuters (TRI)
CBS Corporation (CBS)
WPP Plc. (WPPGY)
DISH Network Corporation (DISH)
Viacom Inc. (VIAB)
The Bottom Line

アート＆ミュージック(参考サイト)

Juilliard School, New York
University of Music and Performing Arts, Vienna
Royal College of Music, London United Kingdom
Royal Academy of Music, London United Kingdom
Curtis Institute of Music, Pennsylvania United States
The Royal Conservatoire of Scotland, Glasgow United Kingdom
Sibelius Academy at University of the Arts, Helsinki
Conservatoire de Paris France
National School of Drama (or NSD)

産業機械(参考サイト)

THERMO FISHER SCIENTIFIC INC
AIRBUS
DANAHER CORPORATION
SIEMENS AG: https
CATERPILLAR IN
SAFRAN
NORTHROP GRUMMAN CORPORATION
DEERE & COMPANY
ILLINOIS TOOL WORKS INC
RAYTHEON COMPANY

服とアクセサリー(参考サイト)

ARMANI
FENDI
HOUSE OF VERSACE
BURBERY
RALPH LAUREN
CHANEL
PRADA
HERMES
GUCCI
LOUIS VUITTON

医療技術(参考サイト)

Medtronic plc
Johnson & Johnson
Philips Healthcare
GE Healthcare
Siemens Healthineers
Fresenius Medical Care
Abbott Laboratories
Becton Dickinson
Cardinal Health
Stryker

支援技術(参考サイト)

Apple
Microsoft
Amazon
Alphabet
Berkshire Hathaway
Facebook
Alibaba
Tencent Holdings
JPMorgan Chase
Johnson & Johnson

科学(参考サイト)※日本の大学は39, 40位だった。。。

Harvard University/li>
University of Cambridge/li>
University of Oxford/li>
Massachusetts Institute of Technology/li>
Stanford University/li>
Johns Hopkins University/li>
Yale University/li>
California Institute of Technology/li>
Princeton University

ロボット(参考サイト)

Amazon
Boston Dynamics
Cruise Automation
Facebook
Microsoft
NVIDIA
UBTech
Universal Robots

宇宙(参考サイト)

Rocket Lab
Rocket Lab
Virgin Galactic
Spire Global
Iceye
Analytical Space
Relativity Space
Audacy
Accion Systems
SpacePharma
For All Moonkind

人工知能(参考サイト) ※ artificial-intelligence

Addepto
Azilen Technologies Pvt. Ltd.
S-PRO
SumatoSoft
BotsCrew
Achievion Solutions
Caserta
Flatlogic
Neoteric
Cubix

スーパーインテリジェンス(AI)(参考サイト) ※ super-intelligence

Accubits
Azati
Master of Code
ThirdEye
Infopulse
Hedgehog Lab
azilen
Waverley
CIS
Achievion

とりあえずは、名前を列挙して見たものの。。。ちょっと量が多すぎたかもしれません。

でわでわ。。。

2019-10-22

Bootstrap チュートリアル6〜ページタイトル部分(jumbotron, well)〜

Bootstrap

今回は、BootStrapのチュートリアルにある「Jumbotron」と「Well」についてやります。

前提

テンプレートを使用してその中に組み込むような形で使用します。テンプレートは下のようなものを使用しています。

f:id:Takunoji:20191013194657p:plain — BootStrap Templates

AngularJSと併用して実装するのに調査した結果です。

Jumbotron

上記のテンプレートにある「8 col」と表示されている部分にJumbotronを適用して見ます。

これから適用しようとしているのは下のようなHTMLコードです。そして赤い部分はAngularJSでバインドしたものです。そして、CSSクラスを追加とある部分に「jumbotron」「well well-sm」とCSSクラスを追加して表示結果を比較します。

ベースになるHTML

    <div ng-controller="topController" class="container-fluid text-center">
  <div class="row content">
    <div class="col-sm-2 sidenav">
      <p><a href="#">Link</a></p>
      <p><a href="#">Link</a></p>
      <p><a href="#">Link</a></p>
    </div>
    <div class="col-sm-8 text-left [CSSクラスを追加]">
      <h1>{{welcomeMessage}}</h1>
      <p>{{firstMessage}}</p>
      <p></p>
      <hr>
      <h3>{{secondMessage}}</h3>
      <p>{{thirdMessage}}</p>
    </div>
    <div class="col-sm-2 sidenav">
      <div class="well">
        <p>ADS</p>
      </div>
      <div class="well">
        <p>ADS</p>
      </div>
    </div>
  </div>
</div>

そしてこれを表示すると下のようになりました。

何も追加しない場合

f:id:Takunoji:20191013202351p:plain

Jumbotronの場合

f:id:Takunoji:20191014084612p:plain — Jumbotron

Wellの場合

f:id:Takunoji:20191014084306p:plain — Wellの適用結果

これはそれぞれのCSSに手を入れる必要がありそうです。なので別の方法を模索します。

とりあえずは、初めの状態に戻してタイトル「PGボックスへようこそ」の部分を中央寄せにしようと思い以下のように修正しました。

<div class="col-sm-8 text-center">
<h1>{{welcomeMessage}}</h1>
<p>{{firstMessage}}</p>
<hr>

</div>

そして、タイトルの下の部分になんとなくCSSの「パネル」を適用して見ました。

f:id:Takunoji:20191014091516p:plain

いずれにしろ答えのでない部分なので、基本的な使い方として理解して終わりにしようと思います。

でわでわ。。。

2019-10-21

html 多言語化対応方法〜多言語化方法あれこれ〜

Bootstrap AngularJS

今回はHTMLの多言語化方法を調査してみようと思います。

事の発端

最近、BootStrapとAngularJSに触れる機会があり、と言うか仕事で使う事になり。。。

じゃ学ぶか。。。と言う事で。。。やる事になったのですが、これに合わせて「国際化も必要だな。。。」と思ったのでここに至る次第です。

多言語化方法

HTMLを２つ用意して、アクセスしてきたロケールによりHTMLを切り替える
ウェブページにGoogle翻訳ボタンを追加する方法(W3Schooles)
CSSとJSで切り替える(このページを見ました)
自分で切り替え方法を考える

以上のようにまとまりました。と言うか調べているうちに「自分で考えた方が早くね？」と思ってしまった次第です。

自前多言語化

シンプルに、文字を表示する場所を決めておき、そこに値を入れるようにします。

画面の表示項目にプロパティをつける(<div id="firstMessage">など)
それぞれの表示項目に(Locale)を見てから値を入れるようにする、下のようなイメージです。
「もしロケールが日本であれば日本語の値を各表示項目に代入する」

この実装をAngularJSで行います、画面のテンプレートと言うかガワにはBootStrapのテンプレートを使用します。下のようなイメージです。

そして、このHTMLにAngularJSで使用できる変数をバインド(関連付け)していきます。

BootStrapカスタム

上記のリンクからテンプレートをコピーしてきます。そして、このコピーに必要な参照を追加します。

AngularJS

自分のJS

パスの種類

相対パス: 在開いているファイルから〜とパス指定するときは「./」で始めるように記載します。

絶対パス: ドキュメントルート。レンタルサーバーであれば自分が参照できるフォルダのいちからのパスを示す。「/ファイル名」のように指定すると参照できるフォルダの一番上にあるファイルを参照します。

AngularJSを埋め込む

AngularJSの内容に関してはこちらのサイトを参考にしてください。わかりやすく書いたつもりです。

そして、HTMLにAngularJSを組み込むには

AngularJSを読み込む
モジュールを指定する
コントローラーを指定する

こんな感じです。

＜日本語版＞

f:id:Takunoji:20191013202351p:plain — 多言語化サンプル

＜英語版＞

f:id:Takunoji:20191013202707p:plain — 英語版

Angularを使用して、表示メッセージに値を設定して表示しています。

＜HTML部分＞

<div ng-controller="topController" class="container-fluid text-center">
<div class="row content">
<div class="col-sm-2 sidenav">
<p><a href="#">Link</a></p>
<p><a href="#">Link</a></p>
<p><a href="#">Link</a></p>
</div>
<div class="col-sm-8 text-left">
<h1>{{welcomeMessage}}</h1>
<p>{{firstMessage}}</p>
<p></p>
<hr>
<h3>{{secondMessage}}</h3>
<p>{{thirdMessage}}</p>
</div>
<div class="col-sm-2 sidenav">
<div class="well">
<p>ADS</p>
</div>
<div class="well">
<p>ADS</p>
</div>
</div>
</div>
</div>

＜JS部分＞

/*
* PGボックス用APP
*/
// 言語取得
var docLang = navigator.language;
// モジュール
var app = angular.module('pgBoxAG', );
// コントローラー
app.controller('topController', function($scope) {
// 初期表示設定
$scope.userLang = docLang;
var messArray = ;
// メッセージテキスト設定する
if (docLang == 'ja') {
messArray = JAPANESE_MESSAGE;
} else {
messArray = ENGLISH_MESSAGE;
}
// メッセージの設定
$scope.welcomeMessage = messArray['welcomeMessage'];
$scope.firstMessage = messArray['firstMessage'];
$scope.secondMessage = messArray['secondMessage'];
$scope.thirdMessage = messArray['thirdMessage'];
});

/** 表示メッセージJSON */
var ENGLISH_MESSAGE = {
welcomeMessage: "Welcome to PG Box that is 'Programing play ground'.",
firstMessage: "~programing play gound. Let's play wuth programing.~",
secondMessage: "Testing English",
thirdMessage: "aaa"
};

var JAPANESE_MESSAGE = {
welcomeMessage: "PGボックスへようこそ",
firstMessage: "さぁプログラミングして遊びましょう",
secondMessage: "日本語です",
thirdMessage: "あああ"
};

とりあえずではありますが、こんな感じで多言語化してみようと思います。

でわでわ。。。

プロフィール

id:Takunoji

このブログについて

自分の作りたいもの

地域貢献の自前メディア？

オウンドメディア＝経験談

プラスアルファをどうするか？

結論

オウンドメディア？

どうやる？

テストする？

社員で準備を始める＝自前ビジネスを小さく初めるというところが「テスト」です。

アフィリエイトに学ぶ

自分の思うところ

オウンドメディア

では、問題です

具体的に

前回学習したもの

引っ越し作業をする場合

Shellスクリプト

Shellでの自動化

じゃShellで何やるの？

写真のファイル名を日付順に名前を変更する

Shellスクリプトon Mac

火炎現場の洗礼

システム屋の仕事

IT業界へ行く

IT業界１年生

プログラミングは1日にしてならず

仕事は日進月歩

井の中の蛙、大海を知らず

事の発端

流し読みをしてみる(感想)

この本から何を得るか？

関連大学一覧

アクセスできない

Chromeの設定を行う

キーポイント

AngularJS

BootSrap

どんな技術ポータルにするか？

カテゴリー: 企業名(in 2019)

情報技術(参考サイト)

通信網(参考サイト)

センサー(参考サイト)

IoT(参考サイト)

輸送(参考サイト)

エネルギー(参考サイト)

農業(参考サイト)

建築(参考サイト)

エンターテイメント＆メディア(参考サイト)

アート＆ミュージック(参考サイト)

専用機器(参考サイト)

産業機械(参考サイト)

服とアクセサリー(参考サイト)

医療技術(参考サイト)

支援技術(参考サイト)

科学(参考サイト)※日本の大学は39, 40位だった。。。

ロボット(参考サイト)

宇宙(参考サイト)

人工知能(参考サイト) ※ artificial-intelligence

スーパーインテリジェンス(AI)(参考サイト) ※ super-intelligence

前提

Jumbotron

ベースになるHTML

何も追加しない場合

Jumbotronの場合

Wellの場合

事の発端

多言語化方法

自前多言語化

BootStrapカスタム

AngularJS

自分のJS

パスの種類

AngularJSを埋め込む