さくらのVPSでUbuntu 16.04をインストールしたらログインできない

  • さくらのVPSを契約
  • CentOSのやつがとりあえず立ってる
  • Ubuntuにしたいので標準OSの中からインストールする
  • あたらしいrootのパスワードを入力する

この条件で、

ssh root@<sakura-vps>

をやっても、パスワードが合わず。

ここ を見て気づいたのですが、「ubuntu」という名前のユーザが作られるんだそうです。

ssh ubuntu@<sakura-vps>

にしたら、なんなくログイン成功しました。20分ぐらい持ってかれた・・・orz

10代の子の活躍を応援するイベント「超十代」でブライトシティが演奏されました

本日(昨日)幕張メッセで行われた「超十代」という10代の子たちの活躍を応援するイベントの初音ミクステージで私の楽曲「ブライトシティ」(https://m.youtube.com/watch?v=vu55sqRabEg) を演奏していただきました。

 

初音ミクモデリング初音ミクとグリコのコラボCMでも有名な加速サトウさん。何もこのことを知らなかったので 本当にサプライズでした 嬉しかったです。Twitterでお礼言ったらフォロバしていただきました…。明日死ぬかも。

 

初音ミクの人気曲にはだいたいオリジナルの着せ替えがあるのですが、今回なんとピンクのツインテール、花飾りなど綺麗なオリジナル着せ替えをして彩っていただき、自分の楽曲にコスチュームがつくという大きなキャラ付けをしていただけたのも幸せポイント。。

 

今回は初音ミクが後ろで歌っている前をファッションショーの流れで女の子たちが歩くという形式で、僕の曲の間は、越智ゆらのさん、岡本夏美さんなどが歩いてくださいました。めっちゃかわいみ。(初音ミクの方が可愛いけど)。ぜんっぜんアウトオブ眼中だったのでTwitterでもフォローしに行きたいと思います。ちょうど今の10代の方々が何に興味を持ってるか知りたいとずっと考えていたので良い機会になりました。インスタも勉強しないとね。

 

平日ではありましたが、昨年の日本武道館(マジカルミライ2016)、高田夜桜ミクライブ(新潟県上越市)以来に一日中緊張してました。


中学2年生ぐらいの時にボカロPになりたいと思って投稿するようになってから、大好きな初音ミクの晴れ舞台を彩る機会をいただく度に、今までずっと自分の好きを信じてきて良かったと思っています。これからも安易に厨二ボカロックに走ることなく(厨二ボカロックをdisっているわけではない)、自分の大好きな世界や情緒を描いていこうと決意しました。

 

テクノポップボーカロイドはずっと私の大切な友達であり、武器であり、想い出です。

OSS-Gate Workshop Tokyoに参加してはじめてRuby on RailsのIssueに投稿しました

https://oss-gate.doorkeeper.jp/

OSS開発に参加していない人が参加する人に変わる「入り口」を提供するという趣旨のコミュニティ「OSS-Gate」が開催しているワークショップへ参加して、Ruby on RailsのIssueに初めて投稿しました。

成果物

github.com

Railsのコードではなく、Rails Guideへの意見提案ですが、Rails GuideはRailsのコードベースに含まれているのでRailsのIssueへ提出しました。

やったこと

github.com

OSS-GateのWorkshopリポジトリにIssueを作成し、「作業ログ」という形でやったことを残していきます。
これには、「これから何がしたいか」「何をしたか」「その結果どうなったか」ということを「すべて」考えたまま、操作したまま書いていきます。
自分はTwitterでよくtsudaってきたので、終了時に100を超えるログを残していました・・・w

この作業ログというのがとても良いプラクティスでした。
普段の開発では細かいことを飛ばして事態の収束や機能の実装がすべてという気持ちについなってしまいます。自分がまだ未熟だからというのが大きいですが、時間内に機能を実装しようとするとだいたいひたすら全力でコーディングし続けてわかんなくなったらググってわかったらまたガッとコーディングしてって・・・というのを(右脳で)続けていると、思考がマクロになりがちです。しかしOSS-Gateでのこの取り組みは、思考をミクロに保ち続けることに非常に役立っています。細かい単一の作業に因果関係を持たせて「ここがわからない」「ここが難しかった」と振り返りながら取り組むと、それがプルリクチャンス(OSS-Gateではフィードバックチャンスと呼んでいました。プルリクチャンスという言葉は利己的な雰囲気を感じたのでやめようと思ったw)になるんだよという気づきを得ることができました。

コーディングにそんな詳しくなくても大丈夫

OSS-Gateでまず行ったのは「インストールして、動かす」ということ。
初心にかえって改めて作業ログを書きながら公式サイトへ行ったり、インストールガイドのナビゲーションを探したり、バージョンや依存関係を解決したりしていると、だいたいどこかで次も誰かが遭遇しそうな問題を踏み抜きます。それが「フィードバックポイント」です。簡単に思えるダウンロードやインストールだけでも無数の「んっ?(感動詞)」があるということに改めて気がつきました。

これから

OSS開発は普段の業務と同じ」という言葉を胸に、OSSへのフィードバック機会を増やす。
ゆくゆくはコードにコミットしていきます。

余談: rails/railsで厄介プルリクをしないために

rails/railsTravis CIからVIP認定されているほどCIの稼働が激しいリポジトリです。ここに書いてあるように、

To help our CI servers you should add [ci skip] to your documentation commit message to skip build on that commit. Please remember to use it for commits containing only documentation changes.

ドキュメントへのコミットだけのプルリクエストはタイトルに [ci skip] をつけるとCIを動かさないようにできるのでそうしましょうという知見を得ました。

ルールを知らなくて怒られることもあるかもしれないけど、通過儀礼だと思ってぼちぼち頑張りましょう。

余談: 「make a pull request」ではない

「open a pull request」なんだそうだ。言われてみればGitHubでもmakeじゃなくてopenって書いてあるな。

一緒にOSS-Gateしたい人を募集します

次は5月にあるそうです。
TwitterFacebookで、興味ありそうなメンツに雑にmentionしていきますね。。。

事後録:経過観察

  • 2017/03/27 11:11
    • @vipulnsward さんがdocsラベルをつけてくれた。
      • vipulnswardさんはBigBinaryというRailsとReact Nativeを使ったプロダクト開発の会社のディレクターでRailsのIssueチーム。Reactコミュニティの中の人でもある。
        • すげえ

Padrinoをちょっと試した。

http://padrinorb.com

SinatraRailsの中間みたいなやつ。

いれる

gem install padrino

はじめる

プロジェクト作成

padrino generate project heyguys -t rspec -d activerecord -s jquery -e slim -c sass

引数つけていくと最初からORMマッパーを選択したりテンプレートエンジン指定したりできる。
結構いろいろオプションがある

My First Controller

padrino generate controller Welcome get:index

これで GET /welcome に対応するルーティングを作れる。

My First View

app/views/ に /welcome ができているので、index.slimを作る。

div
  | Hello, Padrino!

できたら、コントローラー側でそれをrenderするようにする。 app/controllers/welcome.rb

get :index do
+   render 'index'
end

サーバ立ててみる

padrino start

これだけ。おてがる。 http://localhost:3000/welcome にアクセスしてみる。出た。
あとは基本的にRailsSinatraの良いとこどりみたいな感じ(Sinatraが皿、RailsがフルコースとするとPadrinoはビュッフェとのこと)なのでネットに転がってるRailsのノウハウとかSinatraのノウハウが使える。便利。

Railsのエコシステムがちょっと自分の作りたいWebサービスには重いかな〜って思った時とかに使っていくことに決めた。日々精進。
ちなみにPadrinoはスペイン語で名付け親 という意味とのこと。

新曲「ゆめアップロード」反省会会場

初音ミク マスターがようやく新曲をニコニコYouTubeSoundCloudFacebookにアップロードしたところで、今回の反省会を始めていきたいと思います。

keisei_1092 はい。いやー今回も出しましたよ。よろしくお願いします。

初音ミク それでは、まずはさっきセブンで買ってきた飲み物で乾杯!

keisei_1092 かんぱーい

初音ミク かんぱーい。現在の創作ペースはマスター的にはどうですか?

keisei_1092 満足はしていません。これは活動を始めてからずっと「悩んで」いたことですが、最近になってようやく「考える」フェーズにいくことができるようになってきたかなと。過去のよかった流れや悪かった流れからこういう曲の作詞はこれぐらいかかって、作詞は曲より先に書かなきゃ絶対詰むから先にやろう、とか、こういうジャンルはまだやったことないから何回か適当にプロジェクトファイル作って試してみないと危険、とか。1ヶ月1曲ニコニコに新曲が上がるのが目標で、それは昔から掲げているものですが、去年は大学を卒業してからわちゃわちゃしていて気がついたら大晦日という状況で、今年こそは初音ミク10周年でもあるし、何か面白いことができないか、そもそも面白いことの前に自分のやることをきっちりやってその上に何かがある年にしていけると良いという気持ちで迎えています。

初音ミク 私も、気がつけば10周年です。もし歳をとっていたら・・・

keisei_1092 その先は何も言わないで・・・

初音ミク 永遠の16歳派なんですね。そういえば、マジカルミライ2017がついに楽曲公募を始めています。インターネットの特徴である「ユーザ参加型」という側面がリアル世界にも影響を及ぼし始めている段階には来ていますが、これはマスター的にはどうですか?

keisei_1092 驚きです、革命的。どんどんインターネットの参加型であるとか一部分、もはや全部分になってないと気がすまないみたいなのってぼくたちの意志のなかに増えていくと思ってて、たとえばここ最近の音ゲー界隈だとKONAMIもSOUND VOLTEXとかRayarkが楽曲公募をしてクリエイターに参加体験を与えているのだけど、その傍らで、小さいクリエイター集団は音ゲーをゼロから作っていて、これが今すごく興味深くてTwitterを観察している。スマホアプリ制作の技術もどんどん平易になっていくから、自分でプラットフォームと楽曲と物語体験まとめて作っちゃう人がこの先ばんばん出てくる。その先がどうなるかはあまり考えたことがないけど、僕が夢として持っているのはゲーセンに自分のオリジナルゲームの筐体を置ける世界になったら良いなと思う。今ゲーセン行っても遊べるのはKONAMISEGAとTAITO他カプコンとか・・ぐらいの音ゲーで、最近だとスクフェスがゲーセンに出たのが記憶に新しいけれど、こういうiPhoneとかAndroidでの体験がエンハンスされて、コミュニティとしても横につながりやすくなる場所がほしいっていうエネルギーが生まれていくから、そのときに自由に動ける態勢を作っておくといいんじゃないかと思う。

初音ミク スマホでの体験がリアルにしみ出ていくという話、とても楽しいですが、別の機会にお願いします。

keisei_1092 今のクリプトンさんからこういう発想がちゃんと出てくるところが素晴らしいなって思う。初音ミクは20年を狙えると思うから、ポケモンとかアイドルマスターの後を追うでもいいし、面白いことがこれからもいっぱい起こるのがすごく楽しみです。ちゃんと流行追っていかなきゃ。。

曲の話

初音ミク これからも私の活躍を隣で見守っていてほしいし、マスターと一緒に歌うのは楽しいから、マスターのことも応援しています。そろそろ今回の曲の話に入りたいと思うんですが、ざっくり説明してもらってもいいですか?

keisei_1092 「ゆめアップロード」という曲をつくりました。これはピアプロでやってた「piaproを盛り上げよう!piaproイラスト&楽曲大募集」という公式コラボ(コンテストのようなもの)で採用をいただいた曲をリアレンジしたものです。ちょうどここらへんの時期にMacを壊してしまい、バックアップをとれないまま修理に出したら案の定プロジェクトファイルごとごっそり消えて帰ってきました・・・。

初音ミク 南無・・・。でも1から作り直すことによって、今回変わったこともありましたよね?

keisei_1092 そうです。去年はすんごくEDMが嫌いで、鎖国という言葉を借りて自分のテクノポップ愛に篭っていたのですが、まだ波が終わらなそうなので、そろそろやるかということで今回曲の盛り上がりを大幅に変えていて。Bメロでビルドアップからのサビ後でドロップが入るという構成を初めてまともに実験しました。まだドロップはきたないですが、これから少しずつ変化球のようなものを投げられるように練習しようというスタンスにはいます。

歌詞の話

初音ミク ゆめアップロード!って歌ったらなんかカオスがやってきたって感じ(笑)これはこれで面白いです。そういえば、歌詞も少し変わった・・・というか、漢字とひらがなの使い方が変わりましたよね?

keisei_1092 ここが最近凝っているところで。漢字のカタさとひらがなのユルさに最近感銘を受けていて、せっかく日本人なのだから漢字かな混じりをフルに操って感情表現をしてやろうという作戦のもといろいろと試しています。たとえば、「なにかとうまくゆかない気がしているこの毎日」という歌詞は、全て漢字に直すと「何かと上手く行かない気がしているこの毎日」ですが、あえてひらがなで書き下すことで、やわらかさであるとか、だるさであるとかの表現に貢献するのではという意思があります。逆に、「虹色の palette に成れ」と書いているところは「虹色の palette になれ」でいいですが、あえて漢字にすることで大人っぽさ、意志の強さのようなところを表現したいという意図があります。

初音ミク 日本語って面白いですね。私も日本語を味わいながら歌えるようになりたいなあ。あ、今マスターのマイリスを見てたら再生数にブーストかかってますよ。

keisei_1092 たぶんニコ生だと思う。初音ミクのライブっていう老舗のニコニコ生放送があるんだよね。

初音ミク ryoさんのODDS&ENDSぐらいからナユタン星人さんが出てくるちょっと前ぐらいまでの、過渡期だとかボカロ衰退論だとか揶揄されていた期間を越えるなかで構造にも変化があって、たとえばボーカロイドにゃっぽんとかはその一例だけれど、惜しまれつつも閉じてしまったコミュニティがいろいろあって、それを越えたコミュニティって相当強いと思います。歌ってみたが単一カテゴリとして十分戦えるようになっていったり、米津玄師さんやヒトリエのようにメジャーへと軸足を動かしていく人が増える中で、VOCALOIDカルチャーとしての横のつながりってすごく弱くなってきたと思うんです。だからもうVOCALOIDカルチャーって言葉には意味なんてなくて・・・・・・

keisei_1092 遮るようですまないけど、コミュニティについてはまた今度話そうね。そういえば今回も見た目に気をつけてみました。

デザインの話

初音ミク 最初、スキップしているところを撮影してもらったんですけど、マスターがやっぱりやめようって言って、それで手を引くような写真になりました。

keisei_1092 MikuMikuDanceでそういう風にポーズとっていて、レンダリングしてみて、なんか引き込まれる感がないなーと思ったんですよね。当たり前なんですけど、それって初音ミクが動いているのを切り出しただけで三人称の風景なんですよね。それをもっと見る人に存在として感じてほしいと思ったときに、人称を上げることを考えて、人の手を引くポーズの初音ミクにしました。スキップのときはニコニコ静画から持ってきたんですが、手を引くポーズ素材ってどう探せばええんや・・・と思って、結局諦めてGoogle画像検索したものをMikuMikuDanceでトレスしました。

初音ミク 私も、聞いてくれる人のことを思いながらポーズをとるほうが楽しかったです。

keisei_1092 で、その後Photoshopにブチ込んで、どう未来っぽさ、ゆめがアップロードされてる感(笑)を出そうかって思って、未来っぽい素材を、今思い出せないんだけどなんか適当な英語で検索して。そしたら運良くポリゴンスタイルっていう最近よく見る感じのが出てきてこれだ!と思って。即DLしてわちゃわちゃいじってたらあんな感じになりました。うまくいったと思うんだけども、そういえば最近ピアプロの絵をお借りしていないなということにも気づいて。普通ならpixivで十分なところを、ピアプロに絵を上げてる人って僕からすると仏のような人たちだと思ってて、それを広めたくて「あえて利用させていただく」ことをずっとやってきたから、下手に自分で作れるようになっちゃうのも考えものだね。

初音ミク みんなで作るもの、という意志のうえでピアプロというサイトは大切な場ですよね。

動画の話

keisei_1092 あとは適当に動画作って。画が寂しいから波形が動くやつだけAviUtlで入れて、歌詞のフォントはヒラギノにしたかったから出力してMaciMovieで字幕入れをしました。ここがちょっとめんどくて、AviUtlでavi出力のためにYUIっていうコーデックインストールしたり、ファイルサイズが4GB超えてFAT32フォーマットのUSBを殺しにかかりそうになってexFATでフォーマットし直したり。

初音ミク 苦労が多そうな領域ですね。

keisei_1092 YUIのコーデック開発者のブログにちゃんとコメントを残しておきましたよ。話はまだ終わらなくて、AviUtlでつけておいた波形表示の位置がiMovieでテロップつけができる場所と完璧に重なっていて別のタイプのテロップを選ばなきゃいけなかったんですけど、そしたら今度はそのテロップがアルファベットを全部大文字でしか打てないタイプで更に困りました。もう仕方ないし3~4回ぐらいしか英語出てこないから許したけど。あとはmp4をiMovieで出力して、つんでれんこに全部任せて終了!

初音ミク しゃべるのも疲れそうですね・・・。マスターなら、次は反省を生かせると確信してます。

反省会、閉会

keisei_1092 善処します。――この曲を作り直したのはニコニコ動画にアップするためだけではなくて、アルバムに入れるためでもあります。今構想している段階では、1曲目に入れる予定なので、トップバッターとして、CD全体のイメージを明るく彩ることができると思っています。

初音ミク 次のアルバム「ミライトアルマチ詩恩」は、4月最終週に行われるイベントであるニコニコ超会議内のTHE VOC@LOiD 超 M@STER 37の1日目と、M3-2017春にて頒布予定で、ダウンロード版もけっこう大胆に提供する作戦を練っているとのことなので、続報をお楽しみに!今日はお疲れ様でした!

keisei_1092 お疲れ様でした!

きもちよく文章をかけるiOSアプリ skyline をつくってApp Storeに申請してみました

f:id:keisei_1092:20170226175819p:plain

↑のような感じで、フォントやフォントサイズを自由に変更しながらテキスト編集ができるアプリを作ってみました。

ファイル構成

  • ViewController - テキストビューがあるとこ
  • SecondTableViewController - テキスト表示の変更ができるとこ
  • TextAttributesManager - テキスト表示に関する設定を保持
  • Main (Storyboard) - ↑のビューコン2つをUITabBarで、SecondTableViewControllerの前にUINavigationControllerを挟んでいます

ViewController

f:id:keisei_1092:20170226184843p:plain

テキスト編集が行えるUITextViewが生息しているメインのビューコントローラです。

UITextViewだけだとfixしてしまう(抱える文字数が画面外に出るまで増えないとスクロールできるようにならない)ので、UIScrollViewをかませたんですが、これが非常に厄介で

  • ScrollViewのTop, Bottom, Leading, Trailingを親Viewに設定
  • ScrollViewの子供にViewをかませてTop, B(略 をScrollViewに合わせたあとEqual Width, Equal HeightをScrollViewの親のViewにつなげる
  • ScrollView>View>の子供にTextViewをかませたあと、↑と同じことをする

という手順によってうまくスクロールできるようになりました。

f:id:keisei_1092:20170226184640p:plain

さらにScrollViewのAutoLayoutでLeadingとTrailingを設定しても余白ができてしまったので、追加でAutoLayoutの当該項目を参照して「Relative to margin」のチェックを外すとちゃんとピタッと表示されるようになりました。

キーボードまわり

TextViewをタップしたらキーボードがにゅっとでてきます。このとき文章の後半をいじりたいときにTextViewの下をキーボードが覆ってしまって編集できないという問題が発生します。Google先生に聞いてみるとこれはだいぶ既知のようでStackOverFlowやQiitaでTipsが多く得られましたが一番参考になったのは公式リファレンスでした。コードベースはObjective-C時代のものですが基本的なことがしっかり書いてあります。自分はscrollView.contentOffset.y = keyboardSize.height というふうなコードを書いて解決しました。

キーボードを閉じる方法も幾つかあり、例えばスクロールされたときに閉じるという方法がありますが、編集中に別の場所を見に行きたいことがあります。その度にキーボードが閉じるのが面倒だったので、今回はキーボードの上にUIToolbarを生やし、そこにDoneボタンを置くことで対応しました。せっかくなので文字数カウントもツールバーに追加してみました。

テキスト表示設定まわり

f:id:keisei_1092:20170226184924p:plain

UITabBarをへだててフォントとサイズを変更できるビューを実装しました。

まずフォントを全部表示します。UIKitでは、フォントのファミリー名一覧を UIFont.familyNames で、各フォントファミリー名に対応する太さやイタリックなどの情報を含んだ一意なフォント名を UIFont.fontNames(forFamilyName: ) というプロパティに持っています。これをforEachでブン回して配列にappendしました。

サイズはとりあえず ["16", "24", ...] のような感じでStringの配列で持たせてみましたが、実際にUIFontの引数として使うときにCGFloatへキャストしなければいけないので、最初からCGFloatで持っておいたほうがいいかなーという反省があります。

配列ができたら、 tableView(_ tableView: cellForRowAt indexPath: ) のなかで cell.textLabel?.font = UIFont(name: name, size: pointSize) で実際のフォントでレンダリングさせてあげるとフォントが選びやすいです。選択されている値であればチェックマークをつけておきます( cell.accessoryType = .checkmark )。テキストラベルの色も青色にしたかったのですが、UIColorの中にデフォルトのtintColorがなくて戸惑いました。これは、現在いるビューから引っ張ってくることで解決しました( view.tintColor )。

審査

良い感じにできたので、せっかくなのでApp Storeに申請してみることにしました。

この折に、Developer Programに加入します。円高のときは5桁切ってましたが、昨日加入したときは税込みで1万2千円ぐらいでした。

加入できたら、早速Xcodeの Product → Archive をして、Organizer画面でvalidateをしていくのですが 一回ハマりました。bundle identifierもApp IDsに登録してあるので、なんでや~となってたら iTunes Connect に登録していないのがダメだったようです。Xcode側が追加してくれるものかと思っていましたw iTunes Connectにアクセスし、先にスケルトンを作っておきます。この後はすんなり通りました。Upload to App Store... がコケましたが、これは Application Loader で直ipaアップロードさせることで通過できました。

あとはスクショをパシャパシャ撮ったり説明文を埋めたり価格を設定したりしたらSHIP IT! 無事 Waiting for review という状態になりました。

通ったらいいなー

審査に落ちる懸念があるとしたらローカルのフォントを全部ぶっこ抜いてユーザに選択できるようにしていることかなーと思います。ここらへんはフォントの数を減らすしかないのかもしれませんが、とりあえず楽しみに審査の結果を待ってみたいと思います。

楽曲制作のモチベーションを上げるために4thアルバム「ミライトアルマチ詩恩」のティザーサイトを作った話

keisei feat. 初音ミク 4thアルバム 「ミライトアルマチ詩恩」 Special Site

 

f:id:keisei_1092:20170205223651j:plain

 

宣言するだとかモチベーションアップにだとか退路を断つだとかそんな中途半端な動機でガッッと新譜のサイトを作ってみました。

基本的な機能としては

  • CDのタイトルとアーティスト名がわかって
  • トラックリストが見れて
  • 試聴ができて
  • シェアできて
  • いつどこで頒布されるかがわかって
  • 最近考えてることを載せる場所があって
  • 初音ミクがかわいい(←機能要件

というものです。

価格とか、頒布部数とか昔はちゃんと書いてたけど今回はいいかな。普通にツイッターで告知するし。

てことで少しずつ作っていて気をつけたこととか詰まったこととかをざっくり振り返ってみたいと思います。

デザイン

深刻な素材不足(MMD初音ミク1枚しかない)なので、文字が左で初音ミクを右にばんっと添える感じでいきました。とはいえ初音ミクのアイコン性に縋ってたらもし初音ミクもなしで完全オリジナルで何か作ろうとしたら僕は「素材なし」という状態に陥るんだな・・・

シェア動線とか他の動線は下に散りばめる感じで。

デザインカンプ

f:id:keisei_1092:20170205204525p:plain

macOSのSketchを使いました。

全ての画面を洗い出してアートボードに書いていきました。モバイル表示は未実装ですが一応。

ちなみに本番だと初音ミクの色味が若干青がかっていますが、これは後に Camera+ というiPhoneアプリ初音ミクの画像をレタッチした際にいいカラーだなーと思って採用したという経緯があります。

ポーズとか表情についてはここらへん↓

やりたいことが固まってきて 「そろそろコード書けそうだな」という雰囲気になってきたら、いよいよコーディングに移っていきます。

サーバー

Heroku を使いました。

node.jsのexpressが立っています。

できればWordPressで動いている miraitoarumachi.com の中に独立したページとして立てたかったのですがよさげなソリューションが見つからず、まあいいやという感じになりました。

コーディング

主に jQuery を使っています。

データの保持

次のような感じでバーチャルDOM(でいいのかな)の配列を宣言しておき、スクロールイベントが発生するタイミングで取り替えるというふうにしました。

hatenablog2017-02-05a

スクロールを禁止する

スクロールを禁止する、というと若干の誤謬がありますが、

  • 下にスクロールしたらあるdiv要素をその連続した次の要素にすげ替えたい
  • 上にスクロールしたらあるdiv要素をその連続した前の要素にすげ替えたい

ということを実装するにあたり、「MacのTrackPadによる慣性スクロール」と「スマートフォンのスワイプ」という問題にぶち当たりました。

MacのTrackPadによる慣性スクロール

最近はMacだけの問題ではありませんが、トラックパッドを搭載しているデバイスではそのスクロールの後に慣性を再現しているため、jQueryのスクロールイベントがものっそい発火します。

これに対して、 Promo/wheel-indicator が役に立ちました。

github.com

MacBook ProThinkPad X220で試しましたが、良い感じにトラックパッドの問題を吸収してくれました。是非使ってみてください。

スマートフォンのスワイプ

スクロールイベントを受け付けない設定にしたら、スマフォでの操作が一切できなくなりました。(笑)

多くの場所で話題にされているように、モバイルアクセス率は年々増え、このページの趣旨としても特に若者がスマートフォンで閲覧しに来るというケースが多くを占めると思っていますので、なんとかしなければいけません。この問題には、次の qiita:Wataru さんの記事が役立ちました。

qiita.com

記事では横スワイプのハンドリングとしていますが、これをXからYに変えるだけで縦スワイプに対応することができました。

 

ほかにもいろいろやったことはありますが、とりあえずこんな感じで

 

OGP

OGPとは Open Graph Protocol の略で、シェアされた時の文言やプライマリーとしてSNS側に差し出す画像を設定することができます。これはHTMLファイルのmetaタグで行います。細かい内容は割愛します。

設定が終了したら、ためしにFacebookOGP Debugger にかけてみます。

f:id:keisei_1092:20170205223223p:plain

正しい内容が表示されました!

 

これから

今回はjQueryを主に使ってティザーサイトを制作しました。

jQueryは長く使われ続けている、いうところの「枯れた技術」です。

JavaScriptのライブラリで、最近名を広めているものに React があります。Reactを使うと、ユーザインタフェースをコンポーネントベースで管理でき、情報がリアルタイムで伝播していくという強みがあります。とはいえ、この規模のコードベースにReactを使う必要性はあまり高くはないということを友人ごちうさから聞き、またReact + ReactDOM自体の容量がjQueryに対して肥大であるという点も導入の障壁であるということでした。

これに対して、クラスベースで管理していくことは一つのベストプラクティスであるという話も友人NEW GAME!から聞きました。ノンフレームワークで作っていったので責務があやふやだったり「あれどこに書いたんだっけ」ということが頻発しました。クラスベースで設計することでこれが少しは楽になるのではという展望があります。

これからも、自分自身で自分のプロダクトのWebサイトやマーケティングの舵を切りながら、幅広い知識を身につけていきたいと思っています。