すたらブログ

文系Webプログラマの備忘録

WordPress: 新着記事一覧で本文冒頭120文字と画像1枚を表示したい

目次 要望 冒頭120文字だけを取得する 最初の1枚の画像を取得する 実際の使用例 要望 新着記事一覧に、題名と投稿日時だけでなく本文と画像を載せたい。 本文は冒頭120文字だけを抜き出し、それ以降は「...」で省略したい。 複数の画像がある場合は、最初の1…

PingendoはWebサイトのプロトタイプ作成に使える

目次 Pingendoの注意点 Pingendoを利用したWebサイト制作の流れ Pingendoの不便な点 (Windowsのみ) パスのセパレータがバックスラッシュになる 文書宣言などを挿入できない 手書きのコードが消える場合がある CSSも手書きで追記すべき 使い方 インストール (…

JavaScriptのテストでTravisCIのバッジを取得する実例

目次 実例 要件 (Windows環境) テストを実行 コマンドライン ブラウザ バッジを貼る あとがき 補足: nodistは今は使いません 実例 https://github.com/sutara79/mocha-phantom-travis-test ※ 外村和仁さんのリポジトリからフォークして改変しました。 要件 (…

病人としての自覚が足りなかった

今日、就労支援施設のスタッフの方と面談したのですが、改めて、自分は病人としての自覚が足りなかったと感じました。 平日、10:00~15:00で昼休みありの4時間勤務です。 もっぱらウェブサイト制作を担当していますが、この施設での勤務はあくまでも訓練です…

IE8など、SVGに対応していないブラウザでは代替のPNGを表示したい

デモ: https://sutara79.github.io/demo-svg-fallback/ ソースコード: https://github.com/sutara79/demo-svg-fallback 下記の記事を参考にして、Modernizrを使っています。 参考: SVGをIE等のブラウザ対応を考慮して使う方法まとめ(SVGのフォールバック画…

麻雀を打ち続けて気づいたこと

過去記事: 鬱予防に麻雀を続けることにします 健康麻雀のお店に通い続けて、ネット麻雀を打ち続けて、不用意な捨て牌で負けて後悔するたびに「全体を見渡さなきゃ」「いつでも撤退できる心構えでいなきゃ」と反省点をテキストファイルに書き残すけれど、やっ…

Googleマップをページに埋め込む手順

目次 Googleマップで任意の場所を表示する コードを取得する コードを改変する モバイルで閲覧しやすくする まとめ APIキー不要のインラインフレーム<iframe>で埋め込む方式を採ります。 Googleマップで任意の場所を表示する 検索欄に目標の場所や住所を入力します。</iframe>…

2016参院選: 私が日本共産党へ投票する理由

目次 理由 党員だから 自民党が二度も争点隠しをしているから 2014年の争点隠し 2016年の争点隠し 補足 自民党の街頭演説を聞きました 2016-07-03 共産党への不満 まとめ 理由 党員だから 私は2004年に日本共産党へ入党しています。 現在は会合にはずっと顔…

html5shivの検証

下記のプラグインを検証します。 GitHub: https://github.com/aFarkas/html5shiv CDN: https://cdnjs.com/libraries/html5shiv 検証用ソース一覧(GitHub): https://github.com/sutara79/demo-html5shiv 下記のページをIE8で開いてみてください。 各要素が色…

パララックス用JavaScriptプラグインを使う場合はマウスホイールに注意

目次 Parallax.js 利点 欠点 ScrollMagic 利点 欠点 SuperScrollorama まとめ ページに奥行きがあるかのように感じさせる、いわゆる視差効果をページ内で使いたくて、プラグインをあれこれ試しました。 結果、どのプラグインでも、マウスホイールによるスク…

「私の取扱説明書」を公開しました

Gist: https://gist.github.com/sutara79/31bacdf4709e4df597fe3d17560789e6 3ヶ月の鬱から復帰した際、就労支援施設のスタッフの方から「"私の取扱説明書"というものを作ってみてはいかがですか」と勧められていました。 1ヶ月かかってようやく出来上がりま…

LAN内専用のGitリポジトリを減量したい

git

目次 要望 対象 参考記事 手順 効果 要望 手がけたウェブサイトをGitで管理していますが、もう二度と使うことのない期間限定の古いPDFファイルが履歴に混じっているせいで、小さなウェブサイトなのに.git/フォルダの容量が50MBほどになりました。 画像をほと…

Windows10からWindows7へ戻した

目次 経緯 PC情報 手順 注意点 経緯 父が仕事で使っている古いソフトがWindows10で動かないことが判明したので、1台をWindows7に戻すことにしました。 Microsoftが提供している方法ではなく、アップグレード前にHDDの内容を丸ごとバックアップしていたので、…

Web制作に関する簡単な解説やサンプルの公開もGitHubで行うようにしました

最近、人にCSSの使い方を教えることが多いです。 参考記事のURLを示したり口頭で説明したりする他、サンプルを自前で作ることもあります。 で、せっかく作ったサンプルを保管するにはどうしようかと考えました。 解説だけならこのブログやQiitaでもいいので…

CSS: IE8もサポートする場合の注意点

CSS

ウェブサイトを制作する際、まだまだIE8をサポート対象に含める場合があります。 使って良いもの・ダメなものを自分用に整理しておきます。 IE8では禁止 nth-child (IE9なら可) 対応状況: http://caniuse.com/#feat=css-sel3 calc() (IE9でもダメ) 対応状況:…

GitHubプロジェクトのディレクトリ構成を自分なりに整理

目次 前提: デモはGitHubPagesで公開 今後のディレクトリ構成 実例 コマンドひとつで 前提: デモはGitHubPagesで公開 GitHubでは、主に自作のjQueryプラグインを公開しています。 以前から、デモの公開場所にはusamimi.infoというホスティングサービスを利用…

CSS: 要素を天地左右の中央に配置したい(条件あり)

CSS

目次 条件 補足 縦横比を維持した可変の設定 デモと結果 結論 条件 .outerは縦横比を維持しつつ可変に。 .innerの幅・高さは固定。 対応ブラウザはIE9以上。できればIE8も含めたい。 <div class="outer"> <div class="inner"> inner<br>text </div> </div> 以上の条件で、下記で紹介されている5つの方策をそれぞれ試…

3日間の鬱の報告

目次 期間 経過 Twitterの投稿記録 教訓、対策 期間 2016年5月8日から5月10日までの3日間。 経過 上図の通り、はじめに右足アキレス腱の周囲の痛みと、体のだるさを感じました。 7日(土曜)の朝には軽い咳が出ていました。 この時点では、一週間の疲れで体が…

雇用保険の求職者給付の手続きをしました

目次 経緯 A型と移行の違い 手続きの様子 考え直して 関連メモ 経緯 私は精神障害2級です。(双極性障害2型 (躁うつ病)) 2015年3月から、障害者就労支援施設でA型雇用の形で働いていました。 鬱で3ヶ月間欠勤して復帰する際に、A型雇用から移行支援へと変わり…

Windows: CSScombの使い方

目次 CSScombとは CSScombをインストール Node.jsを入手 Node.jsの確認 CSScombを入手 CSScombの確認 CSScombをコマンドプロンプトで使う エクスプローラからコマンドプロンプトを起動 整形を実行 エラーの例 独自のルールを指定する 私の設定 各エディタの…

Git: リポジトリの中にリポジトリを入れたときに発生した問題の解決策

git

些細なつまづきですが、備忘録として。 状況 2つのウェブサイトを別々に作って、それぞれGitで管理していました。 しかし、一方のサイトをもう一つのサイトのカテゴリの一つとして統合することになり、フォルダも移動しました。 (以下では、組み込んだ方を親…

鬱予防に麻雀を続けることにします

目次 私の症状の特徴 今後の対策 没頭を冷ます 気兼ねをなくす 麻雀の効能 改めたい姿勢 麻雀で勝つには 認知行動療法となりうる まとめ お誘い (関連記事: 2016-04-04 3ヶ月間の鬱の報告) 私の症状の特徴 4月14日の午前、心療内科の先生と支援施設の担当の…

親知らず抜歯体験記

目次 概要 きっかけ 抜歯の様子 余談: 財布を忘れた 抜歯後の経過 感想 概要 上顎左の親知らずを抜きました。 抜いて分かったことですが、ほっぺと接している側に虫歯ができていました。 検査ではなかなか見えない部分です。 親知らずは横向きで顔を出す場合…

Android: 英語学習のためにMP3をゆっくり再生したい

目次 要望 解決策 手順 仮想フィードを追加 再生速度変更 感想 要望 手持ちのTOEICテスト新公式問題集〈Vol.5〉に付属しているリスニング用CDを0.7倍速くらいでゆっくり再生してほしいです。 (すでにCDからiTunesにインポートしてMP3ファイルに変換し、Andro…

3ヶ月間の鬱の報告

目次 期間 発症までの経過 原因 発症後の経過 今後の対策 期間 2015年12月23日~2016年3月30日の、約3ヶ月間。 発症までの経過 2015年12月10日から15日まで、風邪と思われる発熱で欠勤していました。 体温が37.2度だったので、途中からはともかく、はじめは…

JavaScript: pushStateを使ってページの状態を再現可能にする

デモ: http://code.runnable.com/VvynEqA-pBlEAd_k/ タブ表示形式の記事の任意のタブを開いた状態を、URLパラメータに記述して再現可能にします。 pushStateを使うことで、ブラウザの「戻るボタン」の動作にも対応できます。 要点 pushStateを使っているのは…

Windows: 即時バックアップしたい

要望 PCのフリーズやHDDの故障などに備えて、現在手がけている仕事のフォルダをリアルタイムでバックアップしたい。 しかし、Dropboxなどのオンラインサービスを使うわけにはいかない事情がある。 解決策 「RealSync」というソフトウェアを使うことにしまし…

RICOH THETA S の感想

目次 買ったもの 全天球写真 屋内 屋外 満足点 不満点 購入の経緯、感想 買ったもの カメラ: RICOH THETA S アライカメラで購入(価格.com経由) 三脚: Velbon CUBE amazonで購入 全天球写真 屋内 RICOH THETA S で自室を撮影しました。 #theta360 - Spherical…

jQuery: slideDown,slideUpを確実に動作させる

目次 症状 私の解決策 記述例 解説 メニューを閉じる メニューを開く 症状 メニューの表示・非表示を切り替える際にslideDown(), .slideUp()を使っていますが、滑らかにアニメーションせずに.show(), .hide()と同じように瞬時に切り替わってしまいます。 Goo…

Skypeの設定メモ

目次 環境 設定 PCと同時に起動 文字の大きさの変更 導入の経緯 環境 Windows7 32bit Skype 7.15 設定 ツール > 設定 PCと同時に起動 一般 > 一般設定 > コンピュータ起動時にSkype起動 文字の大きさの変更 チャット&SMS > チャット表示スタイル > フォント…