jQuery リストの順番を入れ替える


Lorem Ipsum

“Neque porro quisquam est qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit…”

  • What is Lorem Ipsum?
  • Why do we use it?
  • Where does it come from?
  • Where can I get some?
  • The standard Lorem Ipsum passage, used since the 1500s
  • Section 1.10.32 of “de Finibus Bonorum et Malorum”, written by Cicero in 45 BC
  • 1914 translation by H. Rackham
  • Section 1.10.33 of “de Finibus Bonorum et Malorum”, written by Cicero in 45 BC


今回はリストの順番を入れ替える動きをjQueryで実装しました。
jQuery-uiのサイトを見れば、ある程度自由にサンプルを実装できそうです。

コードは以下の通りです。


<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"><span data-mce-type="bookmark" style="display: inline-block; width: 0px; overflow: hidden; line-height: 0;" class="mce_SELRES_start"></span></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1/jquery-ui.min.js"></script>
<h2>Lorem Ipsum</h2>
<p>"Neque porro quisquam est qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit..."</p>
<ul id="sortable">
<li>What is Lorem Ipsum?</li>
<li>Why do we use it?</li>
<li>Where does it come from?</li>
<li>Where can I get some?</li>
<li>The standard Lorem Ipsum passage, used since the 1500s</li>
<li>Section 1.10.32 of "de Finibus Bonorum et Malorum", written by Cicero in 45 BC</li>
<li>1914 translation by H. Rackham</li>
<li>Section 1.10.33 of "de Finibus Bonorum et Malorum", written by Cicero in 45 BC</li>
</ul>
<script>
$( function() {
$( "#sortable" ).sortable();
$( "#sortable" ).disableSelection();
} );
</script>

jQuery オブジェクトを掴んで拡大、縮小させる

サイズが変わるよ

シンクロもするよ


今回はWordpressにjQuery-uiのcssを取り込むことに苦労しました。結局、jQueryのcdnからリンクさせることでうまくゆきました。
テーマエディタのhedder.phpに下記のコードを追加することでCSSを反映させることができました。
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.css">

コードは以下の通りです。


<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js">
<span data-mce-type="bookmark" style="display: inline-block; width: 0px; overflow: hidden; line-height: 0;" class="mce_SELRES_start"></span>
</script>
<div id="resizable" class="ui-widget-header">
<p class="ui-state-active">Resize</p>
</div>
<div id="also" class="ui-widget-content">
<p class="ui-widget-header">will also resize</p>
</div>
<script>
$( function() {
$( "#resizable" ).resizable({
alsoResize: "#also"
});
$( "#also" ).resizable();
} );
</script>

jQuery オブジェクトを掴んで(ドラッグして)自由に動かす


自由自在にドラッグすることができます。

自由に動きます

今回は、オブジェクトを掴んで自由に動かす機能をjQueryで実装しました。

jQueryの公式サイトだけを見て実装することができたので、自分としては成長を感じています。只、このオブジェクトを掴んで動かす機能ですが実際のウェブサービスでの利用シーンが浮かばないので今一つ「覚えてやったぜ!」感がありません。まぁ、User Interfaceの使い方を覚えたというだけで十瓶な進歩かと。

コードは以下の通りです。

<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script>
$( function() {
$( "#draggable" ).draggable();
} );
</script>
<h3>自由自在にドラッグすることができます。</h3>
<div id="draggable" class="ui-widget-content">
<p class="draggText">自由に動きます</p>

jQuery ボタンをクリックしたらテキストをフェードイン、フェードアウトさせる

このテキストはフェードインしたりフェードアウトしたりします。

jQueryでボタンを押下したらテキストがフェイドインしたりフェイドアウトしたりする動きを実装しました。

コードは以下の通りです。


<h3 id="text">このテキストはフェードインしたりフェードアウトしたりします。</h3>
<button id="toggle">トグルします</button>

<script>
$("#toggle").click( function() {
if($("#text").css("display") == "none") {
$("#text").fadeIn("slow");
} else {
$("#text").fadeOut("slow");
}
})
</script>

jQuery クリックしたらオブジェクトを変化させる

WordPressではjQueryが最初から使えると聞いたので、本当に使えるのか試してみました。四角を消すのと円を大きくするのはjQueryで実装しましたが、「元に戻す」ボタンだけはjQueryでどうして良いか分からなかったのでJavaScriptで実装しました。

この四角をクリックしたら消えます。

この円をクリックしたら大きくなります。

元に戻す


twitterフォロワー1万人チャレンジ 7日目

経過日数:7日目

じっと我慢の子

頑張って毎日ツイートしている事で、徐々にフォロワー数が増えてきています。
だけど、アカウント凍結事件の後遺症で本日は4人しかフォローできませんでした。
大体、4日で100人ぐらいのペースでフォロワーが付いてきてくれているので、フォロワーを1万人にするには400日かかる計算になるから
このままのペースですと、一年以上かかってしまうことになります。フォロワーが増えるに連れ、日々のフォロワー数も増えていってくれれば、一年以内にフォロワー数1万人も夢ではないかもしれないと想えてきました。

今日の成績

フォロワー数:381人 (+12人)
本日フォローした数:4人
今日のツイート数:

twitterフォロワー1万人チャレンジ 6日目

経過日数:6日目

tweetだけでフォロワー数を獲得する

昨日は、「1日に143人フォロー」したところ、アカウントが凍結されてしまったので、6日目はフォローは極力せず、tweetの力だけでどれだけフォロワー数が増やせるか試してみました。(フォローは11人に留めました。)
やっぱり、フォローすれば、いわゆるフォロバを30%ぐらいの確率でもらえるので、フォローしないとなると、なかなかフォロワー数は増えません。
ただ、良質なツイートをしているとイイねの数はとても増えます。しょっちゅう、スマホの通知がなっている状態でちょっと楽しかったです。
しかしながら、フォロワー数の増加が一日20人程度だと、1万人になるまで500日もかかる計算になるので、もうちょっとリスクをとって1日100人程度はフォローしてゆきたいと思います。

今日の成績

フォロワー数:369人 (+19人)
本日フォローした数:11人
今日のツイート数:

twitterフォロワー1万人チャレンジ 5日目

経過日数:5日目

アカウントが凍結される

フォロワー数が欲しくてフォローしまくったら1000人ほどフォローしまくった結果、アカウントをロックされました。
twitter的には「アカウントが乗っ取られた可能性があるのでパスワードを変えてください。」との事でしたので
パスワードを変更する事で無事アカウントが復旧しました。
1000人程度フォローしてみてわかった事ですが、大体3人に一人がフォロー返ししてくれる事がわかりました。
これにより無闇なフォローによるアカウントロックが怖くなりましたので、意味のありそうなtweetを繰り返す作戦に今後は切り替えてゆきたいです。

socialdogという無料ツールを使っています

socialdogでは、非アクティブなユーザーを抽出してフォロー解除できたりするツールです。
他にもたくさん機能があり、使いこなそうとすると有料プランに変更する必要があるので、有料プランに変更したらまた記事にしたいと思います。
こちらは「socialdog」というツールで取得できるアナリティクスです。

フォロワーが300人を超えてきたあたりから通知が頻繁にくるようになった

フォロワーが300人を超え始めた辺りから確実にリアクションの数が変わりました。
「フォローされました。」や「いいねされました。」といった通知が頻繁にくるのでツイートするのが楽しみになってきました。

今日の成績

フォロワー数:375人
今日のツイート数:

チームビルディング日記 -Oracle Master 12c BRONZEが気になってきた-

66Days
今日も、GoogleAppsScriptとSQLとAWSソリューションアーキテクトの勉強を行った。
その中でもSQLの勉強が佳境に差し掛かっており、「スッキリわかるSQL」の終わりが見えてきた。

SQLの勉強を始めたきっかけは、社内で利用しているBiツールを使いこなすためだが、このまま勉強が終わってしまってもなんだかもったいない気がするので、オラクルの資格試験でも受けてみようかと考えている。
そこで、以下の参考書を購入した。

一人で独学だとちょっと自信がないけれど、チームで当たれば、この山も乗り越えられるような気がする。

チームビルディング日記 -AWS認定ソリューションアーキテクト難しいかも-

65Days
今日は、GoogleAppsScriptの勉強とソリューションアーキテクトの勉強を行った。

GoogleAppsScriptの勉強

GoogleAppsScriptは引続き、ドットインストール(dotinstall)で行った。
#08 処理の高速化をしてみよう まで完了した。
JavaScriptの勉強を一年続けたおかげで、今までは、暗記しないと書けなかったコードが、「あれ?ここってこういう書き方だったよね?」って感じで多分こうなはずって感じでコードを書くことができるようになってきている。
今のうちから、GoogleAppsScriptでどんなアウトプットをするか考えるだけで楽しみだ。
勉強が進めば、実装のアイデアもいろいろ出てくると思うのでどんどん勉強を進めたい。

AWSソリューションアーキテクトの勉強

第2章 グローバルインフラストラクチャとネットワークの勉強に突入。
相変わらずAWSの用語は一般ではほとんど聞かない英単語だらけだ。VPC(ヴァーチャルプライペートクラウド)の勉強で相当躓いた。
AWS簡単かも!と思っていたが、少し甘い考えだったかもしれない。
ただ、私も情シスのキャリアが5年程度あり、その中で少なからずAWSのコンソールには触れてきたり、社内のネットワークに関する理解は少なからずあるので、その経験も大きく役立っていて、なんとかついて行ける内容だった。
ネットワークに関する勉強をきちんとしたことがなかったので、今回の認定試験の勉強で、だいぶ理解できるようになりそうだと今からワクワクしてきている。

twitterの仕組みについてもちょっと勉強した

twitterに投稿していると、「フォロワーの増やし方」とかの投稿を見かけるが、「一体何のためにフォロワーを増やしたいのか?」と思っていたのですが、最近、その意味が少し理解できるようになった。それに伴い、せっかくなのでちょっとは効率の良いツイートができるように勉強してみたのだが、twitterの世界は世界で奥が深く面白い。
一通りまとまったらそれはそれで記事にしたいと思った。

今日の勉強のまとめ

毎日勉強できて幸せ!以上!