無観客で開催されることになってしまった小学校の運動会。一所懸命な姿を家族に見てもらうために複数カメラを使ってライブ配信できないか、多くの制約の中で試行錯誤しています。
IT実践
無観客で行われる小学校の運動会を複数カメラでライブ配信したい
iVCam
ICT実践記事
- 光ネクストへ切り替わったのでルータ新調で下り320Mbps
NTTのフレッツ光プレミアムが2019年1月末で終わるという事で、トラブルの出尽くしたであろうギリギリで切り替え工事をしてもらいました。 「ハイスピード」と「ハイスピード隼」が選べましたが、工事に何倍も時間のかかる「ハイスピード隼」でお願いしました。（工事に来ていただいた業者様、忙しい時期にありがとうございました） タイトルの「下り速度320Mbps」ですが、実は古いルータ（NEC WR8700N）の有線接続で出た数字です。 あ、すみません。画像加工してMbpsをbps表記にしてあります。 オリジナルは↓これです。 WR8700Nのレビューはこちらが参考になります。 2010年の製品ですのでIEEE802.11n/11aしか対応していないのと2ストリーム（アンテナが2本）のためか、別の階でのWiFiは遅く、3台・4台と接続すると良く通信が切れたりしていました。 業務用はYAMAHA、家庭用はNECという信念を10年以上貫いてきましたが、家庭用ならバッファローもありかな…と。（NTTが切り替え工事の際に施策ルータとして提供しているのがBuffalo又はYAMAHAだったのがトドメ） お買い得品をネットで見つけて買ったのが「WSR-2533DHPL」です。 バッファローのルータは、WSR-2533DHP（L無し）とかWXR-2533DHPとか間違い探しみたいな型番号が多いので、気を付けてください。 IPoE（IPv6）には対応していませんが、4ストリームで1733Mbps（5GHz）＋800Mbps（2.4GHz）が魅力で実売価格7,000～8,000円。 9年前の機器とはさすが違いますね。 別の階で2台のパソコンを使っているのですが、どちらもUSBタイプの無線LAN子機を使っています。それも1,000円もしない11acには非対応で2.4GHz専用のもの。 それでも平均して下り速度100Mbps～200Mbps 出ています。 さらに非常に安定しています。 有線もすいている時には400Mbpsを超えます。 スマホやタブレットもWiFi回線が安定し、ブロスタやスリザリオがぬるぬる動くようになったと評判です。 屋根裏に潜ってLANケーブル引っ張ろうかと、釣り竿まで用意していたのが不要になりました。 無理なら屋外から引っ張ろうと、防水LANケーブルを「欲しいものリスト」に […]
- Webの文字サイズはvwでシルバーファーストに
Webコンテンツをシルバーファーストで Web制作において「パソコンで表示する文字サイズはvwを使ってmax-widthは1920pxまで対応するべき」という話。 最近は年配の方でも自宅でネットを楽しんでいますが、小さい文字が読みにくいためブラウザを最大化にしている姿をよく見かけます。 残念なことに、有名どころを含めてほぼすべてのサイトで文字は大きくならずに、左右の空白が増えるのみ。 「Ctrlを押しながらマウスホイールで拡大」すれば大抵のブラウザでは拡大されますが、そんな技を使っている一般高齢者を見たことがありません。 パソコンのディスプレイサイズは昔と比べて大きくなりましたが、それと共にディスプレイの高精細化も進んできたため、「目が悪くなってきたから大きなディスプレイを買うかのう」は期待を裏切られる結果となってしまいます。 一般的にWeb制作の現場では、幅1920px以上で見る人向けに作ってしまうと、小さいディスプレイ（解像度の低い）を使っている人や、ブラウザを最大化しないで使用している人には表示がはみでてしまうため、幅1000～1200pxで見た時に最適になるように制作されています。 少し前まではタブレットやスマホはこれよりも画素数が少ないものが多かったため、レスポンシブデザインという表示サイズによって可変のデザインが主流になりました。 しかし可変とは言っても通常はモバイル対応がメインです。画素数の大きい端末での全画面表示は基本的にあまり考慮されず、大きすぎる端末から見た場合にデザインが崩れるのを嫌がり、上述のように幅1000～1200pxを超えた場合は、それ以上には広がらずに左右の余白だけが広がるというのが現状です。 高齢化時代のWebスタンダートに max-width は最低でも1920px、4Kが主流になることを考えると4000px程度までは欲しいです。 メニューやヘッダ・フッタ等以外のコンテンツ部分のフォントサイズは、vwで指定。 これでサイトを作ってみたところ閲覧が非常に楽でした。 椅子にふんぞり返ったままでも、ブラウザを最大化すれば楽に文字が読めます。 あいにく当サイトはまだ着手できていませんので下記サイトをご覧ください。 ブラウザを最大化もしくは幅を広げると、デザインが崩れない範囲で文字も大きくなります。 現在主流のディスプレイ解像度を考慮して […]
- WordPressの新エディタGutenbergは待ち望んでいたUI
WordPress 5.0から採用された新エディタGutenbergですが、WP 5.2を導入して本格的に触ってみました。 ネット上の意見は賛否両論のようです。 （否定派が圧倒的に目につきますが、声を上げるのは決まって反対派が多数ですので…。） 追記：Classic Editorプラグインのダウンロード数（5,000,000以上）と評価を見る限り、以前のエディタの人気が伺えます。 NetCommonsのようなUI NetCommonsというCMSをご存知でしょうか。 今から10年以上前になるのですが、各学校で簡単にWebサイトを管理できるように、NetCommonsを使ったシステム提案を教育委員会に行った覚えがあります。（スルーされたと思っていたら翌年には似たようなシステムが導入されていましたが…） WordPressは「文章を書く」のに対して、NetCommonsは「ブロックを配置」するのに特化していたため、HTML知識が無い方でもコンテンツの書き換えや追加時に、それなりの見た目が維持できるという利点がありました。 複数の学校の先生がそれぞれの担当枠を書き換えたり、毎年担当者が変わるることを考えると、WordPressでは書く人によって、見た目に大きな差が出てしまうのです。 ページ更新・追加・削除のたびに数千円～数万円をWeb制作会社に支払って更新依頼するという形態は、現在は稀なケースだと思います。 WordPress等のCMSが主流になり、クライアント自身が好きなタイミングでコンテンツの更新を行うように移り変わりました。 ですが、制作時にどんなに頑張ってCSSを用意しておいても、更新する人が適切なHTMLタグやショートコードを使わなければ、素っ気ないページに仕上がってしまいます。 素っ気なさすぎるからと、ホームページビルダーで作ってHTMLを貼り付けたり、WordやExcelから貼り付けたり、スペースで文字を揃えたりと、なんだか悲惨なページになってしまったりもします。 更新者のスキルに左右されにくいブロックエディタ ブロックエディタの強みは、見栄えの良いページが直感的に作れるので、HTML・CSSを何も知らない人が更新やページの追加をしていっても、あまり酷い結果にはなりにくいという部分です。 私は制作時に、クライアントのWeb担当者スキルに合わせて管理 […]
- 「Easy Table of Contents」で長い見出しが改行されても行頭を揃えるコピペ用CSS
WordPressに目次を自動挿入するプラグイン「Easy Table of Contents」をカスタマイズして表示を最適化したCSSを配布。
- WordPress管理画面のユーザー一覧をソート可能な任意の項目にする
WordPress管理画面のユーザー一覧から不要な項目を削除・オリジナル項目を追加し、並び替えができるように設定する方法をコピペ可能なソースで紹介。
- WordPressテーマXeory Extensionのナビメニューを修整する
WordPressテーマXeory Extensionの「グローバルナビ」と「プライマリーナビ」メニューを表示順や見出しをカスタマイズしてUI的に使いやすくする方法。
- Googleが独裁者になっていくのは寂しい
世界中でGoogleを知らない人はいないといっても過言ではないほどの巨人。 インターネット黎明期の20年程前は利益を考えないベンチャーとして不気味な魅力がありましたが、最近は大きくなりすぎてしまった弊害が目立ちます…。資本主義の限界なんでしょうか。 Googleの主要サービス 検索エンジン 翻訳サービス 地図サービス メールサービス 広告サービス カレンダー YouTube Google Play Googleに踊らされている人たち 世界地図から住宅地図の尺度まで自在に表示できるGoogleMap、それも無料で使えるとあって多くのWebサイトやシステムにも導入されてきました。 私も例外ではなく、過去に制作してきたコンテンツの多くにGoogleMapを利用させてもらってきました。 ある時規約が変更され、登録しないと表示されない仕様＆表示上限が設けられ、さらに規約変更が重ねられて、今では1,000回表示で7ドルに。 今やネット上の情報を検索するにはGoogleに登録されていなければ、砂漠のド真ん中にお店を開店したようなものです。 検索エンジン大手もほとんどが独自システムの開発をやめてしまい、Googleのシステムに頼っている一強の前で、検索アルゴリズムが変更されるたびに為すすべもなく、阿鼻叫喚の巷と化しています。 無料提供されてきた翻訳APIが有料化になったこともありました。 一部の国ではGmailの有料化。 もうある意味「神」ですね。生かされているので何も言えない。 検索エンジンの初期から一貫して「競合を圧倒したサービスを無料提供して、ライバルを撤退もしくは吸収したうえで市場を独占して、十分なアドバンテージができたところで有料化」という完璧なビジネスモデル。 なんかgifやmp3と似てるんですけどね。 世界中を敵にまわして事実上敗北してしまったUNISYS社らとの大きな違いは、企業として巨大化するまでじっくり待ったのと、エンドユーザからは徴収しないという方針でしょうか。 その気になれば規約やアルコリズムをちょいちょいと変更して、自社に都合の悪い情報を抹消する事なんて簡単なわけですし。 スマホは現在Apple（iPhone）が対抗していますが、勢いがなくなってしまったら次はAndroidですよね。 Androidに乗っかっている日本企業、大丈夫でしょうか。 Gma […]
- OCNのPOP・SMTPメール設定をBecky!にする方法
プロバイダから支給されているメールアドレスはほとんど使っていないのですが、OCNから【再度のご案内】【重要】と、えげつないメールが来ていたので目を通してみると、本当に重要な内容でした。 ＯＣＮではセキュリティ強化のため、 ２０１９年１０月１日以降順次、ＯＣＮメールをメールソフトでご利用いただく際、推奨設定以外では送受信(ＰＯＰ／ＳＭＴＰ)できないように変更いたします。 最近では受信メールにPOPを使う人は少ないのかもしれませんが、私はPOP派で、50以上のメールアカウント全てをPOPで設定しています。 自サーバにおいては何年か前にサブミッションポートの運用に切り替えましたが、OCNのメール設定は放置したままでした。 メールクライアントは以下のような理由からBecky!をいまだに使っています。 動作が軽快 複数アカウントの管理がしやすい データのインポート・エクスポート・バックアップが簡単で確実 過去にパソコンを入れ替えるたびにデータを引き継いできたため、受信箱には1999年のメールもいまだに残っています。 POPでの受信に加えてBecky!を使っている人となると限られてくるため、OCNの公式サイトはもとよりネット上を調べてもなかなか情報を得られませんでした。 2019年10月以降もBecky! Internet MailでOCNのメールをPOP・SMTPで送受信するポイントをまとめておきます。 この記事の対象となる方 OCNのメールをPOP・SMTPで使用されている方 メールクライアントにBecky!を使用されている方 OCNのPOP・SMTPメール設定をBecky!にする方法 OCN公式サイトによりますと、POP・SMTPの設定は以下のようにする必要があるそうです。 受信メールサーバー（POP3） pop.ocn.ne.jp と入力 ポート番号 995 と入力 SSL 使用する ユーザー名 メールアドレスをすべて入力 送信メールサーバー（SMTP） smtp.ocn.ne.jp と入力 ポート番号 465 と入力 SSL 使用する 認証 使用する ユーザー名 メールアドレスをすべて入力 Becky!「メールボックスの設定」を表示します 複数のメールアカウントを設定している場合には、該当のプロファイルを選択します。 Becky!基本設定の変更箇所 POP3サーバー […]
- WordPressテーマXeory Extensionで同名のid属性が出力されるのを修整する
WordPress用のテーマXeory Extensionでトップページ表示用のfront-page.phpが、同じid属性の値（id=”front-contents-1″とid=”front-service-1″をそれぞれ複数）を持つ要素を出力してしまっているのを修正する方法。
- WordPressリダイレクトプラグインで日本語を扱えるように修正
WordPressに301リダイレクトを設定するSimple 301 Redirectsというプラグインを導入しました。 PukiWikiで運用していた旧コンテンツをWordPressに引き継いだ後に、Google Search Consoleのクロールエラー対策＆SEO対策です。 PukiWikiからのデータ移行については下記の記事をご覧ください。 https://www.ii-sys.jp/notes/716 WordPress用プラグイン Simple 301 Redirects 必須WordPress用プラグイン Simple 301 Redirects Download WordPress公式サイト Simple 301 Redirectsというプラグインですが、phpファイル1つだけで構成されていて、管理画面もURLを設定するだけという名前の通り非常にシンプルです。 Google Search Consoleでクロールエラーが出ているURLをコピーしてRequest欄に貼り付け、リダイレクト先のURLをDestination欄に貼り付けて「変更を保存」ボタンをクリック。 しかし挙動を確認するまでもなく、Request欄に貼り付けたはずのURLが一部消えてしまいます。 どうやらURLエンコードされている部分が消失してしまっているようです。 ソースコードを追いかけてみると、保存する前にWordPressの関数sanitize_text_fieldが呼ばれていました。 WordPress関数リファレンスを見ると、 オクテット（’%’ に続く 2 桁の 16 進数）を除去します。 と明記されています。 これは日本語を含むURLの場合は致命的で、それ以外にも「/」を「%2F」にエンコードするような仕様でも困ったことになります。 プラグイン「Simple 301 Redirects」のカスタマイズ セキュリティ的なリスクを承知の上で、wp-simple-301-redirects.phpの188行目と189行目にあるsanitize_text_field関数を削除しました。 wp-simple-301-redirects.php 変更前 for($i = 0; $i < sizeof($data[‘request’]); ++$i) { $request = […]
- FreeBSDのディスク容量を拡張する（ConoHa VPS）
ConoHa VPSでサーバーOSにFreeBSDを使っている場合のパーティション拡張方法です。
- フレッツ光を使っている人はウイルス対策ソフトを買う前に確認
スタートアップツールを導入しないでセキュリティソフトだけをインストールするNTT関係者からの情報。ウイルス対策ソフトを購入するまえにフレッツ光の無料ライセンスを確認しないともったいない。
- WordPressをお名前.comのレンタルサーバーRSプランに引っ越しをする際の注意点
お名前.comのコントロールパネルからMySQLファイルをインポートしようとするとエラーが発生した際の解決方法。WordPressのファイル転送はFileZilla（SFTP）を使って問題なく完了。
- Google AdSenseで広告が表示されたりされなかったり
ページ内に複数の広告がある場合には、広告コードの1行目にある<script>～</script>は1回で良いそうです。 ページ上に複数の広告コードがある場合、各広告ユニットに <script async src=”//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js”></script> を含める必要がありますか？ 非同期タグでしたので何も考えずに最後の方（</body>直前）に書いたのですが、どうやらそれが原因で広告が表示されたりされなかったりしていました。 プラグイン等の外部ファイルにAdSense表示部分が書かれている場合には、非同期での読み込みが間に合って表示されるようで、インラインで書かれている場合だけが不安定でした。 Nginx（Webサーバ）のFastCGI（キャッシュ）も影響していたようで、気が付くまでに時間がかかってしまいました。 <head>～</head>の間に記述して安定しました。 <head> ・ ・ ・ <script src=”https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js”></script> <script async src=”//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js”></script> </head> ・ ・ ・ <ins class=”adsbygoogle” data-ad-client=”ca-pub-XXXXXXXXXXXXXXXX” data-ad-slot=”XXXXXXXXXX”></ins> <script> (adsbygoogle = window.adsbygoogle || []).push({}); </script>
- VMware Workstation Player 仮想マシンの複製【簡単3ステップ】
VMware Playerでテスト環境用に構築した仮想マシンを複製しておきたいと思いネットで調べたところ、なんだか少し面倒くさそうに書いてある記事が多かったのですが、3ステップの簡単操作で出来ましたのでメモしておきます。 VMware仮想マシンの複製【3ステップ】 【ステップ1】ワーキングディレクトリ（ゲストOSフォルダ）の複製 VMware Playerは終了しておきます。 ゲストOSがサスペンド状態であれば、その作業状態のまま複製されますが、ネットワーク等の初期化のために後で再起動する必要があります。なるべくゲストOSはパワーオフの状態にしておいたほうが良いです。 【ステップ2】.vmxファイルのdisplayNameを変更 コピーしたフォルダの中にある拡張子がvmxのファイルをテキストエディタで開きます。 この作業をしないでも問題ありませんが、同じ仮想マシン名が複数あると自分自身で区別がつかなくなりますので末尾に数字を足す等の変更をしておきます。 【ステップ3】VMware Playerで仮想マシンを開く 新しく作成したフォルダにある.vmxファイルを選択します。 VMware Workstation Player上での各種OS動作報告 ichmyさんの「VMwareで遊ぼうのこーなー」というコンテンツがおすすめです。