サクサク読めて、アプリ限定の機能も多数!
トップへ戻る
体力トレーニング
imasashi.net
モーダルウインドウが開いた際に裏のページが上下してしまう問題、CSSだけで固定できないかと試行錯誤したのですが、iOSのSafariでどうしても挙動が安定しなかったので、とうとうJavaScriptで実装することにしました。ちょっと悔しい。 基本的な考え方 背景が固定された状態(position : fixed状態)のスタイルを作っておく モーダルの表示/非表示と、背景固定のオン/オフをJSで連動させる モーダルを表示する際に、現在のスクロール位置をJSで取得してCSSに渡す という感じでがんばります。 HTML モーダルウインドウを開く要素に、例えば class=”modalOpner” とクラスをつけておく モーダルウインドウを閉じる要素に、例えば class=”modalCloser” とクラスをつけておく CSS 背景が固定されている状態のスタイルを定義しておきます。 body.f
この記事の要諦 ロリポップでWordPressを運営 サーバ契約から10年間放置していたPHPのバージョンをアップしたら、「データベース接続確立エラー」。 データベースのパスワード更新するだけでは解決しなかった PHP5.3じゃなく5.2からアップデートしたせいっぽい こちとらデータベースまわりは素人なので、この問題の解消に半日かかりました。 2020年になってPHP5.2使っている人がどれだけいるのか疑問ですが、記録として留めておきます。 解決方法だけ知りたい方はこちらから。 ロリポップ管理画面からPHPバージョンアップ テーマやプラグインの互換性は事前にチェックしていたので「後はやるだけだ」とアップデートを実施 さっそく自分のサイトをチェック。 そう来ましたか。 管理画面もこう。 事前調査で「データベースのパスワードも変える必要あるかもよ」という情報を得ていたので、落ち着き払って対処す
タイトル通り、cssの疑似要素でアイコンを表示したい時に、background-imageで画像表示するのもイマドキじゃないかなぁと思って調べたら、ちゃんとやり方があった。 CSSで文字コードを指定する XXXXX:before { content:'\E89E'; font-family: "Material Icons"; } こうすればよい。 contentには文字コードを入力する。 文字コードの調べ方(旧バージョン) 表示したいアイコンの文字コードはすぐ分かるので、”&#x”を”\”にしてcontentに入れる。以上。 文字コードの調べ方(2018年版) Material Design ツールキットが一斉更新された際に文字コード表示が無くなって困っていたが、 ここのコードそのまま入れても大丈夫。 XXXXX:before { content:'3d_rotation'; font-
バリバリの武闘派(?)インフォメーションアーキテクト(IA)としてキャリアを積んできましたが、最近、肩書が変わりました。私が見るチームがIA以外の領域にも広がった事で、一応リーダーとしてIAより広いっぽい名前の方が良いかなぁと思ったからです。 で、1年前まであれだけ嫌いだった「UXなんちゃら」という肩書にジョブチェンジしてしまいました。なぜ嫌いだったかというと、理系出身からすると言葉が一意に定義されずに議論される事に強い抵抗があったからです。が、今はどうでもよくなってます。「議論されているうちが華」という側面もあるかと考え直したからです。 とうとう自分の肩書にUXと付いてしまったので、UXデザインという言葉にも一言なくてはならんであろうという勝手な使命感から、払拭されない疑問をここで呈しておきます。 なお、今回は私の主戦場であるウェブサイトやアプリデザイン領域を対象にしています。サービスデ
最近よく見るようになりましたエフェクトの実装方法です。海外のおしゃーなウェブサイトは必ずといっていいほど取り入れているように思います。 デモ作りました。要するにこういうやつです。 以下、これのつくりかたを紹介します。 基本的な考え方 アニメーションはCSS3のtransitionで制御する アニメーションの開始トリガーをjsで制御する という感じで、CSS3とjsのあわせ技で頑張ります。 具体的なマークアップ コーディング方法です。 HTML <div> <section class="fadein"> <h2>情報設計</h2> <p>何かしらの説明文。何かしらの説明文。何かしらの説明文。</p> </section> <section class="fadein"> <h2>サイトマップ</h2> <p>何かしらの説明文。何かしらの説明文。何かしらの説明文。</p> </section
久しぶりのサイト制作ネタです。 ちょくちょくプライベートでサイト制作をすることがありますが、スマホ対応方法はもうレスポンシブ1択でやらせてもらってます。 だいたいバンド用のウェブサイトを作ることが多いのですが、メンテナンスにコストをかけれないし、CMSを入れるにも、お客さんが扱えないことが多いこともあって、運用考えるとレスポンシブでええわな、という感じです。 あと、俺がめんどくさがりというのも大きいです。 jsっていうと昔は演出作るのがめんどくさくて手を付けてなかったのですが、最近は色気が出てきてちょっとずつ勉強してます。 で、レスポンシブのサイトだと、デバイスごとにjsを書き分けるとか読み込み分けたくなります。cssはブラウザ幅で簡単に記述を変えられますが、jsはいろいろとやり方がある。 たぶん一長一短あるんでしょうが、今のところの私なりの方法をメモしておきます。 更新. documen
案件でこういうのが必要になって、コーダーから「出来ない」と報告を受けたけども「できるんちゃう」と思って実験したらできたのでメモ。 よくあるtable-cellを使うんやけども、縦並びなのはドンピシャな例が見つからなかったんで書いておきます。 デモ » こちらから コーポレートサイトの左右ナビに使いそうなやつです。 作り方 マークアップ方法です。display:table-cellを使います。 html レイアウトのためとはいえ、(文書構造上)無意味なspanが入ってるのが気に食わんけど、どうしても外せんかったので無念。 <ul> <li><a href="#"><span>1行のパターン</span></a></li> <li><a href="#"><span>1行のパターン</span></a></li> <li><a href="#"><span>2行のパターン2行のパターン2行のパ
グローバルナビのアクティブ表示を実装する方法はいくらでもありますが、最も簡単に(というか最小力で)やる方法は何かしら、というのがこの記事の趣旨です。 何を以って簡単と言うかですが、自分の場合可能な限りhtmlをシンプルにというのが信条なので、そこをポイントとしています。 結論から言うと、javascriptを1個追加するだけで完了します。htmlの編集も不要です(javascript読む1行追加するくらい)。 あ、ちなみにナビのデザインにbackgroundで画像を利用してない場合です。あしからず。 自分が在籍してるバンド、Dynamite Satan plusのサイトの場合ですと、グローバルナビはこんな風にコーディングしてました。 <nav> <ul> <li><a href="/live/">live info.</a></li> <li><a href="/member/">memb
こんな記事が流れてきました。 実は、iPhoneのiPod(音楽)機能はあまり使われてないのでは…という話。:Blogで本を紹介しちゃいます。 論理飛躍があるような気が… このデータだけでは「iPhoneで音楽を聴く人が少ない」ではなくて「iPhoneの普及はCDの売り上げ減をカバーできない」しか結論できないように思います。 iPhoneのiPod機能を使ってる人は少ないのは本当かもしれませんが(俺はそうは感じませんが)、少なくともそれを証明するにはデータ不足ちゃうか、というだけの話で、結論を否定する気はないのであしからず。 本題 ここから先は↑のブログとは全く関係ないのですが、そういうことを考えてたら、はっと思ったことがありまして。 最近の「CDが売れない」背景のひとつして、iTunesに代表されるミュージックプレイヤーのUIの進化も関係しているんじゃないか、ということです。 ここで言う
GAのデフォルト設定では参照URLが 「参照元」:ドメインまで 「参照URL」:ディレクトリ以降 と、2つに分割してレポートされます。 これをフルパス表示してくれる方法ないかなーと思ってると、やっぱりあるみたいです。 ただしフィルタ機能を使うので、設定後のデータのみ反映可能です。過去のデータには反映されません。 設定方法 フィルタ設定画面に行きます。GAのサマリー画面から ①右下の「フィルタマネージャー」→「フィルタの追加」から行くもよし ②プロファイルの「編集」→「フィルタの追加」から行くもよし フィルタ設定内容 フィルタ名:識別に使うだけなので内容が分かればなんでもいいです フィルタの種類:「カスタムフィルタ」を選択 「詳細」の選択 フィールドA:プルダウンから「参照」を選択、右のフィールドに「(.*)」を入力 フィールドB:放置(何も入力・選択しない) 出力:プルダウンから「ユーザー
初めに言っておくと、どちらかといえば私はmixi応援派です。 盛者必衰とは申しますが、こういうニュースを見るとwebサービスの儚さについ涙しそうになるわけです。 mixiのオワコン化が止まらない!広告収入激減で収益が6割減! webサービスではこういう落ち目なブランドが一旦付いてしまうと、何をどうテコ入れしても過去のポジションを取り戻すのは不可能な気がします。greeみたいにサービスそのものをガラリと鞍替えしてしまわない限り。個人的にはmixiは頑張ってもらいたいとは思っていますが。 しかし5,6年くらい前?までは隆盛の一途を極めていたのに、もうこのボロクソな言われようを見るとweb従事者としてハタから見てても「空しい」しか感想が出てこないわけです。 で、これを機会に「SNSが終わるとき」について考えてみました。「mixiの利用者はなんで減ってきたのか」ということです。 SNSというのはど
こいつのことです。 投稿エリアにurlが入ってると自動で取得されるサムネイルですが、これの制御方法をメモしておきます。他にも方法があると思いますが、結構手軽に実現できたので自分のやりかたを。 WP-OGPっていうプラグインを使います 自動でオープングラフ系のコードを入れてくれる便利なプラグインです。 WP-OGP こんな感じでタグを生成してくれます。 <!-- BEGIN: WP-OGP by http://www.millerswebsite.co.uk Version: 1.0.5 --> <meta property="og:title" content="[WordPress] facebookやgoogle+でリンク貼られた時の自動サムネイル表示方法" /> <meta property="og:type" content="article" /> <meta property=
以前、dew playerを使ってgoogle bloggerにmp3プレイヤーを貼りつける方法を紹介しました。が、どうやら知らない間にSoundCloudというmp3共有サービスが出来ていたようで、このサービス使った方が全然簡単やんけ…ということで紹介します。 こんなプレイヤーです ついでに大昔にmidiで打ち込んだオリジナル曲を恥ずかしげも無く披露。 SoundCloudプレーヤーの貼り付け方 手順を紹介します。 1. アカウントを取得しましょう まずはSoundCloudでアカウントをとります。Facebookアカウントでもログインできるようです。 英語サイトなんで分かりづらいかもしれませんが、まぁ何となくそれっぽいところをクリックするとアカウントとれます。というか英語がからっきしダメな自分でも難なく完了。 インターフェースはMySpaceよりはるかに分かりやすいです。 2. mp3
その1に続いて、別ウインドウで開いた場合のGA検証レポートです。 今回は「タブを開いた(2タブにまたがり表示)後、元タブでサイト内を回遊した場合」です。 ※前回は新規タブで回遊しました。 実験内容 サイト訪問後、すぐ新規タブでページBを開きます。 開いたタブ(新規タブ)はほったらかしにして、元のウインドウでサイトを回遊します。 今回は3回遷移しました。 (トップ→ページC→ページD→ページE) 元タブ、新規タブの両方を閉じます。 新規タブは、最初にリンクを叩いた以外、何も操作しなかったことになります。 遷移図 こっちの図の方が分かりやすいかもしれません。 結果 こういう結果になりました。 ページBのナビゲーションサマリー ページBは開いた後、そのままタブを閉じましたが、ページCに遷移したことになっています。もちろん離脱もカウントされていません。 むむむ。これはおかしい。 ページEのナビゲー
トップページだけサイドカラムの出し分けをしようとしてif(is_home())を試したんですが、全く反映されずに困っていたら原因が至極単純だった。 トップページの最新記事をquery_posts()を使って吐き出していたんですが、 これを使うと同じページでもそれ以降はarchiveと判定されるようです。 つまりサイトのソース構造がこうなっていると、 こう判定されるらしい。 なので、不必要になったらqueryをキャンセルすればオッケーぽいぞ、と。 ということで最新記事表示箇所の最後に <?php wp_reset_query(); ?> を挿入して無事解決しました。 めでたし。
現在プライベート案件で、とあるジャズトランペット奏者の方のサイトをフルWordPressでリニューアル制作させてもらってます。 で、もちろんライブ予定ページが必要なんですが、固定ページを毎回HTML更新させるわけにもいかん、ということで記事投稿を使って実現する方法をメモします。 要するにこういうのを作りたいわけです。 要件は以下の通りです。 未来投稿がサイトに表示されるようにする 未来の記事だけをピックアップする それを上から日程が近い順に並べる 未来投稿がサイトに表示されるようにする デフォルトでは投稿日を未来に設定するとタイマーセットになってしまいます。これを普通に記事として表示するにはプラグインを使います。 No Future Post これをインストールすれば未来の日付の投稿がアーカイブなどで表示されるようになります。 ただしタイマーセット投稿が出来なくなることにご注意ください。
著者:いまさし 都内のコンサルで働く意識低い系サービスデザイナー。しかし趣味はコーディング。休日はコントラバスとリコーダーを嗜む。 もうちょい詳しく
turntable.fmの感想を書きます。今後このサービスが流行り続けるのかそうでないのかも考えてみます。 音楽をテーマにしたソーシャルメディア的なサービスは今までいくつかありましたが、楽曲再生&共有のリアルタイム性をグッと引き上げることでコミュニケーションを生み出すことに成功した例としては、初めてな気がします。 アーキテクチャ的に言うと、「DJ(流し手)」と「聴き役」を明確に分離して視覚化したのが大きいような気がします。加えて、参加者がとれるアクションがチャットで会話する以外だとボタン一発(awesomeとlame)でも可能、というハードルの低さも目をひきます。 ブログなりtwitterなりFacebookなり、テキストベースのコミュニケーションではどうしても言語の壁は大きく、大体の日本人は英語ができないためにFacebookの時流に乗れないというのはあると思ってます。自分は英語がからっ
ブラウザの戻るボタンによる遷移がGAでどうカウントされているのかよく分かっていなかったので、実験&検証してみました。 検証手順 自分が別で運営しているとあるサイト(GA埋め込み済)に、特定IPだけカウントするフィルタをかけて実験。 遷移は以下のように行いました。 エンジ色の矢印(3,5,6)が「ブラウザで戻る」による遷移です。 ※遷移2の飛び先のページは同ドメイン別サイト(同ウインドウ) ※遷移8の飛び先は別ドメインサイト(同ウインドウ) ※遷移8の後にブラウザを閉じた 検証結果 こういう風にカウントされていました。 サイト全体 全体PVが4になっているところで既におかしいです。ブラウザバックがカウントされていると「トップ」「第2階層A」が重複されるので、PVは計6になるはず。 ただし、まだ「1セッション目がカウントされている」のか、「ブラウザバック後のセッションがカウントされているのか」
相変わらず謎の多いGoogle Anlyticsのユニークユーザー(UU)ですが、「期間合計」と「期間集計」で値が異なります。このあたりはオフィシャルを参照しなくても予想できる範囲なのですが、自分もかつてハマったことがあるのでメモしておきます。 ちなみにここで言う「合計」「集計」は以下の意味で使い分けます。 例えば2月1日~2月7日の1週間を観測対象とすると、 合計:1週間のUU数 集計:1日ごとのUU数を7日分足し合わせたもの ということです。 別に単位は1年とか1ヵ月でも一緒です。 オフィシャルの説明は↓の通りです。 ユニークユーザーの定義について – The Official Google Analytics Blog [ユニークユーザー]と[新規ユーザーとリピーター] – The Official Google Analytics Blog フォーラムではこんな記事も。 月間ユニー
注1:google bloggerでブログを書いていた時期の記事です。 注2:2011年3月30日追記:SoundCloudを使った方法を紹介しました。 前回のエントリで、「ブログに録音ファイルを貼る」という長年の夢をあっさり実現してしまいました。 google bloggerにはデフォルトで音声ファイルのアップロード機能が無く(他のブログサービスはできるんかな)、その設置方法で少々てこずりました。 調べてみると、さすが世の中は広く、どうやら同様の悩みをお持ちの方もいらっしゃるようでした。この私もちょっとは社会貢献する年頃かなと思い立ち、その方法をメモする次第です。 手順 ということで、google blogger にmp3を貼りつける手順です。 大体の流れはこんな感じになるかと思います。 mp3をどこかにアップする プレイヤーを用意する ブログにタグを貼りつける リストにするのがバカらし
明けましておめでとうございます。 新年一発目はGAネタです。 コーポレートサイトでは、入口ページとして機能する重要なページがあると思います。実は、「どんなキーワードで訪問されているかをページ毎に」を調べる際、GAにはちょっとした落とし穴があります。 左カラムの「コンテンツ」→「上位のコンテンツ」→「(特定のページ:ここではindex.htmlとしておきます)」経緯では、正確な値は分かりません。というか嘘データとなってしまいます。 「上位のコンテンツ」で採れるのは嘘データかも? ページ毎の詳細データを採りたい場合は、通常「コンテンツ」→「上位のコンテンツ」→「index.html」と遷移すると思います。 ここの中に「閲覧開始ページのキーワード」といういかにもそれっぽい項目があります。 これです。迷わずクリックします。 それっぽいデータが出てきました。 しかしちょっと待って下さい。「表示回数」
このページを最初にブックマークしてみませんか?
『imasashi.net』の新着エントリーを見る
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く