5000164 is here
My writing is my life.
No results for undefined
Powered byAlgolia
iOSでDOMに要素追加してjQueryでclickイベントを取得する

clickイベントを取得したい

DOMに要素を追加するとjQueryのclickイベントって効かなくなるんですね

知らなかった

そういう時はjQueryのonを使えばclickイベントも取得できるってことで実装

Chromeで動作確認

動いた

iOSで見てみる

動かない

iOSでonのclickイベントが取得できない

iOSで動かなくていろいろ調べてみました

でもサンプルが動いてるサイトもある

うーん

そこで手元でちょっとずつ変更を加えながら調べてみたところ

サンプルのaタグをdivタグに変えると動かなくなるということが判明

そこでonlick=””を追加すれば動くようになるという記事を発見

divタグにonclick=””を追加することでiOSでも無事にclickイベントを拾うことができました

iOSのlabel要素と同じ対処法ですね

動かないのは同じような理由なのでしょうか

デモ

まとめ

iOSのDOMに追加したdiv要素のclickイベントを取得したかったらonclick=””をつけること

参考

スマートフォンブラウザのjQuery Clickイベントに関すること - くらげだらけ

guess what?: JQueryのliveイベントがiPhoneのSafariで登録できない

ブログのデザインを変更しました Version 1.8

ブログのデザインを変更しました。

今回のでVersionは1.8へ、ってことなので8回目の変更ですね。

では今回のデザイン変更点を。

デザインの変更コンセプト

今回のデザイン変更のコンセプトは「フラット」で「オシャレ感」を出すことです。

フラットデザインは今のWebデザインのトレンドなので練習を兼ねて。

オシャレ感を出すデザインがまだうまくできないのでこれも練習を兼ねて。

デザインの変更点

ブログタイトル

今までは左上にブログのロゴを置いていましたが、今回のコンセプトとしてオシャレ感を出すというものがあったので、大きく余白多めにとって目立つように配置しています。

それに合わせてフォントも変更。

Google Web Fontsの中からイメージに合うものを選びました。

今回は曲線がきれいだった「Tangerine」を使用しています。

hの縦線が素敵です。

記事一覧の表示方法

今までは1行に1つの記事を表示していました。

そしてアイキャッチ画像は途中から使用するようにしたので、アイキャッチ画像が表示されるとうまくバランスがとれていませんでした。

ということで、アイキャッチ画像を表示する前提でデザインの組み直し。

そしてフラットデザインの練習ということで、1行に2つの記事を表示するようにして記事を敷き詰めた上で、背景色で市松模様にしてみました。

色がうすいのでわかりづらいのですが、あんまりやりすぎてもうるさいかなぁと判断してのことです。

また、1行2列の記事表示になったので、それに伴ってブログ全体の横幅を768pxから1024pxに広げています。

フッター

全体的に淡い色合いを使用しているので、ブログの見た目を引き締めるためにダーク系の色合いに変更しました。

フッターを暗くしたことで全体の安定感を出しています。

ここではただ黒い色ではなく、暗黒系だけど淡い感じの色を使用しています。

記事ページ

ヘッダーとフッターやコンテンツ幅は前述した内容に基づいています。

他の変更点として、まず記事のタイトル名を中央寄せにしました。

これもオシャレ感を出すためです。

ヘッダーを表示しているので、ヘッダーと同じ中央寄せにしてバランス取ってます。

次に、背景に使用していた画像をなくしました。

今はただの白を指定しています。

今まで背景色に真っ白は使用しないようにしていたのですが、ただの真っ白の方が読みやすいのかな、と思って試してみています。

あとは前に実装したループスクロールをちょっと前に辞めたりしています。

動作がうまく制御できなかったというのと、HTMLが冗長な内容になってしまう、というのが辞めた理由です。

以上が変更点です。

まとめ

前よりはオシャレ感出たかなと思って、自分では満足しています。

やっぱり画像が表示されていると映えますねー。

ブログのデザインをいろいろと考えていて、湯船に入りながらも考えていたら、このデザインを思いついて、創作意欲が湧いてきたので一晩で一気に作ってしまいました。

Operaの右クリックで表示中のページのURLを取得したり別のブラウザで開いたり

Operaの右クリックをカスタマイズ

Operaの右クリックで表示されるメニューをちょっとカスタマイズするだけですごく使いやすくなりますよ

便利ですよ

というわけでOperaのmenu.iniに下記を追記します

現在表示中のページのタイトルとURLを取得する

[Document Popup Menu]
~中略~
++++++++++++++++++--
Item, "Copy URL" = Go to page, "javascript:(function(){window.prompt('', document.title+'\n'+location.href);})();" & Delay, 100 & Cut & Cancel

現在表示中のページをChromeで開く

[Document Popup Menu]
~中略~
++++++++++++++++++--
Item, "Open page in Google Chrome"=Execute program, "chrome","%u"

リンク先のページをChromeで開く

[Link Popup Menu]
~中略~
++++++++++++++++++--
Item, "Open link in Google Chrome"=Execute program, "chrome","%l"

結論

ちょっとしたカスタマイズですごく幸せになれます

作詞してみた

友達の曲に詞をつけてみた

友達が作曲をしたというので、他の友だちと30分作詞一本勝負をした

結果は惨敗だった

あまりの才能に全俺が嫉妬

曲は機会があれば紹介するかも知れません

んじゃ書いてみた詞でも載せてみますね

竹林

あーやらなきゃいけないことは今日もたくさんあるし
やりたいことだってもっとたくさんあるし
やりたいことだけやって生きていたいけど
そうそうなかなかうまくはいかないよねやっぱり

嫌なことがあっても全部忘れて踊り続けていればいいんじゃない
好きに踊って好きに歌って自分が楽しければそれでいいんじゃない
大事なのはいつだって自分だって他人じゃないんだってそれはあなただって本当はわかってる
もう自分に嘘つかないで思っきり踊って見せてよねえ

今日はどのくらいいいことがあるのかな
明日は今日よりももっといいことがあるのかな

毎日がエブリデイでその中で今日も私は精一杯生きてるんだって
心のどっかで私の私がずっとそうやって叫んでるんだって
この声は誰にも届かないかもしれないけれどそれでもあなたにだけは聞こえて欲しいんだ
もっとこっちにきてこの私の声を聞いてよねえ

私は今もここでずっと踊ってるよ
明日も明後日もここで踊ってるよ
踊るのは楽しい踊ってる自分が好き
楽しそうに見えるなら私と一緒に踊らない

嫌なことがあっても全部忘れて踊り続けていればいいんじゃない
好きに踊って好きに歌って自分が楽しければそれでいいんじゃない
大事なのはいつだって自分だって他人じゃないんだってそれはあなただって本当はわかってる
もう自分に嘘つかないで思っきり踊って見せてよねえ

毎日がエブリデイでその中で今日も私は精一杯生きてるんだって
心のどっかで私の私がずっとそうやって叫んでるんだって
この声は誰にも届かないかもしれないけれどそれでもあなたにだけは聞こえて欲しいんだ
もっとこっちにきてこの私の声を聞いてよねえ

生きるのが難しい

自分の力不足がすごくつらい

もっともっとみんなを助けたい

もっともっとよりよくなりたい

でもできてない

無力な自分がつらい

おれは全然いいところないし

顔もきもいし

でもそれでも誰かの役に立ちたいし

そうやって生きていたい

もっと幸せになって欲しいし

もっとつらいことを減らしたい

具体的なところでいくと

今は会社がつらい

みんなすごいがんばってるのに

おれは全然協力できてない

もっともっとがんばらないといけないのに

がんばれてない

仕事が忙しいとか時間がないとか言い訳して

自分では何も勉強してないし成長してない

つらい

つらいつらいつらい

どうしていいのかわからない

最近生きるのは楽しい

でも生きてるとつらいこともある

もっとよりよくなりたい

おれはもっと成長したい

周りにいい影響を与えたい

傍観者になりたくない

上から目線で

これじゃだめだ

とか

我関せずで

もっとこうすればいいのに

とか

言いたくない

負けたくない

いい環境にいれば自分が成長するのは当たり前で

自分が成長してないのを環境のせいにしたくない

一度きりの人生なんだから言い訳しないで本気で全力で勝負したい

だからもう環境を作りたい

めっちゃいい環境を作りたい

すげー居心地がよくてもっと生きていたくなるような環境を作りたい

毎日が楽しくなるような

生きるのが楽しくなるような

環境を作りたい

もっともっと本気で頑張らないと

もっともっともっと

がんばらないと

テキストボックスの文字を右寄せにしているとiOSで入力しにくい

iOSでの文字入力

iOSでテキストボックスに文字を入力しますよね。

カーソルを移動する矢印がないですよね。

不便ですよね。

文字を右寄せにしているともっと不便です。

右端までなかなか移動できません。

どうして右寄せにしているのか

全部数字だったりすると桁を合わせて見やすくするためにも右寄せにしたりしますよね。

それが入力項目だから使いづらくなってるわけです。

iOSでも入力しやすくする方法

ひらめきました。

focusがあたっている時は左寄せにしてあげればいいのです。

デモとコード

動作画面

このように動作します。

テキストボックスに数字を右寄せで表示。

上のテキストボックスは特に何も設定をしていません。

文字を消すにはカーソルを右側に持って行かなければならないのですが手間がかかる。

下のテキストボックスはfocusがあたった時点で左寄せにしています。

このようになることで簡単に文字の右側にカーソルを持ってくることができます。

まとめ

何気ないことですが、こういったことの積み重ねがUXの向上につながっていくと考えています。

ずっとどうすれば編集しやすくなるか考えていたので、1つの案としてこれが出てきたことでほっとしています。

会議のルールを考えている

会議というものをよりよいものにするために会議のルールを考えてる。

まだ全然洗練されてない。

とりあえず草案。

前提としての意識共有

基本方針

「会議はコスト」

なるべくなら会議は実施しないように努める

会議を開ける条件

「物事を前に進めるために何かを決定する必要がある場合」

情報共有が目的の会議は認められない

会議を開く場合

大前提

  • 参加者は全員平等である

会議の準備

  • 会議の責任者を決める
  • 責任者は会議への参加者を5名程度、最大でも10名以下で選出する
  • 責任者は事前に議題・目的・所要時間を共有する
  • 会議の時間は最大でも2時間以内とする
  • 資料は極力印刷しないでプロジェクタなどを利用する

会議の進め方

  • 責任者が議事進行を行う
  • 時間になった場合は参加者がそろっていなくても会議を始める
  • 会議の終了予定時刻の10分前には会議をまとめるように進める
  • 最後に会議で決定したことを全員で確認する
  • 参加者は決定事項に対して次にどのような行動をとるか具体的に決める

会議の話し方

  • 参加者は必ず発言をする
  • 発言する時は要点をまとめて端的に意見する
  • 発言するときに怒ったり泣いたりしない
  • 会議の前提を否定するような発言をしない
  • 議論の対立があったとしても会議が終わったら引きずらない

会議の聞き方

  • 他人の発言を遮らない
  • 話を聞く時は他のことをしない
  • 話を聞く時は発言者のことを見る
  • わからないことがあればすぐに質問する
  • どのような意見であっても間違いだと決めつけずに建設的に考える

以下参考にさせていただいたもの

グーグル流「会議を意味あるものにする5つのルール」 | Web担当者Forum

IBM社員が身につけている会議ルール - 皆、みんな、ミンナ!~見んなよ(笑)

フィンランドの5年生が作った議論のルール 負けまいとする心でしょう!

攻めのプログラミング

攻めのプログラミングという言葉を聞きました

すげーハッとした

攻めてるか攻めてないか

これ大事だと思う

常に改善を求めてるか

よりよいものを求めてるか

おれは

「このプログラミングほんとに攻めてんの?」

って言われた時に

「ガンガンいってます」

ってノータイムで答えられるようになりたい

悩む時間とかなしに自信を持って答えたい

それくらいに常に本気で取り組んでいたい

失う覚悟をして初めて前に進める

失う覚悟をして初めて前に進める

なんか名言っぽい?

おれが今作りました。

どういう意味?

意味はそのままです。

何か物事を進めようと思っています。

やれることはたくさんありますよね。

でも、何をやっていますか?

あれは疲れるし、これはかっこ悪いし、それは恥ずかしいし。

結局何をしたんですか?

そういうことです。

行動には失敗がつきものです。

いろいろと失うものもあるでしょう。

でも、それらを失う覚悟をしなければ前に進む一歩が踏み出せません。

いわゆる吹っ切れたってやつです。

それがどうした

失う覚悟をしました。

その結果、前に進みました。

今まで恥ずかしがってできなかったことができるようになりました。

微妙なことを中途半端に頑張っちゃってるおれ、って他の人に見られたら恥ずかしいって思ってました。

やるならプロフェッショナル級にスマートで完璧にこなしたいと。

でも、無理でした。

だって何もしてないんだもん。

だからダサくてもがんばることにしました。

失ってもいいと覚悟を決めたら、道が開けました。

そもそも

結果が大事なのではないですよね。

失ってもいいという覚悟を決めるには相当考えないとだめです。

その相当考えるってところが大事です。

相当考えて初めて覚悟を決めたときにいろいろと行動できるようになります。

考えないで覚悟することは無謀です。

考えても覚悟できないのは臆病です。

バランスが大事です。

なんでこんなことを言い出したのかというと

今日はさらなる発見をすることができたからです。

それは1人じゃないってことです。

吹っ切れていろいろ行動すると、周りからは多少浮くかもしれません。

でも、やっぱり見ててくれてる人はいるんです。

おれのことを想ってくれてるんです。

守ってくれてるんです。

すごい嬉しいことです。

つまり?

失う覚悟をしたら今まで見えなかったことが見えてきました。

自分の表現は広がり、見える世界も広がる。

覚悟を決めたのが1つのきっかけになって、次のステップに進めた気がします。

まとめ

失う覚悟をするのは難しい。

でもそれは覚悟であって、失っていいってことではない。

行動にどれくらいの覚悟を持って臨めるかである。

おれはもっとがんばれる。

ブログのデザインを変更しました

ブログのデザインを変更しましたよ。

変更点

ロゴ

今まではスクロールしてもロゴの位置が変わらないようにしてたのですが、今回はスクロールしたら一緒にスクロールするようにしました。

それに伴って目立って邪魔にならないように色を抑えてたものを、普通に見えるように変更。

マウスをホバーした時の画像は薄いロゴを流用したので修正する必要あり。

文字サイズ

本文の文字サイズを18pxから16pxへ変更。

最初は大きくていいなーと思ってたけど、見てるうちにあとほんの少し小さい方が読みやすいなと感じたから。

それに伴い行間もほんのり狭く。

ループスクロール

そして最大の変更点はこれ。

ループスクロール(おれが今命名)です。

ずっとやってみたかったことをついにやってみた。

思ったよりも簡単に実装できてよかった。

ちゃんとデバッグしてないけど。

これは、本文を読み終わって「トップへ戻る」ボタンを配置するくらいなら勝手にトップに戻してしまえ、という思想に基づいてデザインしました。

ロゴを固定するのをやめたのも、このループスクロールで下にまたロゴが出てくるからです。

でも実際に実装してみると、区切りがわかりづらいですね。

区切られた部分になにか目印を置いて繰り返しを示す必要がありますね。

あとは、現状では上から下へのスクロールしか対応してないけど、これが上下どっちのスクロールでもいけるようになればいいなと思います。

まとめ

全体的にサイトが見やすくなって大歓迎です。

特にずっとやってみたかったループスクロールが面白くて楽しいです。

あとは徐々に実用性を高めていきたいと思います。