Acenumber Technical Issues – ページ 2

独自ドメインのgithubページをHTTPS化する

以前はホームページを持つのはなかなか難儀な話でしたが、インターネットサービスの充実した頃日ではホームページを保有するサービスが提供されるのは無料でさえ枚挙に暇が有りません。中にもITの専門家を中心に近年人気を博しているのが githubページ でしょう。先日Microsoft社が買収して話題になった github 提供のサービスです。

Githubマークロゴ4ステッカー

GitHub上の所謂ホームページ

githubが本来提供するのはバージョン管理のクラウドサービスですが、基本的にはテキストファイルのプログラムソースのバージョン管理としては、ホームページを記述するための言語、 HTML でも変わりありません。するとgithubに預けたオンライン上のhtmlファイルに於いては、後はWebサーバーだけ宛がってやればブラウザで閲覧可能となり、立派なホームページの一丁上がり、と言った塩梅です。

無料での提供ではリポジトリが公開必須となりますので、ソースは誰でも閲覧可能になる、と言う制限付きですが、基本的にはソースは誰でも見られる静的なホームページでは問題にする迄もないでしょう。裏技と迄は行きませんが、ローカルリポジトリにCMS的プログラムを以て静的ページを構築し、其れをgithubリポジトリにpushすれば動的サイトの公開も可能の理屈となります。勿論、非公開が可能な有料サービスも検討する価値はあるものです。

MacBook Pro2016のTime Machine導入記

2016年々末に入手した Macbook Pro 2016 Late 13インチも既に一年半を閲しますが愈々役立ち特に iPhoneアプリ作成に於いては無くてはならぬツールとして活躍してくれています。

必然となったmacOSのアップグレード

処で一週間程前、日本時間の2018年6月5日早朝に催されたWWDC2018では時期macOSたる Mojave（モハベ）が紹介されましたが、現行のmacOS High Sierra にさえアップデートせず、入手以降 Sierra のまま過ごして来ました。しかし遂にアップデートを余儀なくされる事態が惹起されました。 XcodeがmacOSのアップデートなしには最新のバージョンへのアップデートが不能となってのです。

macOS High Sierra無料アップグレードの案内とApp StoreにSierraでは互換性のないと明示されるXcode.9.3

しかも手元の検証用のiPhoneは最新のiOS.11.3へとアップデートして仕舞えば、古いバージョンのXcodeからは実機転送が不能となりました。なかなか、セキュリティー上芳しからぬ評判のあったとはいえ、もう充分時間も経ち問題も低減しているでしょう、 macOSアップデートに如くはなし、と実行を目論むに当たり、若しやの際に備えて充分なバックアップ体制を用意せんものと、 Time Machineの導入に至ったのでした。

本記事は実際にMacBook Pro 2016モデルにTime Machineを導入した 2018年4月18日から2018年5月6日の経緯を、孰れまた導入の機会もあろうことを鑑み、備忘録として書き残し、シェアするものです。

特定のページのときのみ外部JavaScriptファイルをJavaScriptファイルから読み込む

特定のページでのみ外部JavaScriptフィイルを読み込ませたい、と言う要請は、 WordPressなどではfunctions.phpを用いて実装するのは最早お馴染みの手法である様に、割と頻繁に受けるものです。

初めてのJavaScript 第3版

稼働中システムの追加要請

処が諸事情に因り、例えば企業などでは一旦導入したシステムは使い続けるのが通常ですから、往往にして融通の効かない古い独自のCMS上で此れを実現しなければならない場面があります。具体的には各々ページに読み込みファイルが書き込んであって、一括管理できない、と言う形式の上ではなかなか実装が難儀だったりする訳です。その様なCMSのシステム上でソースを読んで一括管理できそうなファイルを見付けて、例えばPHPに於いては $_SERVER など環境変数で場合分けしようとしてもヘッダー部分にのみ反映されるファイルだったりすることもあるでしょう。

手元の事例では幾ら新規に必要な外部JavaScriptファイルの読み込みに成功しても、機能しないのに首を捻って、更に突っ込んで見てみると、其のJavaScriptファイルはjQueryを必要としているのに、当のjQueryファイルがフッター部分での読み込みになっていたりします。必要なjQueryが読み込まれていないのですから機能する筈もありません。しかもそのjQueryファイルを読み込むのは各ファイルにインクルードの旨、直書きされる、拡張子 .html のHTMLファイルで .htaccess を書き換えて拡張子の制限を広げたりするのも要らぬオーバーヘッドが発生しそうですし、全読み込み元ファイルをPHPファイルなどにするのも工数が嵩みますし、成る可くなら他に影響を与えたくないための当初取ろうとした手法であれば、本末転倒です。するとフッターファイル内で場合分け操作ができない状況も鑑みねばなりません。

Swiftで行列を鑑みた多次元配列を宣言、生成する

プログラムに配列は欠かせず、 iPhoneアプリのゲーム開発に於いても其れは変わらず、併せてゲーム内のデータ保持に行列を用いたいとなれば必須事項ですが、型に厳格な言語 Swift 上の話でもあれば、実行しようと思うもなかなかに難儀で、エラーを頻発させるも諦める訳にも行かず、何とか形になった経緯を本記事に記しおくものです。

アプリあちこち食堂（仮題）に於ける多次元配列を可視化した開発画面

求める2次元配列の形

自らの策定した仕様の要請に依れば手始めに以下の如き2次元の行列を鑑みた Bool型の2次元配列を生成したくあります。

10000000000001
10000000000001
10000000000001
10000000000001
10000000000001
10000000000001
10000000000001
10000000000001
10000000000001
10000000000001
11111111111111

処が先ず以て、 Xcode は此の宣言さえ許してくれません。下手に宣言すればビルドは通るものの、走らせると配列forループでお馴染みのエラー Fatal error: Index out of range が吐き出されて止まってしまいます。

どうもネットを繰るとteratailに以下の様な遣り取りが見付かり…

NTTドコモのdポイントとdカード

現在でも総務省から突き上げられている様に顧客への還元のない姿勢から少し前は随分と酷評していたドコモのサービスですが、故意に分かり難く設定されたとも思える各プランは其の儘なるも、どうも金融・決済サービスの一環として、 dポイント と結び付けられた dカード の登場と共に風向きが変わって来た様に感じられます。

ドコモ社のiTunesギフトカード割引販売お知らせメールに添付された画像

ドコモdカードへの転換

先日は連休中、2018年5月2日にNTTドコモ社から届いたお知らせのメールの App Store ＆ iTunesギフトカード初回限定10％OFF！さらに2％dポイントプレゼント はiTunesストアに補充の必要を感じていた折も折、なかなかお得な内容に感じられれば、渡りに船よと、受け取ったメールの内容をiPhoneで確認した其の場、寝そべった其の姿勢で iTunesギフトカード10000円分を購入、其の儘App Storeに登録して思ったのは、思い付いた儘、寝た儘、此の様に買い物が出来るのでは小売が厳しいと言われるのも無理はない、と言う世評が肯んぜられるものでした。

dカードの前身とも考えられる iDカード は明確に失敗だと断じて宜しいかと考えます。何となればドコモが懸命に売り込んだに関わらず遂には普及には至らなかったからで、具体的な例としては此の春にリニューアルされたドコモの契約者をランク付ける dポイントクラブ の ステージ の最上位決定の条件からはiDカード契約が外されています。 iDカードはキャッシュを燃やす様な経営との批判を下方修正を余儀なくされた株主総会で受けた際、インターネット通販で失敗し、コンテンツ・メディア事業でも失敗し、共に失敗した当時、ドコモが本業以外の事業多角化の一つとした 金融・決済 事業の中核を担うサービスでしたが矢張りドコモの思惑通りには運ばなかった訳です。本ブログにも遡ること7年、2011年の12月24日の記事にドコモの金融、決済サービスを酷評しています。

スマホ画面でのみタブで表組みの縦列を切り替えるJavaScript

現在一般的なレスポンシブWebデザインでは、基本的にパソコン画面と同様のHTMLソースをスマホ画面でも表示させます。其の際、スタイルシートを駆使しますが、一般的に縦長画面で閲覧されるスマホ画面では工夫が必要になります。

画面縦長変化に於ける工夫

パソコン画面で横に広く表示させていたコンテンツもスマホ画面では縦長にならざるを得ないため、例えば横に並列して並べていたコンテンツを故意にカラム落ちさせ、縦表示させるテクニックはごくごく基本的な手法です。

CSS設計完全ガイド～詳細解説＋実践的モジュール集

処がコンテンツによっては其の基本的な手法が適切でない場合もあります。其の様なケースではスマホ画面の場合にはタブ切り替えは屡々採用されるテクニックです。ネットで検索しても有用な情報が多く見付けられます。例えばQiitaにも2017年8月6日付けで以下の情報が寄せられています。

jQueryとCSSでシンプルなタブ切り替え

記載されるコードは散見される同様な情報が上手くまとめられたように、簡便さに加え汎用性も考慮され書かれています。基本的には切り替えボタン用のタブを構成するタグと、切り替えられるコンテンツを表示させるタグが同数用意され、初期に表示される以外のコンテンツを含むタグには非表示属性、 display: none; がスタイルシートで付与されており、クリックされたタブと同じ、先頭から数えた数のコンテンツタグ以外に非表示属性が与えられるように jQuery で処理される、当該機能の定番的な構成が取られています。

TABLEタグの場合

レスポンシブWebデザインで扱い難い表組み（tableタグ）データ

処でレスポンシブWebデザインで扱い難いデータに表組み（tableタグ）があります。一般的にパソコンの広い画面では一覧性に富み、表組みも全体を表示させられる余裕がありますが…

Xcode開発に於けるfloat型やdouble型の値の余剰

ゲームの代表的存在でもある任天堂社のスーパーマリオブラザーズを始めとして、特にレトロな2D横スクロールアクションゲームでは無限スクロールは必須の機能です。本ブログにも横スクロールの実装について記事を幾つか配信しもしました。

SpriteKitで地面を無限スクロールする（2016年6月22日）
無限スクロールのupdateメソッドに依る実装（2016年7月6日）

2DゲームフレームワークSpriteKit

ゲームうさ犬が行く開発中画面

SpriteKit iPhone2Dゲームプログラミング

XcodeでiPhoneアプリでも2Dゲームを開発するに当たって有用なのがアップル社謹製フレームワーク SpriteKit です。このフレームワークには様々なゲーム実装に関する機能が搭載されていますが、座標もその一つです。 SpriteKitの座標に関してはUIViewと座標系が異なるため、困惑する場合も多いのですが2D画面を構成するには欠かせません。

問題惹起

手元の開発iPhoneゲームでいつものようにSpriteKitの提供する座標系 SKView を用いている途中、気付いた点がありました。

WordPressのアイキャッチ画像は英語でfeatured image

以前に良く見掛けた、 タイトルで言い切った 、的なエントリーです。知ってる向きには何を今更、と言った処にて、以下読む必要はありません。

featured image アイキャッチ画像

結論

上にリンクを貼り置いた Standing on the Shoulder of Linus ブログの2010年4月8日の記事では、 WordPressのバージョン2.9に於いて 投稿サムネイル機能 が追加され、バージョンが3.0に上がると其れは Featured Image と命名されたそうで、其の和訳こそ今WordPressユーザーに一般に流通する アイキャッチ画像 なのでしたが、日本語の決まっていないベータ版で訳が割り振られたそうなのです。

浜松市鴨江寺仁王門阿吽像

恥ずかしながら此の事実に気付かされたのは…

CSSのみでフォントは不透過でその背景色のみを乗算でそのまた背景の画像に重ねる

仕上がりイメージは斯うです。

最終出力結果

先ずは最下層に背景画像があります。上の例では神社の写真が其れに当たります。其の上に帯がのり、其の上、左方に白のアイコン、右方に白のフォント文字が乗ります。アイコンとフォント文字を包含した帯は元は紺色ですが、乗算で其のまた背景画像に重ねられており、唯に単色の不透過色の場合とは異なる深みを感じさせるイメージを醸し出しています。此れを皆、CSSのみで実現したく試行錯誤しました。

初手

参考のために唯に単色の不透過の紺色の帯の場合を下に貼り置きましょう。随分イメージが異なるのがはっきりします。

EdgeでFlexboxの高さ指定の単位にパーセントが使えない問題

Webデザインとレスポンシブの現況

CSS3 から追加されたプロパティ Flexbox は其のレイアウトの柔軟さ故に現在主流の レスポンシブ （Webデザイン）と相性が良く、行列のグリッド配置を扱わねばならない場合、 Floatプロパティに代わり頻繁に用いられるようになりました。端末幅に応じて横5つ並びのアイテムが 4つ、3つと減じても見た目に違和感は抱かれない塩梅となっています。

Microsoft Windows 10 Pro 32bit/64bit 日本語版

処でレスポンシブに於いてはプロパティの値の単位に百分率も頻繁に用いられる処です。従来PCでの閲覧に限られて考えられていたデザインに於いてはサイズは固定で主に単位としてピクセルが用いられていましたが、閲覧者の環境に応じて多くのサイズが考えられるデバイスの横幅にピタリと合わせる為には其れでは間に合わずパーセンテージの採用されるに至りました。

また主流の座からは滑り落ちたものの Microsoft社製のブラウザもまだまだ残念ながら健在です。世の中のデファクトスタンダードにも総意とも言える標準にも従わぬ、 Windows独占時代の残滓の如き路線たるオレオレ詐欺ならぬオレオレ仕様から忌み嫌われたブラウザはインターネットエクスプローラ（IE）から今では Edge（エッジ）へと装いを改められていますが、其の中身はどうでしょうか。

今回、Edgeに特有に発生するFlexboxプロパティでパーセンテージを単位に使った場合に問題が発生するのを端無くも発見しましたので本記事に共有するものです。