সর্বশেষ সম্পাদনা করেছেন জেলাল (০৭-১১-২০১২ ১৯:২২)

টপিকঃ ইউজারস্ক্রীপ্ট তৈরি ও শেয়ার করা : পর্ব-১ (স্ক্রীপ্ট তৈরি করা)

চলুন, আজকে আমরা শিখি কিভাবে একটি ইউজারস্ক্রীপ্ট তৈরি ও শেয়ার করা যায়। দুই পর্বের এই টিউটোরিয়ালের মাধ্যমে আমরা ফোরামের জন্য একটি ফন্ট সিলেক্টর বানানো (এই পর্বে) ও সবার জন্য তা শেয়ার করা (পরের পর্বে) শিখবো যা ফায়ারফক্স ও ক্রোমে কাজ করবে (অন্তত)। স্ক্রীপ্টটির আউটপুট অনেকটা এরকম:

http://hostmarts.com/projanmo/user_script_tut/01.jpg

ইউজারস্ক্রীপ্ট আসলে জাভাস্ক্রীপ্ট ছাড়া আর কিছু নয় (সুতরাং যারা জাভাস্ক্রীপ্ট জানেন তাদেরই মূলত ইন্টারেস্ট থাকবে এই টিউটোরিয়ালে। তবে যারা জানেন না তারাও ট্রাই করতে দোষ কি, হ্যাঁ?)। তবে, এটি কাজ করার জন্য ব্রাউজারে ইউজারস্ক্রীপ্ট ম্যানেজমেন্ট (ইউজারস্ক্রীপ্ট ইন্সটল, রান ও ম্যানেজ করানোর জন্য) এক্সটেনশন থাকতে হয় যদি না ইউজারস্ক্রীপ্ট ম্যানেজমেন্টের জন্য ব্রাউজারের নিজস্ব ব্যবস্থা থাকে। মজিলা ফায়ারফক্সের জন্য এরকম একটি ইউজারস্ক্রীপ্ট ম্যানেজমেন্ট টুল হলো Greasemonkey। গুগল ক্রোম ব্রাউজার সম্ভবত নিজে থেকেই ইউজারস্ক্রীপ্ট ইন্সটল, রান ও ম্যানেজ করতে পারে, তবে এজন্য ইউজারস্ক্রীপ্টটি শুধুমাত্র ক্রোম ওয়েবস্টোরের হলেই এটি ইন্সটল করতে পারে। আবার, ক্রোম ওয়েবস্টোরে শেয়ার করার জন্য একটি সিংগেল ইউজারস্ক্রীপ্ট আপলোড করার ব্যাপারটি আমি বুঝে উঠতে পারিনি, যা পেরেছি userscripts.org এ স্ক্রীপ্ট আপলোড করার বেলায়। অবশ্য  ক্রোমের জন্যও Tampermonkey নামক একটি ইউজারস্ক্রীপ্ট ম্যানেজমেন্ট এক্সটেনশন আছে। Greasemonkey (ফায়ারফক্স) ও Tampermonkey (ক্রোম) -এই দুই বান্দর অবশ্য userscripts.org সাইট থেকে যে কোন স্ক্রীপ্ট ইন্সটল ও আপডেট করতে পারে।

যাই হোক, আমরা আজকের টিউটোরিয়ালে ফায়ারফক্স ব্রাউজার ও এর Greasemonkey এক্সটেনশনটি ব্যবহার করবো। যাদের ফায়ারফক্সে এই এক্সটেনশনটি ইন্সটল করা নেই তারা নিচের লিংকে গিয়ে "+ Add to Firefox" বাটনে ক্লিক করে এটি ইন্সটল করে নিন:

https://addons.mozilla.org/en-US/firefo … asemonkey/

ইন্সটল করার পরে এটি অটো-এনাব্‌ল হয়ে যাওয়ার কথা, না হলে মেনু কমান্ড Tools > Add-ons > Extensions থেকে এনাব্‌ল করে নিন।

এনাব্‌ল করার পরে এটির আইকন আপনার ব্রাউজারের উপরের দিকের ডান কোণায় দেখতে পাবেন।

http://hostmarts.com/projanmo/user_script_tut/02.jpg

ইন্সটল করার পরে আপনি স্ক্রীপ্ট বানানো ও সম্পাদনা করার জন্য আপনার ফেভারিট টেক্সট/কোড এডিটরটি গ্রীজমাংকিকে জানিয়ে দিতে পারেন:

http://hostmarts.com/projanmo/user_script_tut/03.jpg

http://hostmarts.com/projanmo/user_script_tut/04.jpg

আসুন, এবারে ইউজার-স্ক্রীপ্ট তৈরি করা শুরু করি।

ধাপ-১:
গ্রীজমাংকি আইকনের এ্যারো চিহ্ণটিতে ক্লিক করি ও ড্রপ-ডাউন মেনু থেকে New User Script... অপশনটিতে ক্লিক করি।

http://hostmarts.com/projanmo/user_script_tut/05.jpg

ধাপ-২:
New User Script... ডায়লগ বক্সের প্যারামিটারগুলো নিচের মত করে দেই:

http://hostmarts.com/projanmo/user_script_tut/06.jpg

যতদুর বুঝি, এখানে Namespace -এ যে ভ্যালু দেবেন সেটি আপনার স্ক্রীপ্টের জন্য একটি ইউনিক বেইসনেম হিসেবে কাজ করবে। একই নামের আরেকটি ইউজারস্ক্রীপ্ট অন্য কেউ শেয়ার করে থাকতে পারে। সেক্ষেত্রে কনফ্লিকশন এড়ানোর জন্য এই নেমস্পেস কাজ করবে। সাধারণত এখানে নিজের মালিকানাধীন সাইটের নাম ব্যবহার করা হয়। আমরা আপাতত এখানে http://forum.projanmo.com ব্যবহার করছি। "Includes" ও "Excludes" -এর ঘরে কিছু থাকলে মুছে দিন। এটি আপাতত আমাদের দরকার নেই। সবশেষে OK করুন।

মজিলা ফায়ারফক্সের প্রোফাইল ফোল্ডারের ভেতরে gm_scripts নামের একটি ফোল্ডারের ভেতরে উপরে বর্ণিত ডায়লগ বক্সে দেয়া Name-এর সাথে মিল রেখে নামকৃত একটি সাবফোল্ডারের ভেতরে স্ক্রীপ্টটির জন্য .user.js ফাইল-এক্সটেনশনযুক্ত একটি জাভাস্ক্রীপ্ট ফাইল তৈরি হবে যার নামও আবার ওই Name প্যারামিটারের সাথে মিল রেখে নামকরণকৃত (এক্ষেত্রে Projanmo_Forum_Font_Selector.user.js) ।

এবং, সাথে সাথে আপনার পছন্দকৃত/ডিফল্ট টেক্সট/কোড এডিটরে জাভাস্ক্রীপ্ট ফাইলটি ওপেন হবে।

সেখানে আবার // ==UserScript== ব্লকের ভেতরে কিছু মেটাডাটা ব্লক তৈরি হবে পূর্বে আপনার ইনপুট দেয়া ভ্যালুগুলোর উপর ভিত্তি করে। এই UserScript ব্লকের প্রতিটি লাইনই "//" দিয়ে শুরু হবে এবং প্রতিটি মেটাডাটা ব্লক "@" সাইন দিয়ে শুরু হবে। যেমন: @name হলো আমাদের স্ক্রীপ্টটির name মেটাডাটা ব্লক। অটোমেটিক্যালি একটি version আইডেন্টিফায়ার মেটাডাটাও (@version) তৈরি হবে ডিফল্ট ভ্যালু "1" দিয়ে। greasemonkey কম্পিট্যাবল মেটাডাটাগুলো সম্পর্কে জানতে http://wiki.greasespot.net/Metadata_Block লিংকটি ভিজিট করতে পারেন। আপাতত ওগুলো না পড়লেও চলবে। smile

http://hostmarts.com/projanmo/user_script_tut/07.jpg

ধাপ-৩:
এডিটরে ওপেন হওয়া ফাইলটির শেষে কার্সর নিয়ে আমরা জাভাস্ক্রীপ্টটি টাইপ করা শুরু করি।

প্রথমে আমরা একটি "div" এলিমেন্ট (যা পরবর্তীতে ব্রাউজার <div> হিসেবে ইন্টারপ্রেট করবে) তৈরি করি এবং তা "font_panel" নামে একটি ভেরিয়েবলে সংরক্ষণ করি।

var font_panel = document.createElement("div");

এরপর, div-টির জন্য একটি আইডি সেট করি (এটা অবশ্য এই স্ক্রীপ্টের জন্য খুব একটা প্রয়োজনীয় নয়, তবে পরবর্তীতে প্র্যাকটিস/ডেভলপ করার সময় আপনি কখনো এটাকে রেফার করতে চাইলে এলিমেন্ট আইডি খুব কাজে লাগবে)।

font_panel.id = "font_panel_div";

আমরা চাচ্ছি, এই সিলেক্টরটি যাতে ব্রাউজার ভিউপোর্টের সাপেক্ষে স্থির থাকে, অর্থাৎ স্ক্রল করে নিচের দিকে গেলেও এটি যেন নিজের জায়গায় দৃশ্যমান থাকে। তাই এর পজিশনের ধরণ সেট করি:

font_panel.style.position = "fixed";

এলিমেন্টটির জন্য পজিশন কো-অর্ডিনেট top ও right সেট করি:

font_panel.style.top = "10px";
font_panel.style.right = "5px";

এলিমন্টটির ফোরগ্রাউন্ড কালার (টেক্সট কালার ও অন্যান্য এট্রিবিউটের ডিফল্ট কালার) সেট করি (আমি জলপাই রং খুব পছন্দ করি tongue ):

font_panel.style.color = "olive";

এলিমেন্টটির জন্য কিছু ফুটানীমূলক সাজুগুজু (শ্যাডো, গোলাকার বর্ডার এরিয়া) তৈরি করি:

font_panel.style.boxShadow = "-5px 5px 10px grey";
font_panel.style.borderRadius = "25px";

এলিমেন্টটির প্যাডিং ভ্যালু সেট করি যাতে ভেতরের ক্লিকেবল লেখাগুলোর আশেপাশে কিছু খালি জায়গা থাকে:

font_panel.style.padding = "10px";

এবারে ভেতরের দুটি ক্লিকেবল নোড-আইটেম নেই। প্রথমটিতে ক্লিক করলে ফন্ট "সিয়াম রুপালী" ও দ্বিতীয়টিতে ক্লিক করলে ফন্ট "সোলাইমানলিপি" হবে। যতদুর দেখলাম, আমাদের ফোরামের বেশিরভাগ পেইজে "brd-page" নামক class-এর এলিমেন্টটিতেই ফন্ট-ফ্যামিলি এট্রিবিউট দেয়া হয়েছে যা ওই পেইজগুলো জুড়ে কাজ করে। আমরাও তাই এই ক্লাসের জন্যই ফন্ট ফ্যামিলি এট্রিবিউট সেট করি অন-ক্লিক ইভেন্টে:

font_panel.innerHTML = "<span style = 'display:block;cursor:pointer;margin-right:10px' onclick = 'document.getElementsByClassName(\"brd-page\")[0].style.fontFamily = \"Siyam Rupali\"'>Siyam Rupali</span><span style = 'cursor:pointer;margin-right:10px' onclick = 'document.getElementsByClassName(\"brd-page\")[0].style.fontFamily = \"Solaimanlipi\"'>Solaimanlipi</span>";

পরিশেষে, ফোরাম পেইজের অন্তস্থিত প্যারেন্ট এলিমেন্ট "brd-wrap" -এর চাইল্ড এলিমেন্ট হিসেবে উপরোক্ত "div" এলিমেন্টটিকে এপেন্ড করি:

document.getElementById("brd-wrap").appendChild(font_panel);

সব কোড একসাথে:

// ==UserScript==
// @name        Projanmo Forum Font Selector
// @namespace   http://forum.projanmo.com
// @description Projanmo Forum Font Selector
// @version     1
// ==/UserScript==

var font_panel = document.createElement("div");
font_panel.id = "font_panel_div";
font_panel.style.position = "fixed";
font_panel.style.top = "10px";
font_panel.style.right = "5px";
font_panel.style.color = "olive";
font_panel.style.boxShadow = "-5px 5px 10px grey";
font_panel.style.borderRadius = "25px";
font_panel.style.padding = "10px";
font_panel.innerHTML = "<span style = 'display:block;cursor:pointer;margin-right:10px' onclick = 'document.getElementsByClassName(\"brd-page\")[0].style.fontFamily = \"Siyam Rupali\"'>Siyam Rupali</span><span style = 'cursor:pointer;margin-right:10px' onclick = 'document.getElementsByClassName(\"brd-page\")[0].style.fontFamily = \"Solaimanlipi\"'>Solaimanlipi</span>";
document.getElementById("brd-wrap").appendChild(font_panel);

স্ক্রীণশটে দেখুন:

http://hostmarts.com/projanmo/user_script_tut/08.jpg

ধাপ-৪:
সেইভ করি স্ক্রীপ্টটি।

http://hostmarts.com/projanmo/user_script_tut/09.jpg

ধাপ-৫:
ফায়ারফক্সে গিয়ে গ্রীজমাংকির এ্যারোতে ক্লিক করে দেখুন নিচে "Projanmo Forum Font Selector" নামে একটি স্ক্রীপ্ট যোগ হয়েছে স্ক্রীপ্টের তালিকায়। পাশে চেকমার্ক থাকার মানে হলো এটি এনাবল্‌ড আছে।

http://hostmarts.com/projanmo/user_script_tut/10.jpg

ধাপ-৬:
যে কোন একটি নতুন ট্যাবে প্রজন্মের কোন একটি পোস্ট ওপেন করি। পেইজ লোড হওয়া পর্য্ন্ত অপেক্ষা করি। এবং টেক্টট নোড দুটিতে ক্লিক করে স্ক্রীপ্টটির কাযর্কারিতা (পেইজের ফন্টের পরিবর্তন) পরখ করি।

পরবর্তী পর্বে দেখবো কিভাবে userscripts.org সাইটে প্রজন্মের সদস্যদের জন্য এই স্ক্রীপ্টটি শেয়ার করবো আমরা। আজ এখানেই শেষ করছি।

Re: ইউজারস্ক্রীপ্ট তৈরি ও শেয়ার করা : পর্ব-১ (স্ক্রীপ্ট তৈরি করা)

জাভাস্ক্রিপ্ট দেখে দুঃখ পেলাম। crying

এনিওয়ে, শেয়ার করার জন্য অসংখ্য ধন্যবাদ, জেলাল ভাই। smile

লেখাটি CC by-nc-sa 3.0 এর অধীনে প্রকাশিত

Re: ইউজারস্ক্রীপ্ট তৈরি ও শেয়ার করা : পর্ব-১ (স্ক্রীপ্ট তৈরি করা)

চরম thumbs_up thumbs_up

Re: ইউজারস্ক্রীপ্ট তৈরি ও শেয়ার করা : পর্ব-১ (স্ক্রীপ্ট তৈরি করা)

নিঃসন্দেহে একটা ভা্ল টিউটো কিন্ত আমার এ গোবরে মাথার জন্য কোন কাজের না। sad

Re: ইউজারস্ক্রীপ্ট তৈরি ও শেয়ার করা : পর্ব-১ (স্ক্রীপ্ট তৈরি করা)

টিউটোরিয়াল পড়ার আগেই একটা কমেন্ট করে যাই। আমি অনেকদিন আগে কেবল কৌতুহলের বশে এই জিনিষটা জানতে চেয়েছিলাম। আজ টিউটোরিয়াল দেখে খুব ভাল লাগল। বাসায় গিয়ে ধীরে-সুস্থে দেখব।

কত কি শিখতে ইচ্ছা করে। এখনও শেখা হলো না কিছুই।

লেখাটি CC by-sa 3.0 এর অধীনে প্রকাশিত

Re: ইউজারস্ক্রীপ্ট তৈরি ও শেয়ার করা : পর্ব-১ (স্ক্রীপ্ট তৈরি করা)

thumbs_up
কিন্তু JS তো পারি না। sad

Re: ইউজারস্ক্রীপ্ট তৈরি ও শেয়ার করা : পর্ব-১ (স্ক্রীপ্ট তৈরি করা)

জাভা শেষমেস শিখতেই হবে...

এই ব্যাক্তির সকল লেখা কাল্পনিক , জীবিত অথবা মৃত কারো সাথে মিল পাওয়া গেলে তা সম্পুর্ন কাকতালীয়, যদি লেখা জীবিত অথবা মৃত কারো সাথে মিলে যায় তার দায় এই আইডির মালিক কোনক্রমেই বহন করবেন না। এই ব্যক্তির সকল লেখা পাগলের প্রলাপের ন্যায় এই লেখা কোন প্রকার মতপ্রকাশ অথবা রেফারেন্স হিসাবে ব্যবহার করা যাবে না।

সর্বশেষ সম্পাদনা করেছেন আজাইরা সাজ্জাদ (০৪-১১-২০১২ ১৪:২৬)

Re: ইউজারস্ক্রীপ্ট তৈরি ও শেয়ার করা : পর্ব-১ (স্ক্রীপ্ট তৈরি করা)

thumbs_up thumbs_up দারুন।
তবে এটি বুঝতে হলে আমাকে আরো ১০/১৫ বার পড়তে হবে। আপাতত এতটুকু বুঝলাম, কিভাবে ইউজার স্ক্রিপ্ট বানাতে হয়  wink
অনেক ধন্যবাদ জেলাল ভাই...

সাইফুল_বিডি লিখেছেন:

জাভা শেষমেস শিখতেই হবে...

জাভা নাকি জাভাস্ক্রিপ্ট?

সর্বশেষ সম্পাদনা করেছেন ফারহান খান (০৪-১১-২০১২ ১৪:৩০)

Re: ইউজারস্ক্রীপ্ট তৈরি ও শেয়ার করা : পর্ব-১ (স্ক্রীপ্ট তৈরি করা)

অনেক ধন্যবাদ জেলাল ভাই  big_smile টিউটরিয়াল টা ঝাক্কাস হইসে  thumbs_up এখন এই পর্যন্ত নিজে নিজে করতে পারি কিনা টেরাই করি  big_smile

মুইছা দিলাম। আমি ভীত !!!

লেখাটি CC by 3.0 এর অধীনে প্রকাশিত

১০

Re: ইউজারস্ক্রীপ্ট তৈরি ও শেয়ার করা : পর্ব-১ (স্ক্রীপ্ট তৈরি করা)

ধন্যবাদ জেলাল ভাই, সময় করে চেষ্টা করব smile

Seen it all, done it all, can't remember most of it.

লেখাটি CC by-nc-sa 3.0 এর অধীনে প্রকাশিত

১১

Re: ইউজারস্ক্রীপ্ট তৈরি ও শেয়ার করা : পর্ব-১ (স্ক্রীপ্ট তৈরি করা)

এত বড় টিউটোরিয়াল। আসলেই মাথায় কিছু ঢুকছে না।  hairpull

Feed থেকে ফোরাম সিগনেচার, imgsign.com
ব্লগ: shiplu.mokadd.im
মুখে তুলে কেউ খাইয়ে দেবে না। নিজের হাতেই সেটা করতে হবে।

শিপলু'এর ওয়েবসাইট

লেখাটি GPL v3 এর অধীনে প্রকাশিত

১২

Re: ইউজারস্ক্রীপ্ট তৈরি ও শেয়ার করা : পর্ব-১ (স্ক্রীপ্ট তৈরি করা)

ধন্যবাদ সবাইকে। ২য় (শেষ) পর্ব পাবেন এখানে

শিপলু লিখেছেন:

এত বড় টিউটোরিয়াল। আসলেই মাথায় কিছু ঢুকছে না।  hairpull

শুধু টেক্চুয়াল বর্ণনাটি হিসেব করলে তেমন বড় হবে না। কিন্তু স্ক্রীণশটের ব্যবহারের কারণে এটাকে অনেক বড় দেখাচ্ছে। পরের (শেষ) পর্বেতো আরো বেশি স্ক্রিণশট দেয়া হয়েছে। sad