なりなり日記

スマホ、GARMIN、トレラン、サイクリング、テニス、プログラミングの情報を中心に発信中!

【iOS11】写真とビデオのフォーマットはJPEG/H.264に戻した方がいい

こんにちは、なりなりです(^ ^)

iOS11について書くことが意外と見つからない…

ですが、やっぱ撮り直しの効かない写真とビデオは大切なので、新たに導入されて、かつ、今のところ iOS11でしか使えないHEIF/HEVCではなく、従来の JPEG/H.264に戻した方が無難です。

お節介なAppleが勝手にHEIF/HEVCにしてくれちゃってますから。


やり方は簡単。

設定→カメラ→フォーマットで、互換性優先に変更します。

更に、

設定→写真を見るとHEIF/HEVCフォーマットを自動的にJPEG/H.264に変換して転送してくれるようですが、どうも疑わしい。

こういうの、バグが含まれていて、転送出来ないとか、転送失敗するとか有りそうです。


後から気付いて後悔しないように、当面は

  • JPEG/H.264に戻す
  • 元のフォーマットのまま

としておいた方が良いでしょう。

【PSoC入門】プロジェクト生成からLチカまで

こんにちは、なりなりです(^ ^)

CYPRESS(サイプレス)のワンチップマイコンPSoC(ピーソック)始めました! - なりなり日記

こちらに書いたように

トラ技増刊号、基板付き体験編 ARM PSoCで作るMyスペシャル・マイコンに従って、PSoCの勉強をしましょう!

プログラミングの前に準備が必要

GPIOを使うためのCN1,2へのコネクタ取り付けは省略できますが、本文にも書いてある通り、JP1へのジャンパ取り付けは省略できません。

今時ジャンパと言われても、量産品にジャンパなど搭載しないため、開発の実験室には置いてないのですが…


僕は、仕方なくジュンフロン線を半田付けしてストラップしました。

PSoC Createrのインストール

まずは

PSoC® Creator™ Integrated Design Environment (IDE)

CypressのサイトからPSoC Createrをダウンロードします。本に書かれている通り、TipycalインストールでOK。


作業ディレクトリが決まっているなら、Tools -> Options -> Project Managementで、自分の作業ディレクトリを指定しましょう。

本に従って作業する前に(ここ、重要!)

第9章 Lチカチカあれこれを始める前にやるべきことが有ります。

本に載っているのはPSoC Creater 3.0ですが、今日現在公開されている最新バージョンは4.1 Update 1です。

この最新バージョンにバグがあるので注意です!

File -> New -> Projectで新規プロジェクトを生成します。Launch Device Selecterを選んで


CY8C5868AXI-LP035を選択します。

プロジェクトが生成されたら、そのままビルドします。

ビルドの途中から、Generated_Sourceというディレクトリが生成されて、様々な.cや.hなどが自動生成されるのが分かります。

これをしないで設計を続けて、本に従ってビルドすると


GCC(GNUのCコンパイラ)が見つからないよというメッセージが出てきて止まってしまい、どうにもならなくなります。

これは、明らかなバグです。

サイプレスの代理店にも問い合わせましたが認識していませんでした。

この作業がソフトのインストール直後だけ必要なのか、プロジェクト生成の度に必要なのかは、次のプロジェクト生成時に確認しますが、面倒なのでいきなりビルドを習慣付けた方が良さそうです(^◇^;)

追記

PSoC Createrを一度終了させて再起動、ビルドせずに保存したPSoC5LP_LED2をビルドしたところ、問題無く出来ました。

Lチカ(LEDチカチカ)のためのハードウェア設計

さて、第9章に戻りましょう!

本のバージョン3.0と4.2では多少の違いが有りますが、想像の付く範囲内なので問題無いでしょう。

PSoC Createrが、回路図とCソースをシームレスに扱える、とても優れたIDE(Integrated Development Envilronment、統合開発環境)であることが分かると思います。

ソフトでLチカをさせるPSoC5LP_LED1は特に問題無く動きます。

LEDで定義されている関数は、Generated_Source の下のLED.cやLED.hに自動生成されているので、これを覗いてみるとPSoCの理解が一層深まると思います。


ただ、正直、この本の説明だけでは割り込みハンドラについて理解出来ませんでした。

僕のような初めてのマイコン利用者には理解出来ないと思います。

割り込み処理は必須なので、別途勉強する予定です。


ハードで実現するPSoC5LP_LED2は、僕のようなハードウェア技術者には非常に簡単な内容ですが、何か引っかかったらご報告します。

僕自身がリアルタイムOS(RTOS)、Free RTOSを使う予定が無いため、PSoC5LP_ RTOSはスキップします。悪しからず。

【iOS11】コントロールセンターのカスタマイズと画面の録画

こんにちは、なりなりです(^ ^)

リリースされたiOS11の気になるポイントを、何度かに分けてご紹介していきます。

まず、目玉の一つである、コントロールセンターのカスタマイズです。


画面を下から上にスワイプするとコントロールセンターが現れるのは同じですが、見た目が大きく変わっていて、ミュージックコントロールも同じメニュー内に出てきます。


ミュージックコントロールがそうですが、3Dタッチで巨大化するものが有ります。

これらをカスタマイズするには



設定→コントロールセンター→コントロールをカスタマイズを開き


不要なものを削除したり、必要なものを追加したり出来ますが、残念ながら任意のアプリを起動することは出来ないようです…

もしかしたら、アプリ側の対応で、コントロールセンターに追加出来るのかもしれませんが。


それより、気になったのが「画面収録」です。

これをコントロールセンターに追加して起動すると、画面が動画で記録されるんです!


iOS11の画面収録機能

インスタやYouTubeへの投稿は簡単ですし、友達にアプリの使い方を聞かれてLINEで教えるのも楽ですね!

ブログでも、アプリなどの使い方の説明には何枚もの画像が必要だったし、動画で説明しようにもら画面をビデオで撮るのって意外と面倒だったので助かります(^-^)

iOS11をダウンロードしましたか?

こんにちは、なりなりです(^ ^)

昨日、iOS11が来てたんですねー!

最近はアップデートでハマることも無いので、早速、やってみました。

Wi-Fiで20分ほどで無事完了!

変更内容の抜粋は以下です。

Siri

  • より自然で表現力が豊かになった新しいSiriの声
  • Safari、News、メール、メッセージの使用状況に基づいてSiriから提案をする機能

カメラ

  • ポートレートモードに、光学手ぶれ補正、HDR、True Toneフラッシュの対応を追加
  • 新しいHEIFおよびHEVCフォーマットにより、写真とビデオのファイルサイズをほぼ半分に削減
  • より自然な肌のトーンになるように再設計された新しい9つのフィルタ
  • QRコードを自動的に認識してスキャンすることが可能

マップ

  • 主要な空港およびショッピングセンターの屋内地図に対応
  • ターンバイターン経路で、車線案内および制限速度情報に対応
  • ダブルタップおよびスワイプにより、片手でズームが可能
  • デバイスを動かしてFlyoverを操作することが可能

運転中の通知を停止

  • 運転中であることを認識して自動的に通知を停止し、iPhoneの画面を暗くして音が鳴らないようにする機能を追加
  • 運転中であることを、知らせたい連絡先にのみ自動的にiMessageで伝えることができる機能を追加

その他の機能および改善

  • コントロールセンターのデザインが変わり、すべてのコントロールを1つのページに収めることが可能
  • アクセシビリティ、アクセスガイド、拡大鏡、テキストサイズ、画面収録、Walletを含む、コントロールセンター用のカスタムコントロール
  • 緊急SOS機能により、現在地の位置情報に基づいて救急サービスに通話し、また、緊急連絡先へ自動的に通知を送信、現在地の位置情報を共有、およびメディカルIDを表示することが可能
  • Safariで辞書引き、単位換算、計算に対応

アクセシビリティ

  • VoiceOverがイメージの説明に対応
  • VoiceOverがPDFの表とリストに対応
  • “Siriにタイプ入力”が基本的な検索クエリーに対応
  • ビデオの音声および点字キャプションに対応
  • Dynamic Type機能により、テキストおよびAppのUIの文字サイズを大きくすることが可能

実際の使い勝手については、別途レポートします(^-^)

maxellのEMSギア「もてケア2極タイプ」を購入!

こんにちは、なりなりです(^ ^)

マクセル(maxell)のEMSトレーニングギア「もてケア4極タイプ」でトレーニング開始! - なりなり日記

もてケア4極でトレーニング効果確認前ですが、2極タイプも購入してしまいました。



パッケージと



内容物



粘着シートの貼り方など、極数が異なるだけで、4極タイプと同じですから、詳細は上の4極タイプのレビューをご参考に。


実は、先月末に出場したテニストーナメント予選の初戦は0-8で完敗(⌒-⌒; )

対戦相手はテニスコーチとのことでしたが、1ゲームもキープ出来なかった悔しさから、今更ながらテニス部に入部すると共に、更に体を鍛えることにしたのです。


2017.8.25と本日、9.15時点の僕の体のデータを整理しておき、今後も追加していきたいと思います。

うちの体組成計はオムロンの体スキャンですが、20年近く前の物ですし測定値は絶対的なものではないですけど、相対的に大きな変化が有るか否かの参考にはなるでしょう。

測定時間は、会社から帰宅後の夕飯前とします。

ウェスト、太腿周り、腕周りはメジャーでの測定結果ですから、多少の誤差があるでしょうが、ホクロの位置を目安にしているので、それほど大きくは無いと思います。

測定日 2017.8.25 9.15
体全体 身長 169cm
体重 58.6kg 59.4kg
体脂肪率 18.3% 17.9%
皮下脂肪率 12.4% 12.3%
骨格筋率 32.6% 32.8%
体幹 ウェスト 75.5cm 75.0cm
体幹皮下脂肪率 10.7% 10.6%
骨格筋率 27.0% 27.2%
脚部 右太腿周り 48.5cm 50.0cm
右脹脛周り - 35cm
皮下脂肪率 16.8% 16.4%
骨格筋率 49.9% 50.0%
腕部 右上腕周り 26.0cm 26.5cm
右前腕周り - 26.0cm
皮下脂肪率 17.3% 17.0%
骨格筋率 38.6% 38.8%


全般に骨格筋率が上がって脂肪率が下がっていますが、コンマ数%なので誤差ですかね。

太腿は、足を組んだ時に太くなった気がしているのですが、1.5cm増は大き過ぎる気もします。

腹筋と違って、脚は階段上りで鍛えているから、相乗効果かもしれませんが。


トレーニング開始前の各部の写真です。写真は、見た目に変化があれば最新のものを掲載することにします。

マラソンも7年やりましたし、トレラン、サイクリング、テニスと何れも脚が重要なスポーツをしていますから、太腿はまあまあ鍛え上げられています。


もてケア使用状態(設定レベル、max 15)

設定日 2017.8.25 9.15
4極タイプ 腹筋 7 8
背筋 15 15
太腿 10 12
2極タイプ 上腕 - 10
前腕 - 8
脹脛 - 8

使用箇所によって電気刺激の受け方が大きく違うことが分かりました。

僕の場合、背筋は特に感じにくいですね。


前も書いたように毎朝職場の24Fまで階段上り(パワーアンクルは壊れてしまいました)、毎晩お風呂に入る前に腕立て伏せ(もてギア使用開始時50回)をしていますし、トレラン、サイクリング、テニスと運動も十分しています。

しかし、昔から割と体は鍛えてきていますが、恐らく今が一番体格がいいくらいなので、今より明らかにガッシリしてきたとしたら、もてケア効果なのだと思います。


もてケアは、注意書きを守って、週に2日ほどは休養日を設けて使っていきます。続けている腕立て伏せなども、そうしていますし。


次回は、また一月後、その後は二ヵ月毎くらいのペースで報告していく予定ですが、装着感やゲルパッドの耐久性については別途報告します(^-^)

CYPRESS(サイプレス)のワンチップマイコンPSoC(ピーソック)始めました!

こんにちは、なりなりです(^ ^)

最近、天候不順が続いていたり、スポーツはテニスに力を入れているためあまり書くことがなく、プログラミングの話題が多くなっていますが、今日はマイコンの話です。

新型iPhoneに関しては、僕が言及するまでもありませんし。マスコミは騒ぎますが、もはや、毎年スマホを買い換える人なんて皆無ですよね。

最短でも、2年経って支払いが終わったから買っても良いかな?とか、iPhoneはOSのアップデート対象外になるまで使うよ、とか。

何故、PSoCに興味を持ったのか

僕は通信機器のハードウェアエンジニアで、今までガチガチのハードだった構成に柔軟性を持たせくて、マイコン、PSoCを少し前に導入しました。

コーディングなどは若い人に任せていたのですが、自分でも設計できた方がいいと思って勉強を始めたんです。


PSoCはC言語で設計するのですが、製品適用前に基礎検討する時には、PCで制御したり通信させたりすると都合が良いのです。

プログラミングするの久しぶりだなぁ、今は、何を使うのが良いの?と調べてみると、Pythonが目に付いて、Pythonを使い始めたという流れです。

新世代のBASIC⁉︎ プログラミング言語Python始めました! - なりなり日記

Pythonについては、こちらにも書きまして、以降、Pythonネタが増えています。

この先、Connect IQプログラミング再開しました!、ラズパイ買ってみました!なんて展開もある予定です。

個人でハードウェアを組むって大変なことですけど、ソフトを使うと幅が広がりますねぇ。

PSoCも電子工作に使われているようですが、ラズパイはボードとしての認知度が高いので、もっと面白そう(^-^)

PSoCとは

話を戻して、今回は、そもそもプログラミングを再開するきっかけとなったPSoCの話となります。


http://japan.cypress.com/products/microcontrollers-mcus#tab1http://japan.cypress.com/products/microcontrollers-mcus#tab1

PSoCはサイプレス(Cypress)社のARMコア搭載マイコンの名称で、Programmable System on Chipの略です。

PSoCが普通のマイコンと違うところは

  • 小規模なFPGAを内蔵している
  • IOの大半がGPIOである
  • 電源監視、電源起動シーケンサー、電源トリミングが簡単に出来る

ことでしょう。

そもそもPSoCを使ってみようかなと思ったのは、元々必要な電源監視ICプラスα程度のコストだったからです。

この程度のコストなら、例え大したことに使えなかったとしても、DAC やADC、PLLなどのICのSPI制御をさせるだけでも元は取れるかなと。

  • ADC、DAC 、Op AMP、温度センサーなどのアナログ回路搭載
  • クロック、タイマー内蔵
  • DMA(Direct Memory Access)対応
  • I2C、SPI、UARTなどのディジタル回路搭載

などは、他社のマイコンでも対応していますが、I2C、SPI、UARTなどのディジタル回路は、UDB(Universal Digital Block)と呼ぶFPGA部を使ってプログラマブルに実装出来ます。

ディジタル回路は自分でもHDLや回路図で組めますし、サイプレスが標準マクロとして提供もしています。

例えば、未使用のフラッシュメモリ領域をEEPROM代わりに使えたり。

購入数量にも寄りますが、PSoC 4あたりなら、電源監視IC + EEPROMだけと考えてもコスト的にはペイします。

このPSoCのUDBやADCなどのアナログ回路は、かなり自由にGPIOと接続出来ますが、一般的なマイコンは、ADCなどに繋がるポート、UARTに繋がるポートなどと決まっていることが多いようです。


つまり、PSoCは自由度が非常に高いマイコンということです。


また、PSoC 4の一部のチップではBLE(Bluetooth Low Eneargy)に対応していて、PWB上にアンテナパターンを引いて、マッチング用のコイルとコンデンサを経由してPSoCに繋ぐだけでBluetooth通信が可能になります。

アナログ回路部を省略したPRoC(Programmable Radio on Chip) BLEもリリースされています。

これも製品に適用出来ないかと考えているので、そのうち評価してみるつもりです。


サイプレスのサイトを見れば、PSoCの統合開発環境PSoC Createrのインストールからスタートアップ、サンプルプロジェクトなど沢山あるのですが、流石に説明が大雑把なのですが、プロジェクトとして生成されるファイルが何を意味するのかなど、細かいことも理解したいし、実機を動かしてみたいということも合わせて、こちら、

トラ技増刊号、基板付き体験編 ARM PSoCで作るMyスペシャル・マイコンを購入しました。


http://shop.cqpub.co.jp/hanbai/books/MTR/MTRZ201312/MTRZ201312.pdf

こちらが雑誌のサンプルPDFです。

購入者は全文をPDFで入手出来る様にして貰えないですかねぇ、老眼が進むと、本読むのキツイんですよ。老眼鏡をかけると目が疲れるし…

結局、自分でスキャンしましたけど。


こちらが実物。PSoC 5LP搭載基板と本に掲載のサンプルプロジェクトが収められたCDが付いています。

本の厚みの半分弱は基板とCDの梱包用厚紙です。



付属基板の裏と表です。

mini USB端子が2つ付いていて、それぞれ、デバッグ・プログラミング用とPSoCとPCの通信用です。

電源はUSBから供給されますから、これ一枚で、

  • PCとUSB接続して、UART通信
  • 何かの処理をしてLED点灯

などが出来ます。

PCとの通信はPythonでプログラムを組んで実現する予定です。

GPIOはスルーホールに引き出されているので、ここに何かを接続してコントロールすることも出来ます。


さて、これから、じっくり勉強していきます(^-^)

鎌倉三十三観音 御朱印巡り(光触寺、明王院、浄明寺、報国寺)と北鎌倉ぬふ・いちのスープカリー

こんにちは、なりなりです(^ ^)

奥さんにお付き合いして、鎌倉三十三観音の御朱印巡りをしてきました。

僕の今日の目的は、北鎌倉ぬふ・いちのスープカリーです(^-^)

光触寺(こうそくじ、七番札所)

駅からは少し遠いので、バスがお勧め。十二所バス停から3分、ハイランド前バス停から6分です。



門を通って中に入ると、光触寺(こうそくじ)の説明が。


御朱印は本堂の脇で書いていました。


塩嘗地蔵(しおなめじぞう)


奥様は御朱印をゲット!

御朱印って、何ですかね。
僕的には、スタンプラリーやポケモンGOと大差ない様な…(⌒-⌒; )

明王院(みょうおういん、八番札所)


さて、徒歩で明王院に向かいます。


明王院は、法事中だったからなのか、いつもなのかは分かりませんが、境内撮影禁止となっていました。


こちらが御朱印です。

浄明寺(じょうみょうじ、九番札所)

多くのお寺同様に、門を入ったところで御朱印をお願いして中に入ります。


本堂でお参りをした後、境内の喜泉庵(きせんあん)で抹茶を頂きます。



とても風情がありますね(^-^)




とても静かに落ち着いて過ごせました。畳にも座れますが、基本が椅子なので年配の方でも寛げます。



生菓子と抹茶のセットが1,000円なので、まあまあします。でも寛ぎのひと時は何物にも代え難い。

抹茶は冷たいのと暖かいのが有ります。


こちらが御朱印。

報国寺(ほうこくじ、十番札所)

さて、本日最後の報国寺に向かいます。

本堂左手の事務所で御朱印を貰います。

ここには竹林の見事な庭園が別料金で、その中に抹茶を頂けるお店も有ります。


こちらが御朱印。

御朱印巡りはここまで。

北鎌倉ぬふ・いち

ぬふ・いちは営業時間が定まっておらず、カレーが無くなったら閉店なので、報国寺を出たら電話して予約しました。当日予約も可です。

ぬふ・いちは最寄りが北鎌倉ですが、直接向かうバスは無いので、バスで鎌倉駅に戻って、横須賀線で北鎌倉駅へ。

北鎌倉 ぬふ・いち

食べログ北鎌倉 ぬふ・いち

北鎌倉駅からは建長寺に向かいます。

去来庵

食べログ去来庵

ビーフシチューで有名な去来庵が目に入りますが、



振り向けば、ぬふ・いちへの階段が有ります。



店内は、まんま、一般家庭のダイニングの様です。




こちらが通常メニュー。



ビーフステーキとタンドリーチキンが限定6食のメニューです。

ただ、お勧めは鎌倉野菜が付いたメニューです。

  • 鎌倉野菜のスープカリー
  • 鎌倉野菜のスープカリーセット(デザート付き)
  • 鎌倉野菜のスープカリー&ビールセット

のどれかでしょう。

奥さんは鎌倉野菜のスープカリー


僕は鎌倉野菜のスープカリー&ビールセットにしました。

ビールセットはライスの代わりに、骨つきソーセージとビールが付きます。

暑かったのでビールに惹かれました(^-^)


骨つきソーセージも美味しかったです。

スープカリーは、よくある北海道スープカレーとは一線を画す、というか、ご店主の完全オリジナルと思われます。

カリーは

  • 少ししょっぱい
  • 具材無し

のため、正直、普通のカレーを期待すると裏切られるかもしれません。

でも、ここのカリーは、何というか、鎌倉野菜を美味しく食べるためのスープ、というより、付けダレなんですよ。

野菜の多くは素揚げや焼いたものなので、野菜の天ぷらをカレー味のつゆに付けて食べる感じです。

これが、鎌倉野菜を最高に美味しく頂けるんですよ。

だから、鎌倉野菜のセットが一番!


今日は10時には鎌倉駅に到着、13時からカリーを頂いて、14時には北鎌倉駅を出ました。

このくらいのスケジュールで動くと、週末の鎌倉を楽しく回れます(^-^)

【JavaScript入門】今見ているサイトのタイトルとURLをクリップボードにコピーする

こんにちは、なりなりです(^ ^)

Pythonで作るタイマープログラムから脱線してJavaScriptの話になっていますが、今回もJavaScriptの話です。

簡単に出来そうで欲しい、JavaScriptというかbookmarklet(ブックマークレット)が、今見ているサイトのタイトルとURLを取得してクリップボードにコピーしてくれるものです。

僕の場合、ブログを書いて、Facebookページに投稿するのに必要なんです。最初は自動投稿してくれるプラグインなどを使っていた気がしますけど。


簡単に出来ることを期待していましたが、意外と厄介でした…


まず、タイトルとURLを取得するとこ自体は超簡単です。

document.title;  #表示中のHTMLのタイトル
location.href;   #表示中のHTMLのURL

それぞれ、文字列を返してくれます。ここまではいい。


JavaScript クリップボード コピーで調べると

document.execCommand - Web API インターフェイス | MDN

documetオブジェクトで選択済みの範囲の文字列を

documet.execCommand('copy')

でクリップボードにコピー出来るようです。

が、文字列変数をdocumetに格納するのが一筋縄ではいかず、面倒になって断念(⌒-⌒; )

これは、Pythonistaの出番では?


ということで、コピペは自力でやることとして、タイトルとURLを表示してくれるbookmarkletを作ることにします。

簡単なのがテキストをポップアップ表示してくれるpromptを使うことで

prompt('ポップアップのタイトル','表示するテキスト')

でOK。


bookmarkletの基本は

- JavaScriptを一行に繋げてブックマーク化したもの
- javascript:(:に続けてjavascriptを記述)をブラウザのURL欄に入力、又はブックマーク化する
- 改行無し
- スペースは%20(半角)で置き換える
- 改行(¥n)は%5Cn(半角)で置き換える

ですが、今回は一文でだけなので簡単ですね。

javascript:prompt('タイトルとURL',document.title+'\n'+location.href);

これを適当なサイトを表示させて作ったブックマークのプロパティ(URL)を上記に置き換えれば


サイト表示中にブックマークを選ぶとこの様になるので、表示されたテキストを選んでコピペして使います。

超簡単な割には、そこそこ便利ですよね(^-^)

【JavaScript入門】簡単なタイマーを作る

こんにちは、なりなりです(^ ^)


JavaScriptなら誰でもプログラミングが始められる! - なりなり日記
こちらにJavaScriptに関して簡単にまとめましたが、手始めとして、

【Python入門】Pythonistaでタイマーを作る(2) - なりなり日記

【Python入門】tkinkerでタイマーを作る - なりなり日記

こちら、Pythonで作ったのと同じ様なカウンターを作ってみます。

作成したプログラム、counter.htmlの中身がこちら。

<html>
<head>
<title>Timer</title>
</head>

<body>

<form name="timer">
<input type="text" name="textbox" value="10">
<input type="button" value="START" onclick="countdown()">
</form>


<script type="text/javascript">
var count;

function countdown(){
   count = Number(timer.textbox.value);
   //alert(String(count));
   
   if(count <=0)
       alert("時間です!");
   else{
       setTimeout("countdown()", 1000);
       count--;
       timer.textbox.value = String(count);
   }
}
</script>

</body>
</html>


<form>から</form>でform(タイマーと命名)の中に、text(textboxと命名)とボタン(今回は必要無いので名前は付けません)のウィジェットを定義しています。

button スタートを押す(クリックする)とcountdown関数が実行されます。

記述方法が異なりますが、PythonでUIを構築するのと同様ですね。

formは<body>と</body>の間、<script>の上に記述します。


後は関数contdownの定義です。

Number(timer.textbox.value);

は定義したtimerのtextboxの値を数値に変換します。

ウィジェットに名前を付けていない場合は

timer.elemnts[0].value

と記述します。elemnts[]の中の数値は0をスタートに定義した順番となります。

今回は0:text、1:buttonです。

setTimeout("countdown()", 1000);

が今回の肝で、1000ms後にcountdown関数を呼び出します。
関数の中で再起呼び出しをすることによって1000ms毎に連続実行する作りは、Pythonで作ったプログラムと同じです。

alert("時間です!");

これで簡単にメッセージウィンドウが開けるので入れてみました。


<body>から</body>をこのエントリー内で直に書き込むと下記の様になり、ボタンを押すと実行されます。






当たり前だけど、JavaScriptはブログ内でも普通に実行できるんですねー、素晴らしい!

せっかくJavaScriptの勉強を始めましたが、どうやら去年あたりから、DropboxやGoogle Driveなどで一斉にJavaScriptをURL指定して直接実行することが出来なくなったようなんですよ。

それなら安価なレンタルサーバーでも借りようかと(ロリポップ!の最安は月100円!)思ったのですが、当面は必要ならブログに埋め込むで良いかな。

そのうち興味を持ったら借りてみるかも。

ブラウザから直接実行出来るブックマークレットも勉強したい。


Python、JavaScript(HTMLの勉強も含む)と始めてみて、自分で出来ることが格段に増えて楽しいです。

特に、僕は、トレラン、サイクリング、テニス(先週、会社のテニス部に入ってやる気満々!)と楽しみがスポーツばかりだった(このブログは趣味と実益を兼ねてますが)ので、プログラミングを趣味にするのもいいかも(^-^)

JavaScriptなら誰でもプログラミングが始められる!

こんにちは、なりなりです(^ ^)

Pythonの勉強をしていますが、同時にJavaScriptにも興味を持って調べています。

JavaScriptとは何なのか!初心者向けに徹底解説 | TechAcademyマガジン
例えばここなどて、JavaScriptって何なの?という疑問に答えてくれます。


【2017年最新版!】人気プログラミング言語を徹底比較! | TechAcademyマガジン
Pythonも人気だけど、JavaScriptも人気らしい。最も、僕はプログラマーになる訳では無いので、人気とか関係は無いですけど(⌒-⌒; )


JavaScript | MDN
JavaScriptに関しての詳細にはこことか。


http://www.pori2.net/js/JavaScript入門
入門には、こことか分かりやすいです。


JavaScriptに興味を持ったのは

  • 実行環境を選ばず、Pythonの様にインタプリタをセットアップする必要も無い
  • ブラウザのブックマークから実行出来るブックマークレットが便利
  • HTMLと親和性が良いので、ホームページから情報を取り出すのが簡単そう

だからです。

C/C++などの一般的はプログラミング言語を概ね理解している僕からみたJavaScriptに関する理解を以下にまとめます。

文法的には、ほぼほぼC/C++ですが型宣言の必要は無く、一部、PASCAL風のところも有り。

JavaScriptとは

実行環境はブラウザで、ほぼ全てのブラウザ(JavaScriptをONにすれば)で実行できる。

テキストエディタとブラウザのみで開発、実行出来る。

文法はJAVAとは全く異なる。

基本的には.htmlファイル内の<script>と</script>の間に記述するスクリプトで、HTML内に埋め込めるプログラムである。

特別なものが何1つ必要ないため、最も身近なプログラミング言語である。

最低限のひな形

<html>
<head>
<title>タイトル<title>
</head>
<body>
<script>
   <script>と</script>の間にJavaScriptを記述
</script>
</body>
</html>


変数宣言

var 変数名;
var 変数A, 変数B, 変数C;
var 変数名 = 値;
  • 変数名の最初は英文字でなければならない
  • ローカルとグローバルの考え方はCと同じ
  • 変数の型は宣言しない


関数宣言

function 関数名(引数){
   処理;

    return 戻り値;(無くてもOK)
 }


文の区切り

「}」の後ろ以外には必ず「;」が必要。

文字列表示

document.write('文字列') 又は document.wirte(数字)

改行する場合は

document.write('文字列<br>')

とする。

<br>はHTMLの改行コードで、数字を出力して改行したければ

document.write(数字);
document.write("<br>");


加算

'文字列' + 数字が可能で、結果は文字列となる。

インクリメント、デクリメント表記i++, i--可能。

数学関数の利用

標準で用意されている組み込み関数が、特にインポートなどせずに利用出来る。

Math.pow(a,b), Math.sin(a), Math.log(a)などがある。

C++のmathクラスを用いているかと思いきや、常用対数Math.log10()は無く、乱数発生Math.random()が有ったりする。

複素関数は標準では使えないが、math.jsを使って実現できる

math.js | an extensive math library for JavaScript and Node.js

if, switch, for, while文

 Cと同じ。

例えば

 for (var i=1 ; i<=10 ; i++){
  document.write("繰り返し文です。<br>");
 }


配列

 var a = new Array()

宣言時に配列の大きさを考える必要は無い。

breakとcontinue

 Cと同じ

コメントアウト

C言語と同じ。

// 1行だけのコメント

/* 
    複数行に渡る
    コメント
*/

<script>外のHTMLスクリプトでは

<!--
    複数行に渡る
    コメント
-->

で複数行に渡って指定する。

JavaScriptの外部ファイル

拡張子は.js(JavaScript)。

起動させるには、HTML内に一行書くだけ。

<html>
<body>
<script type = "text/javascript" src="jsファイルのパス"></script>

<script>
   //JSファイルで定義した関数が使用可能。
</script>
</body>
</html>


ブックマークレット

- JavaScriptを一行に繋げてブックマーク化したもの
- javascript:(:に続けてjavascriptを記述)をブラウザのURL欄に入力、又はブックマーク化する
- 改行無し
- スペースは%20(半角)で置き換える
- 改行(¥n)は%5Cn(半角)で置き換える


このエントリーを書いて知ったこと

HTMLやJavaScriptのソースコードをブログで表示させるのは結構面倒だけど、はてな記法を使えば簡単で

>||と||<の間に書くことで、コードがそのまま表示出来る。

HTMLでよく使う「<」は「&lt;」に、「>」は「&gt;」に置き換えれば、タグでは無く文字として表示出来る

最初はHTMLで何とかしようと思いましたが、

HTMLのタグ<pre>と</pre>の間に書いた場合だと、上の方法で<と>も置き換えの必要がある。

ため、面倒でした。


【JavaScript入門】簡単なタイマーを作る - なりなり日記

実際にJavaScriptでプログラミングしてみましょう!