最近お世話になっているWYSIWYGエディタのtinyMCE。基本ほりこむだけのお手軽さも助かる。しかし、少し癖もあるので、使いこなすには慣れも必要。 で、今回もそんなtinyの備忘録。ソースがあるから忘れないと思うが、ソースのありかを忘れる可能性大なので。。 やったことは、ツールバーに独自の項目を追加する方法。私の場合はYoutubeの動画をレスポンシブ対応するためにclassで囲う必要があるが、どうも普通にdivで囲うと中途半端にpタグに囲われてしまう。ということで、ボタン一つで実装できるようにカスタマイズ。 headタグ内の設定情報記述箇所に追加。1つはtoolbarに表示したい情報を追加&a...
とある納品物。jQueryのスライダープラグインのsliderProを使って画像をカルーセル表示し、サムネイル部分はその画像のカテゴリを表示というシステム構築。いざサーバへアップするとなぜかスライダーのサイズが100pxになる。 ソースをにらめっこし、プラグイン系のファイルのアップし忘れも確認し、CSSも差分チェックしたがどこにも不具合がない。スライダーとしては動いており、問題は100pxと異様に小さいことだけ。 この現象、ローカル環境からテストサーバに移した時も経験した。何故あの時ちゃんとメモを残しておかなかったのかと後悔しつつGoogle先生に聞きつつ、ソースとにらめっこ。100px以外は問題ない。100pxにし...
以前の投稿「エクセルでのHTML生成」で関数を使って同じフォーマットのHTMLの制作効率をアップする説明はしましたが、今回はそれの全自動版です。利用シーンの確認どんな状況でも使えるというものではありません。一番効果があるのは一覧画面と詳細画面があり、詳細画面は同じようなフォーマットである前提で、掲載内容の変更が定期的に発生する場合です。また、変更内容をできればエクセル、最悪メールやテキストなどのデータでいただけることも大事です。利用方法エクセルは追加分と追加前の2つのリストを用意しておきます。HTMLに埋め込む情報をあらかじめ1アイテム1レコードにしてください。各アイテムの情報は一致することも条件になります。私の場合は、追加分シートに追加更新するアイテ...
ちょっと備忘録です。お客様のサイトで、「続きを見る」などでAjaxの非同期通信を使いどんどんコンテンツを表示させる機能を実装しています。ただ、ページ遷移し、戻ると初期画面に戻ってしまうので、HTML5のHistoryAPIを実装してみました。色々調べたのですが、なかなかページ遷移、戻るの挙動について解説しているサイトが見当たらなかったので、結構悩みました。仕様トップページでAjaxの非同期通信を行い、写真をどんどん表示写真をクリックすると詳細ページに遷移詳細ページからブラウザの「戻る」でトップページが写真が開いている前の状態にしたい実装例function(){$.ajax({url: './index_ajax.php',data: parms,typ...
商品一覧などの繰り返し処理を行うサイトなどの更新を手作業でやっていると少し切なくなります。もやしのひげ抜きや、枝豆の豆とりのような無心で行う作業が好きな方には向いているのでしょうか。私には到底・・・。ということで、今回はエクセルを利用したHTMLの生成方法です。エクセルやワードでホームページを作った苦い経験をお持ちの方ならアレルギーがあるかもしれませんが、慣れると超速でHTMLが完成します。もやしのひげ取りと、そこにポリシーを持っている方は今回の記事はスルーしてください。エクセル関数の利用エクセルには値を結合させる&という関数があります。これを有効利用します。まずは&の使い方から。A列の1行目とB列の1行目を結合する場合=A1&...
Sassにおける@mixinの有用性は前回まででお伝えしましたが、実際に@mixinを設定するのはちょっと面倒だと感じます。もちろん初めだけというのはわかっているのですが。ノウハウが蓄積すれば自分用@mixinスニペット集なんかを作ると便利でしょうね。そこで、今回はcompassの紹介です。compassはSassのフレームワークという位置づけです。フレームワークというと、便利機能集的存在のため、様々な機能が提供される代わりに余計な機能も提供されるデメリットがあります。しかし、compassの場合はCSSプリプロセッサ―のフレームワークのため、Sassで設定しない限りCSSに余計なセレクタが追加されることはありません。本当に黒子的存在ですね。compa...
Sassでは@mixinを活用すればするほど効率化がすすみます。簡単な@mixinの設定方法を説明します。引数の活用@mixinは@extendやプレースホルダーと違い引数を持つことができるということを説明しました。しかし、デザイナーの方はプログラムが苦手で、ともすればコーディングすら苦手なのに引数なんて？まみれです。私自身もPHPを触るようになるまでは引数ってなんじゃ！という感じでした。（今も若干）では簡単に@mixinでの引数の使い方を。@mixin 定義名(引数) {プロパティ:変数;}上記が一般的な@mixinの定義方法になります。@include 定義名(引数);@includeは上記のような記述になります。Javascriptが分かる方なら...
Sass（サス）とはBootstrap4からLessを外しSassが正式採用されました。これからはSassの時代？Sassは「Syntactically Awesome StyleSheet」の略で、まあすごいスタイルシートという感じ。入れ子や変数が使える素敵仕様。これまで、CSSは記述が単純でわかりやすかった代わりに、大規模サイトになると記述量が大量になり管理が大変でした。私はプロジェクトなんかでエクセルでCSSのセレクタとプロパティをレイアウトごとに管理したりしていましたが、それでも探すのが大変。Firebugと管理表でサルベージの日々という感じでした。Sassは、現状でWebページで直接読み込まれるわけではないので、結局CSSにコンパイルするので...