読者です 読者をやめる 読者になる 読者になる

おばちゃんのつれづれ 主にマンガとweb

おばちゃんがライフハックや日常を書きます

西炯子『恋と軍艦』を腐女子が読むとこうなる。

田舎町の中学生のあまずっぱい恋模様を描いた、西炯子恋と軍艦

 

 

f:id:obatyan1:20170504224113j:plain

掲載誌が『なかよし』だけあってふわふわしたファンタジックな感じで、おばちゃんが恋愛物として読むには物足りない。

 

 

 

 

だが!この話は『女子中学生がオトナなオジサマに恋☆する話』ではなくて『オジサン同士がいちゃこらするのを遠目に眺める話』なのだ!

f:id:obatyan1:20170504230032j:plain

うわぁぁぁおじさーん!

と思いきや。

f:id:obatyan1:20170504230037j:plain

くっつきそうでくっつかないぃぃぃぃ

 

この話はレビューも面白くて、普通の少女マンガとして読んだ人とおじさんに注目した人で全然違う話に見えてるんだなというのがよくわかる。

 

 

 

出会ってすぐベットインするがっつりBLが主流を占める中、ほんわり覗き見系という希少なジャンルである。主人公の無邪気な女子中学生目線で話が進むためひたすら健全に楽しめるところも良い。関係ないけどNLやGLでは日常系がジャンルとして確立しているのにBLではいまいち少数派なのはなぜだろう。日常覗き見系BLはよしながふみの『きのう何食べた?』くらいしか思い浮かばない。

 きのう何食べた?は7巻以降がおすすめ。1巻はまだ空想の中のホモセクシャルって感じなんだけど巻を負うごとにおじさん二人のほのぼの日常になる。かわいいよおじさん。

 

 

 

 

草野誼『かんかん橋をわたって』を嫁姑問題や毒親に悩んでいる人にぜひ読んでもらいたい。

『かんかん橋をわたって』は良くある普通の嫁姑バトルだと思っていた時代が私にもありました。

でもこの話、毒親(あるいは意地悪姑、暴力夫など)がいかにターゲットを追い詰めるかを克明に書いた話だった。サイコパスとかボーダーパーソナリティとかそういう類の人種のターゲットになってしまった人はこれを読むと彼らがどのような手管で善良で全うな人を崩壊させるかが客観視できると思う。でもすごいえぐいので気持ちに余裕があるときに読んでください。

 

f:id:obatyan1:20170504213816j:plain

ちなみに草野誼というのは くさのよしみ と読むらしいです。

『かんかん橋をわたって』は一見優しそうな義母が実は嫁いびりしまくっているという展開です。

f:id:obatyan1:20170504214009j:plain

夕方嫁が予約設定しておいた炊飯器に深夜こっそり雑巾をひたすという狂気を感じる嫁イビリ。イビリていうかなんかもうわけがわかんなすぎてコワい。

 

 

スポンサーリンク

 

 

 

 

鬼義母は、ただ嫁をいじめるだけではない。殴る蹴るや暴言のような分かりやすいいじめはしない。表面上は優しい姑を完璧に演じつつ容赦なく精神を削ってくる。

嫁の携帯電話を隠して実父の死に目に間に合わなくさせるというほんとに人としてやっちゃ駄目ないじめをやるくせに、それを嫁以外の人には気づかせない。だから嫁は悲しいとか悔しいとか誰にも言えなくなる。外見上はあくまで優しい姑に悪口を言ったら嫁のほうが頭がおかしいことにされてしまう。

わかる。こういうダブルバインドに捕らわれてめちゃくちゃ苦しんでる人いっぱいいる。暴力男や毒親って外面はやたらいいんですよ。だからこそ「あの優しい人が暴力なんて振るうわけがない」って言われて危険を冒して告発した被害者のほうが悪者扱いされる。

 

このほかにも大切なものを壊されたり、万引きの冤罪をきせられたり、それでも誰にも相談できずにごりごりとSAN値を削られてみごとボーダーのターゲットがいっちょあがり。

f:id:obatyan1:20170504215925j:plain

 

彼らの手口がほんとすごく克明に描かれているので気持ちにたっぷり余裕があるときに読んでみると客観視できるかもしれません。余裕がないときには読まないほうがいいです。

f:id:obatyan1:20170504220829j:plain

わかるーー。

ほんとこういうことするよね。でもこれって傍から見れば「里帰りする嫁に手土産を持たせるよい姑」になっちゃう。だから「そんな意地悪くそくらえ!」なんて言ったら『よい姑にいきなり暴言を吐く気の狂った嫁』ってことになってしまう。そうやってキチガイ認定されて薬漬けにされる人けっこういる。現代精神医療の闇。

 

あとすごく気になるのは、この話に出てくる多種多様な鬼姑の少なくとも何人かはおそらく福祉の手が必要な人達だろうなということ。家族の不始末は家族だけで解決し他人の支援を受けるのは恥という田舎くさい因習はとても危険だ。

もしも現実に鬼嫁に苦しんでいるならカウンセラーでも行政でも近所の人でもなんでもいいからとにかく沢山の人に相談してください。ほんとお願いします。

 

ちなみにこの話、5巻以降超トンデモ展開になる。

f:id:obatyan1:20170504223147j:plain

ご新造さまというラスボスが登場して経済封鎖された村を救うのだ!

俺達の努力と友情パワーがあれば悪を倒せる!

という週刊少年ジャンプのようなノリに。

 

姑どこいったよ…

 

 

 

 

 

初心者がコピペだけでレスポンシブなスマホ対応HPを作るテンプレート配布中

これだけスマホが普及してモバイルファーストが言われても、初心者でも簡単にレスポンシブでスマホ対応なHPを作れるテンプレートというのは案外ないものです。

ぬるっと動くアニメーションとかにゅっと出てくるハンバーガーメニューとかぴかぴか光るメニューボタンとか、そういう派手なエフェクトばかり注目されてとても難しいっぽい雰囲気になっているレスポンシブデザインですが、余計なことをやらなければとても簡単です。

 

 

スマホサイト作成が簡単な理由

スマホでもみやすいサイト、というのは

  • スマホの小さい画面で見やすく
  • 通信状態が悪くてもさくさく動く

というのが条件です。つまりあまり高度な技術を使うと逆にスマホで使いにくくなります。なので一昔前のハイスペックPCと安定した有線回旋を前提としたリッチなサイトよりずっとシンプルな構造になっています。HP作成も初心者に優しい時代になりました。

ということで、こんな超絶シンプルなテンプレートを作りました!

f:id:obatyan1:20170503002345j:plain

こちらで見ることができます。

レスポンシブHPのサンプル

 

ダウンロードはこちら

 

構造はこんな感じ。

 

f:id:obatyan1:20170503002526p:plain

メニューは常にトップに固定される以外は、なーんにもやってません。

css一枚とhtml一枚の極限までシンプルを極めた構成のため、にゅるにゅるとトップに戻るボタンやら、にゅっと出てくるハンバーガーメニューやらはありません。その代わり、メニューを変えるときもメニューバーの一箇所を変えるだけですみますし、デザインを変えるときもcss一枚変えるだけ。

ダウンロードはこちら

zipなので解凍してあとは好きに改変してください。クレジット表示不要、商用利用可です。

 

 

 

 

 

 

 

 

 

美女と野獣の英語テーマソングをそれぽく発音するTips

エマワトソン主演でリメイク映画化された美女と野獣の有名テーマソングをそれっぽく歌おうという小ねたです。

美女と野獣のテーマソング「Beauty and the beast」。ちゃーんちゃちゃちゃちゃーん、と、とても印象的なメロディをさらっと口ずさめたら素敵ですね。

実は歌詞は古風でちょっと難しい感じ。

Tale as old as time,

Song as old as rhyme

Beauty and the beast

 これは一番最後の盛り上がる部分です。

こちらのオフィシャル動画では3分ごろの部分。

youtu.be

 

使われている単語自体はそんなに難しくないのですが、日本語に訳そうとすると謎が多いです。

まず一行目の

Tale as old as time,

 からしてよくわからない。

tale=お話 time=時間 そしてas old asは「同じくらい古い」という意味なのでこの文章は

時間と同じくらい古い話

 となります。時間と話が同じ??不思議な言い回しですね。

Song as old as rhyme

 二行目はもっと不思議です。

韻と同じくらい古い歌

 わけがかりません。

最後はわかりやすそうで実は一番謎が深いです。

Beauty and the beaust

これは日本では「美女と野獣」と訳されますが美女というのが名詞であれば冠詞のtheがつくはず。この場合、冠詞がつかないbeautyなので美女という人物ではなくてもっと抽象的な美しさとか美の化身とかそういう雰囲気になります。ですので直訳すると「美しさという概念と野獣」ですね。なんで概念出てきた。エマワトソン演じる主人公のベル*1どこ行った。

 

などと謎と突っ込みどころの多いBeauty and the beaustの英語版歌詞ですが実はこれ、語呂合わせのように語感優先で作られた文章になっています。

 

たとえば 美女=beauty と 野獣=beaust という単語を考えてみましょう。

カタカナで書くと ビューティ ビースト で全然似ていない感じですが、英語のスペルを見ると

beauty  beaust

すごく似てる!

雰囲気としては

ゴ(林檎) シ(臨死)

くらいの似てるレベルです。全然意味が違うけど超似てる。

 

「eau」は「ぇぁぅ」と読みます。

美女=beauty ビ・ぇぁぅ・ティ 

野獣=beaust ビ・ぇぁぅ・スト 

 

ここを押さえると一気にそれっぽい発音になります。

 

あとはリエゾンですね。

Tale as old as time,

 これを

テイル・アズ・オールド・アズ・タイム

と読むと5拍ですが、実際は3拍で歌います。のこりの2拍はどこに行くかというと、前後の単語にくっついてしまいます。

『Tale+as』『 old+as』 『time』

テイル+ア オード+ア タイム

つまり

テイズ オーズ タイム

 という発音になります。美女と野獣のテーマソングではリエゾンを多用しているのでくっつく単語を意識するととてもそれっぽくなります。

 

よっしゃこれで美女と野獣のサビ部分を英語でかっこよく歌えるようになりました!

 

*1:ベルというのはbeautyのフランス読みなのでそもそもこの話の主人公自体が概念上の存在であり、ベルという存在は「野獣が己の美しさに気づく過程」を擬人化したものである、と読むこともできます。

「3月のライオン」がいろいろつらすぎて読めない

映画化もされて話題の 羽海野チカ3月のライオン」読もうと思ったんだけどつらすぎて一巻で挫折。

 

いや、いい話なんだよ。すごく。

大雑把なあらすじ

17歳のプロ棋士である桐山零がいろんな人と将棋したり出合ったり分かれたり勝ったり負けたりしながら成長する話。

ハチミツとクローバー」の羽海野チカ先生だから絵もかわいくて読みやすい。

 

 だがこの零くんは両親と妹を事故でなくしていたり、引き取られた家でもうまくなじめない事情があったり、とにかく話が重い。登場人物全員優しくていい人で、真剣に人生に向き合っていて、すごく感動巨編なんだけど、なまじ人間ドラマの名手が描くからとにかく重い。

 

両親と妹を事故で亡くした霧島零はプロ棋士の家に引き取られることになる。

f:id:obatyan1:20170430152417j:plain

うわぁぁぁぁぁ、つらい。

その当時から将棋の才覚を表していた零と、プロ棋士の実子だけど将棋の才能はイマイチな子たちの確執。継母にいじめられるシンデレラのようだ。だが零にきつくあたる子も悪い子ではなくて、ただ父親に振り向いて欲しいだけ。

f:id:obatyan1:20170430152832j:plain

わぁぁぁぁん!

これ、子供目線だと将棋に夢中で家庭を顧みない悪い父親だという捉え方もできるけど、たぶんそうじゃないんだろなと思う。お父さんはお父さんなりにできることを精一杯やったのだろうし、将棋に関しては厳しかったかもしれないけど将棋なんて関係ない部分で子供たち全員を愛してたんだと思うの。だからこそつらい。

 

そんで極めつけは、3月のライオン一巻の冒頭にある。

養子に入ったのに実子を差し置いて将棋の才能を開花させた零は養父との対戦に勝つ。

f:id:obatyan1:20170430153256j:plain

f:id:obatyan1:20170430153328j:plain

 ぎゃぁぁぁぁぁ!!

無理。ほんと無理。すごいつらい。読めない。

 

なんか、悲劇的な事柄とかは日常の中でも普通に起こるし仕方のないことだと思うんだけど、この話の登場人物たちの悲劇との向き合い方があまりにも不器用すぎてみてらんない。

 つらいなら泣いてよ。泣き叫んで大騒ぎして周りを巻き込んでワガママ言ってよ頼むから。でも「3月のライオン」に出てくる人達はみんな悲しみをこらえて自分のやるべきことを見据え前に進んでいく。えらい。えらいけどさぁ。見てる側としてはハラハラしすぎてストレスになる。

 

両親を無くして、引き取られた家でも馴染めなくて、高校生でプロ棋士という特殊な環境のせいで友達もいなくて、桐嶋零には頼れる大人や何でも話せる友人や将来目指すロールモデルたりえる人も何もかもいない。表向きは天才少年としてちやほやされていても内面はとてつもなく孤独で、もぉおばちゃんつらくて読んでらんない。

でもすごくいい話だと思います。つらいけど。

 

 

 

cssアニメーションは製作者の自己満足でしかない

いまやHP閲覧者の6割がスマホからという時代、飲食店やサロンなどのHPがスマホからだと見れない、見づらい、ということではお客さんがお店を見つけることができません。ですがスマホ対応のHPを作成する業者に頼むと高額になってしまいますので個人のお店だとなかなか手がでません。

逆に考えると、スマホ対応のHPを作成すればお客さんはスマホを使っているのにお店側では対応できていないこのギャップを利用するこの時代ならではの集客が可能です。私もお店のHPをスマホ対応したらぐっと反応率があがりました。スマホ対応やるなら今ですよー!

スポンサーリンク

 

なぜスマホ対応HPは難しいのか

スマホ対応HPを作るのはなかなか難しく「スマホ HP」とか「レスポンシブデザイン」とかでネットで探しても上級者向けの情報しか出てきません。

jQuelyを使って、とか、phpを作成して、とか、あるいは暗号みたいなコードがずらっと書いてあって「これをコピペすればできます」とか。どこにどうコピペすればできるの?という肝心のところが書いてない。

その上ぬるっと動くアニメーションを実装だとかクリックすると光るボタンだとかグラデーション背景だとか余計なことばっかり書かれています。そういうのはwebデザイン上級者には必要なのかもしれませんが、おばちゃんのような永遠の初心者にとっては意味不明です。

HPに求められること

そもそも、個人商店のHPにcssアニメーションでぬるっと動く挙動はHPに必要でしょうか。

「近所においしいカフェはないかな」「このカフェでは紅茶が飲めるかな」とか思って検索したお客さんにとって必要な情報はお店の地図やメニューであって別にぬるっと動く戻るボタンとか一定時間たつと下からにゅにゅっと出てくるお問い合わせボタンだとかクリックするとぐりんと動く矢印だとかそんなイマドキcssアニメーションを見に来てるわけじゃないのですよ。むしろぬるっと動くことで気が散って肝心な情報を得られない危険すらある。

HPに必要なのは今欲しい情報であってそれ以外は邪魔でしかない

ぬるっと動くイケてるエフェクトが見たいなら4D映画でも見に行きます。

メニューボタンが分かりやすい位置にあって、スマホの小さい画面でも横スクロールしないで見れればそれで十分。

 

HPに必要な情報

よっぽどオシャレパワーが要求されるHPでなければ

  1. いつでも分かりやすいメニューボタン
  2. スマホの小さい幅でも見れるレスポンシブデザイン

の二つで十分じゃないですか。むしろそれ以外はいらない。

そしてこの二つであればhtmlとcssがいじれる程度の知識があれば簡単に実装できます。jQuelyもphpもいらない。スマホが普及する以前のページがいっぱいあって複雑なリンク構造でリッチな画像を多様したPCよりよっぽどラクに作れます。

なのにネット上にも本にもスクールにもそういう情報がなかなか載ってなくて、みんなフェードアウトするボタンとかマウスオンで色が変わるとかcssでアイコン作るとかそんなことばっかり言うんだもの。そしてぬるぬる動く余計な情報ばっかのHPが溢れかえるんだもの。

なんかもっとこう、おばちゃんみたいな底辺ユーザーに優しい世界にならないもんですかね。

 

てことで、超シンプルかつイマドキなレスポンシブデザインのテンプレートを配布しようと思います。びっくりするほどシンプル。

超絶シンプルなレスポンシブHPのテンプレート

シンプルすぎて解説不要な気もするけどおいおい解説記事をかいていきます。

 

 

そしてこの超シンプルレスポンシブHPを強力な集客ツールであるスマホアプリ化する方法がこちら。

 

obatyan1.hatenablog.com

 

 

コピペだけで!既存のHPをそのままアプリ化。初心者でも簡単。あと無料。

スマホandroidのアプリを難しいことは抜きにして、さくっと作ろう!のステップ2「既存のHPをmonacaでまるっとアプリ化」についての解説です。

monacaについていろいろ調べるとすごい難しいことがいっぱい書いてあるけど、ほんとはHPコピペだけでできます。すでにお店などのスマホ対応HPがあるならそれを流用してアプリにしてしまいましょう。

もくじ 

 初心者のためのアプリ作成全体の流れをチェックするならこちらの記事

obatyan1.hatenablog.com

 

必要な知識

まず前提として、htmlとcssでHPを作れることが必要です。スマホでストレスなく使えるスマホ対応デザインやレスポンシブデザインで作りましょう。超簡単なレスポンブデザインの方法は今後記事にしていきたいと思います。

これができない人はまずhtmlとcssをがんばりましょう。

詳しくはこちらの記事にまとめました。 

obatyan1.hatenablog.com

 

こういうやつとかで習うのもありです。

 

 

なにがなんだかわからん、そもそもアプリって何?という人はこちらの記事を参考にしてください。

 

obatyan1.hatenablog.com

 

 

 

店舗のアプリ一例

 こういう感じの。すでにあるHPにクーポン機能などをつけてアプリにすることが多いみたいですね。

appreach.net

 

 

アプリストア申請を見据えるコツ

ただアプリを作りたいだけならHPをまるっとコピペすればいいのですが、GooglePlayやAppleStoreなどのいわゆるアプリストアに掲載するアプリを作りたいならちょっとコツがいります。アプリストアに登録しない野良アプリだとタブレットにインストールするのがめんどくなるのでたぶんお店のお客さんはインストールしてくれないと思います。

HPをコピペするだけだと、リジェクトされる

アプリストアに掲載拒否されるのをリジェクトといいます。

AndroidAppleさんの言い分としては「普通にスマホから検索して表示できるHPだったらわざわざアプリにする必要ないじゃん」ということらしいです。

アプリにするとスマホのスタート画面にアイコンが表示されるので、HPをまるっとアプリ化すればわざわざ検索する手間がはぶけて便利、と思うんですがまぁだめなものはだめなので、新着通知とかクーポン機能とか予約機能とか、アプリならではの機能を盛り込んでおく必要があるそうです。

ですので流れとしてはHPをそのままアプリ化してその後monaca上で機能を付け加えるといいんじゃないでしょうか。

 

既存のHPをコピペでアプリ化する方法

てことで、まずは今あるHPをアプリにしてしまいましょう。

monacaアカウントを作る

2新規プロジェクトを作る

3コピペ

てな流れになります。

 

monacaアカウントを作る

monaca公式ページに行く

f:id:obatyan1:20170428133531j:plain

 

https://ja.monaca.io/

『今すぐ試す』を押してメアドとパスワードを入力するだけ。日本発のサービスなので安心の日本語対応です。

 

2新規プロジェクト作成

アプリに最低限必要な機能だけを集めた新規アプリを作ります。

 

monacaにログインすると左側にある『新規プロジェクトの作成』をクリック

f:id:obatyan1:20170428134952j:plain

いちばん上の奴を『作成』

f:id:obatyan1:20170428134958j:plain

名前はあとで変えられるのであんま気にしない。

f:id:obatyan1:20170428135005j:plain

 

できたー。

f:id:obatyan1:20170428135011j:plain

早速開いてみましょう。

 

2HPをコピペ

さくっとコピペしましょう。

1元のHPデータを用意

 今回は私がさくっと作ったサンプルHPをアプリ化してみます。

こんなやつ。

f:id:obatyan1:20170428135804j:plain

これのフォルダはこんな風になってます。

f:id:obatyan1:20170428140325j:plain

jsフォルダはjQuelyを使ってなければないかもしれません。cssフォルダとhtmlはあると思います。

 

また、こんな感じに

f:id:obatyan1:20170428140010j:plain

シンプルなサイトの場合cssはフォルダわけしてないことが多いかもしれませんが細かいことは気にしない。

 

monaca側の作業

 

さっき作ったプロジェクトを開く。

f:id:obatyan1:20170428135011j:plain

 

index.htmlの上で右クリック→ファイルのコピー

f:id:obatyan1:20170428141229j:plain

作りたいHPのhtmlの数だけhtmlを増やします。

f:id:obatyan1:20170428141525j:plain

さーてあとは<body>から下をコピペするだけ。

 

monacaのほうの<body>から下を削除して

f:id:obatyan1:20170428141944j:plain

 

HPのほうの<body>から下をコピペ。

f:id:obatyan1:20170428142205j:plain

これを繰り返してhtml部分をまるっとmonacaにコピペします。

 

そしたらcssもコピペ。

f:id:obatyan1:20170428142529j:plain

jsはドラック&ドロップでできちゃいます。

f:id:obatyan1:20170428143038j:plain

jsをドラック&ドロップする前にindexを選択しておくのがコツです。でないとへんなところにコピーされて後で移動する必要があります。

 

jsと同じ要領で画像フォルダも移動させます。

 

できあがり☆

コピペだけでアプリができてしまいました。

ほんとこれだけなので、ぜひやってみてください。

 

できあがったらプレビューで動作確認

試運転してみましょう。

f:id:obatyan1:20170428143541j:plain

まず、上のツールバーにある「保存」を押します。保存されるとタブの前にある「※」マークがなくなります。※印が全部なくなったら「プレビュー」をぽちっとすると右側に表示されます。まだ画像がないけどちゃんと動くようになりました。メニューボタンとかクリックしてちゃんと動くかどうかチェックしましょう。

 

 

関連記事

 

obatyan1.hatenablog.com

 

 

obatyan1.hatenablog.com