月別アーカイブ 5月 2019

asaba 著者:asaba

デジタルツインの勉強会に参加してきました。

浜松市勤労会館でデジタルツイン戦略の勉強会に参加してきました。

 

デジタルツインとは、ドイツの電子機器会社シーメンス社によって開発されたデザイン・設計・製造・サービス各プロセスの情報を収集

し、集めたデータで作った仮想のオブジェクトとしてシミュレーションをすることで品質の向上と工程の効率化を計るシステムのことです。

本場ドイツでは、各従業員から製造を担当するロボットまで情報を共有させて国内生産量を右肩上がりに実績を挙げており、日本でも

日産がシーメンスのソフトウェアを導入し既に施行しています。

 

ですが全ての企業に対して適応可能というわけではなく、例えば今回の場合中小企業や零細企業はどうやってこのノウハウを取り込めばい

いかなどの課題もちらほら見受けられました。全てを取り込むのではなく、企業の方針や製造している商品に合ったソフトのみを導入して

プロセスを切り分けていくことも大事なのかなと感じました。また、堅牢なプラットフォーム(方針の定まった生産工程)を事前に作って

おかないと後々の想定していない計画変更により一貫性が潰えるので、簡単に導入できるという訳ではなさそうな感じでした。

自動車の需要の比率が年々増えていく今世に対して効率化が求められている現代社会では、これらのシステムをいかに早く従業員に浸透さ

せていくかが品質向上のヒントになりそうですね。自分が今いるプログラミング・システム開発の業界においても応用すべき書物は沢山

ありそうです。これからも耳にすると思うので常時アンテナを張り巡らせておきます。

  • この記事いいね! (0)
asaba 著者:asaba

【react】cssでプロパティにハイフンを付けるとエラーになる

reactでのcssの扱い方が少し雑になっていたのでここらで少し復習します・・・。今回はtips of tipsといってもいいくらい小さなこと

ですががっかりしないでくださいまし。

タイトルの通りreactでcssをいじっていたのですが、text-alignを追加しようとしたらcan,t resolve text-alignでエラーを受けました。

通常htmlに書くcssってハイフンって付くよな?と思い上書き保存してもう一回ビルドするもまたも同じエラー・・・。

reactで書く時はなんかの作法があるのかな?と思いながらも試しにtextAlignで書いてみたらなんとビルド成功。なん・・・だと・・・。

もしかしたらハイフンが付くプロパティは全て抜いて書き出す必要があるのかもしれませんね。

これまたなかなか載っていないのでここでこっそり載せておきます。同じ悩みでいらいらしている人の役に立ちますように・・・。

 

ダメな例↓

</pre>
newsText:{
text-align:"center",
}
<pre>

 

良い例↓


newsText:{
textAlign:"center",
}
</pre>
<pre>

  • この記事いいね! (1)
村上 著者:村上

【JavaScript】LeafLetのマーカーを任意の画像に変換する方法

今後も使いそうな気がしたので、備忘録としてまとめ。
Web 地図のための JavaScript ライブラリ「Leaflet」でマップピンを任意の画像に変更する方法です。

Leaflet の公式サイトはこちらから。

Leaflet – a JavaScript library for interactive maps
https://leafletjs.com/

 

方法は、Leaflet 公式サイトの Docs の icon の項目を参考にしていただければと思います。
https://leafletjs.com/reference-1.4.0.html#icon

使い方は下記のとおり。

var myIcon = L.icon({
    iconUrl: '[マーカーの画像パス]',
    iconSize: [38, 95]  // アイコンサイズ
});
L.marker([50.505, 30.57], {icon: myIcon}).addTo(map);

マーカーを指定する処理のみを抜粋しています。
割愛しましたが、マーカーの影の画像や、クラス要素の名前も指定できるので、状況に応じて追加してください。
なお、必須項目は iconUrl のみです。

他にも、devIcon を利用する方法もあります。
画像のかわりに HTML 要素を指定できますので、IconFont を使用する場合にはこちらを使うのが良さそうです。
https://leafletjs.com/reference-1.4.0.html#divicon

var myIcon = L.divIcon({html: '[html要素]', className: '[クラス名]'});
L.marker([50.505, 30.57], {icon: myIcon}).addTo(map);

上記の Icon 同様に、マーカーを指定する箇所のみを抜粋していますので、それ以外は各自で実装してください。
指定できる項目は、Icon とほぼ同じですが、iconUrl の項目と、マーカーの影に関する項目は指定してあっても無視されるようなので、その点はご注意ください。

 

以上、Leaflet のマップマーカーを任意の画像 or HTML 要素に変更する方法でした。
調べたらすぐにヒットする情報ではありますが、まとめておくといつかの私が楽なのでまとめ。
どなたかの助けになれば幸いです。

  • この記事いいね! (1)
著者:杉浦

手順を差し替えるリファクタリング

 コードを整理するための手法であるリファクタリング手法には名前の置き換えや抽出などがあります。しかし時折いささか複雑な手順を実行しているコードに出会うことがあります。その様なコードはどこをどう切り取っても名前を置き換えても複雑なままで事故の元になります。そういった時は、入力と出力が同じになる様に注意して、別の単純なコードに置き換えた方が簡単に整理できます。
 例えば、次です。

e = document.querySelectorAll('a, span, div');
f = false;
e.forEach(function(e){
  if(e.innerText==='hoge'){
    f=true;
  }
});
if(f){
  console.log('hoge is exist');
} else {
  console.log('hoge is not exist');
}

 即興の例なのでまあまあシンプルです。実際はもっと長大なコードであったりします。このコードを置き換えてみます。置き換えで重要なのは入口と出口を壊さないことです。この例における入り口とは

e = document.querySelectorAll('a, span, div');

であり、出口とは

if(f){
  console.log('hoge is exist');
} else {
  console.log('hoge is not exist');
}

です。入口と出口はリファクタリング対象の部分の目的によって変わります。もし、変数fがこのコードの後に再利用されるならば、変数fも出口の一部扱いです。

 リファクタリングの際には入口と出口を変えていないことを確認しながら作業します。

const elements = document.querySelectorAll('a, span, div');// コピペ

// 要素リストelementsの中にinnerText==='hoge'となる要素が存在するかで分岐

const msg = exist_hoge ? 'hoge is exist' : 'hoge is not exist';
console.log(msg);

 ここでは目的が定まっているため大雑把に消しました。他人のコードや過去のコードをいじる際には目的が正しいかを確認する必要があります。テストが用意されているならばそれに従いましょう。
 入口出口が安全に保護されているので内部を好きに弄れます。最終的に次のコードにしました。

const elements = document.querySelectorAll('a, span, div');// コピペ

const exist_hoge = Array.from(elements).map(element=>element.innerText).indexOf('hoge') !== -1;

const msg = exist_hoge ? 'hoge is exist' : 'hoge is not exist';
console.log(msg);

 ワンライナーで済むようになりました。

  • この記事いいね! (0)
著者:ym

スマホとボケ

私のスマホのカメラがボケるようになってしまいました。

インカメラは問題無し。はじめカメラアプリが壊れたと思ってたのですが、どうやらハードウェア自体が故障した様です。

まあカメラだけであれば、別のカメラでどうにかなると思っていたけど、問題はQRコードリーダ。結構厄介です。なにか情報ないでしょうか。

  • この記事いいね! (0)
村上 著者:村上

【Android】WebViewでフォントアイコンが表示されない【未解決】

以前投稿した、【Android】WebViewでLeafletのアイコンが表示されない【未解決】 について、若干の進捗があったのでご報告。
しかし、まだ解決までには至っておりません…。

 

Google Chrome の機能で WebView の詳細なデバッグができるようになったので、発生していた jQuery のエラーは解決できました。
なお、デバッグ方法については、【Android】Google Chromeを使ってWebViewページのデバックを行う方法 を参考にしていただければと思います。

また、上司のアドバイスにより、バグが発生しているのが Leaflet ではなく、フォントアイコンであるらしいことも分かりました。
が、ここで行き詰まる…。
エラーメッセージが発生しないエラーなので、解決方法を調べにくく、まだこれだ!という方法を見つけられていません。

なお、使用しているフォントアイコンはこちらの「WebHostingHub Glyphs」です。

WebHostingHub Glyphs
https://www.webhostinghub.com/glyphs/

 

とりあえず、ブラウザではフォントアイコンが表示されるのに、WebView になった途端、アイコンが四角形になってしまい、正しく表示されないことは分かりました。
エラーは発生してはいないので、フォントアイコンの指定の仕方などが原因かなとは思います。
だんだんと絞り込めてきたので、もうひと頑張りしたいと思います。

以上、Android の WebView でフォントアイコンが表示されない不具合についてでした。

  • この記事いいね! (0)
著者:杉浦

【Python】PythonのHTTP通信用ライブラリRequestsとBeautiful SoupとSelenium

 Pythonは次の標語にある様に、様々なことを簡単なコードで実現することが主目的の言語です。この目的は、多様なライブラリの中から目的に沿ったライブラリを呼び出す、という方法で実現されています。

Python is a programming language that lets you work quickly and integrate systems more effectively
Welcome to Python.org

 この記事では3種類のHTTP通信用ライブラリを目的別に紹介します。
 ひとつはRequestsです。
Requests: HTTP for Humans™ — Requests 2.21.0 documentation
 Requestsはとても簡易なHTTP通信用ライブラリです。例えば次の様にパラメータと宛先を用意してメソッド指定するだけで動きます。これはAPIが用意してある様な、GUIを用いないことを想定している相手との通信で有効です。

import requests

BACKLOG_PARAMS = {
    'apiKey': API_KEY,
    'projectId': PROJECT_ID,
    'summary': data['summary'],
    'issueTypeId': ISSUE_TYPE_ID,
    'categoryId[]': CATEGORY_ID,
    'priorityId': PRIORITY_ID,
    'startDate': data['startDate'],
    'endDate': data['endDate'],
    'estimatedHours': 7,
    'assigneeId': ASSIGNEE_ID,
}

response = requests.post(BACKLOG_URL, params=BACKLOG_PARAMS)
print(response)

pythonの人間のためのHTTPライブラリRequests – 株式会社シーポイントラボ | 浜松のシステム開発会社

 ふたつめはBeautiful Soupです。これはHTMLを始めとした構文解析を活用することができます。大体Requestsと組み合わせて静的なwebページを扱う時に使います。ブラウザを介さないため後述のSeleniumより遥かに高速です。
Beautiful Soup: We called him Tortoise because he taught us.

import requests
from bs4 import BeautifulSoup

response = requests.post(BACKLOG_URL, params=BACKLOG_PARAMS)
soup = BeautifulSoup(response.content)

soup.title
# <title>The Dormouse's story</title>

soup.title.name
# u'title'

soup.title.string
# u'The Dormouse's story'

soup.title.parent.name
# u'head'

 3つ目はSeleniumです。webページのテストでよく使うものでPythonにも用意されています。ブラウザを介する正式な手順を踏むことによってセキュアなページでも手間取ることなくアクセスできます。代わりにブラウザを介する分けっこう重いです。
Selenium with Python — Selenium Python Bindings 2 documentation

from selenium import webdriver
from selenium.webdriver.chrome.options import Options
from selenium.webdriver.common.keys import Keys
from selenium.webdriver.support.select import Select


def login():
    # ログイン
    driver.get('https://')
    driver.find_element_by_css_selector('input[name="_Account"]').send_keys('sugiura')
    password = ''
    driver.find_element_by_css_selector('input[name="Password"]').send_keys(password)
    driver.find_element_by_css_selector('input[name="Submit"]').send_keys(Keys.ENTER)


if __name__ == '__main__':
    options = Options()
    options.add_argument('--headless')
    # Chromeを起動
    driver = webdriver.Chrome(executable_path="C:\selenium\chromedriver.exe", chrome_options=options)
    login()
  • この記事いいね! (1)
asaba 著者:asaba

【cordova-react】ページ読み込み速度改善の備忘録

以前からアプリの速度改善に取り組んでいるのですが、先人の知恵もあってページ起動時間がかなり短くなりました。

欲をかいてあと一秒早くしたいなーと思いながらgoogleでコードチューニングのことを調べていると、日本ラドウェア株式会社さんの記事が気になったので読んでみました。

すると、アプリのページ表示に3秒以上費やしてしまうと、ユーザーはストレスを感じWebサイトへのアクセスを取りやめてしまうという

興味をそそるような情報を発見。

今のアプリは起動迄3秒~4秒でアプリとしては十分な速度だったのですが、ダメ元で更に速度を改善できないかなと思い

有用な情報を探していたのですが、ここのサイトでloadable-componentsというライブラリを見つけました。

loadable-componentsは、code-splittingのように必要なページだけを読み込むことで読み込み時間の短縮が見込まれる期待を持っているライブラリです。

何も手をつけていないデフォルトの状態では、読み込むためのファイルはバンドルによって一つのファイルになっているのでこれを一気に

読んでいるのが原因で遅くなるのではと考えました。

試しに公式のコードを真似てアプリに加えてみました。すると、syntax error importで怒られてしまいました。

スタックオーバーフローをくまなく見ると、どうやらwebPackにloadable-componentsを動かす環境が整っていないために

起きるエラーみたいです。という訳でcreate-react-Appで立ち上げないといけないのですが、一から環境を変えてしまう訳にはいかない

ので、別の機会に自分でwebPackの設定をして動かせるように努めたいと思います。

一応サンプルだけ載せておきます。役にたつか分からないですが、公式が割とごちゃごちゃしているので載せておきます。

 


<span style="color: #666699;">routes.js</span>

import loadable from '@loadable/component'

//分割したいファイルを記述

export const Detail = loadable(() = import('./detail'))


 


<span style="color: #666699;">app.js
</span>import React, { Component } from 'react';
import Route from 'react-router-dom/Route';
import HashRouter from 'react-router-dom/HashRouter';
import Switch from 'react-router-dom/Switch';
import ReactDOM from 'react-dom';
import MuiThemeProvider from 'material-ui/styles/MuiThemeProvider';
import Detail from './detail';
import * as routes from 'routes'
class Root extends Component {
  render() {
    return(
      <MuiThemeProvider>
        <HashRouter>
          <Switch>
            <Route exact path="/detail/:id" component={routes.Detail} />
          </Switch>
        </HashRouter>
      </MuiThemeProvider>
    );
  }
}
  • この記事いいね! (0)